Cách sử dụng Sharp, Brush và Gradient

~ namdh

Sharp, gradient và brush mang lại sức mạnh cho người dùng để có thể tạo ra các control có giao diện đẹp đẽ. Ví dụ, gradient có thể được dùng để tạo ra các hiệu ứng như ánh sáng hoặc đổ bóng. Trong chương trình ví dụ, chúng ta sẽ tạo một chiếc đồng hồ, hình dưới đây sẽ là kết quả sau khi hoàn thành bài hướng dẫn này:

 

Trước khi tạo chiếc đồng hồ này, hãy cùng xem lại một lượt các thuộc tính mà chúng ta dùng để tạo các control này.

Đối tượng Shape

Silverlight hỗ trợ đồ họa vector bằng cách cung cấp các hình họa sau:

  • Ellipse – Mô tả hình trái xoan hoặc hình tròn
  • Rectangle – Mô tả mình vuông hoặc chữ nhật (có thể có các góc bo tròn)
  • Line – Mô tả một đoạn thẳng nối giữa hai điểm
  • Polygon – Mô tả một hình đa giác đóng
  • Polyline – Mô tả một tập hợp nhiều đoạn thẳng liên tiếp, các đoạn thẳng này có thể kết hợp thành một đa giác đóng hoặc không
  • Path – Mô tả các hình họa phức tạp bao gồm cả các đường cong hoặc cung tròn

Màu sắc 

Màu sắc có thể được chỉ định theo một trong những cách sau:

  • Tên, kiểu như “Red”, “Blue”, “Black”…
  • Ký pháp 6 số RGB (red, green, blue) #rrggbb trong đó rr, gg và bb là hai số thập lục phân biểu thị giá trị các thành màu đỏ, xanh lục và xanh dương. Ví dụ: #FF0000 chỉ ra màu đỏ sáng
  •  (alpha, red, green, blue) #aarrggbb trong đó rr, gg và bb là hai số thập lục phân biểu thị giá trị các thành màu đỏ, xanh lục và xanh dương.
  • Ký pháp 8 digit ARGB (alpha, red, green, blue), tương tự ký pháp 6 số nhưng có thêm thành phần alpha(độ trong suốt). Ví dụ, #FFFF0000 mô tả màu đỏ sáng và không trong suốt.

Fill và Stroke

Các hình họa bao gồm 2 phần, đường viền bên ngoài và phần bên trong. Màu sắc của các thành phần này được kiểm soát thông qua các thuộc tính Stroke và Fill. Một sô hình họa như Line chỉ có Stroke, trong trường hợp này, việc đặt lại giá trị cho Fill sẽ không có tác dụng

image

Bút vẽ

Dùng <Ellipse.Fill> chúng ta có thể đặt giá trị cho thuộc tính Fill của hình ellipse này theo nhiều cách:

  • linear gradient brush – Vẽ một gradient dọc theo một đường thẳng. Đường này mặc nhiên chạy dọc từ góc trái trên xuống góc phải dưới. Thuộc tính StartPoint và EndPoint có thể thay đổi các vị trí đó.
  • Image brush – Vẽ đối tượng bằng một ảnh.
  • Radial gradient brush – Vẽ một gradient theo một hình tròn. Mặc nhiên, Hình tròn này có tâm nằm giữa đối tượng được tô màu.
  • Solid color brush – Tô màu đối tượng bằng một màu duy nhất.
  • Video brush – Vẽ một vùng bằng một đoạn video. 

Dưới đây là ví dụ cho từng cái:

image

 

 

<MediaElement Canvas.Top=“300” x:Name=“MyMedia” Source=“MyVideo.wmv” Width=“300” Height=“300” /> <Ellipse Canvas.Top=“20” Canvas.Left=“5” Width=“100” Height=“100” StrokeThickness=“2”><Ellipse.Fill><LinearGradientBrushStartPoint=‘0.1,0.06’EndPoint=‘0.5,0.6’><GradientStop Color=‘#FFFFFFFF’ Offset=‘0’/><GradientStop Color=‘#FF000000’ Offset=‘1’/></LinearGradientBrush></Ellipse.Fill></Ellipse> <Ellipse Canvas.Top=“20” Canvas.Left=“105” Width=“100” Height=“100” StrokeThickness=“2”><Ellipse.Fill><ImageBrush ImageSource=“clock.png” Stretch=“Uniform”></ImageBrush></Ellipse.Fill></Ellipse> <Ellipse Canvas.Top=“20” Canvas.Left=“205” Width=“100” Height=“100” StrokeThickness=“2”><Ellipse.Fill><RadialGradientBrush><GradientStop Color=“Yellow” Offset=“0.0” /><GradientStop Color=“Red” Offset=“1.0” /></RadialGradientBrush></Ellipse.Fill></Ellipse> <Ellipse Canvas.Top=“20” Canvas.Left=“305” Width=“100” Height=“100” StrokeThickness=“2”><Ellipse.Fill><SolidColorBrush Color=“Blue”/></Ellipse.Fill></Ellipse> <Ellipse Canvas.Top=“20” Canvas.Left=“405” Width=“100” Height=“100” StrokeThickness=“2”><Ellipse.Fill><VideoBrush SourceName=“MyMedia” /></Ellipse.Fill></Ellipse>

 Đối với các bút vẽ dạng Video, phải đảm bảo rằng file video được đặt trong thư mục ClientBin trên website của bạn.

Tiếp tục tạo chiếc đồng hồ, chúng ta sẽ bắt đầu với một hình ellipse đơn giản với chiều cao và rộng là 200. Thuộc tính Fill được áp dụng bút vẽ LinearGradientBrush

<Grid x:Name=“LayoutRoot” Background=“Gray”><Canvas x:Name=“Clock”><Ellipse Canvas.Top=“150” Canvas.Left=“5” Width=“200” Height=“200” StrokeThickness=“2”><Ellipse.Fill><LinearGradientBrush StartPoint=‘0.1,0.06’ EndPoint=‘0.5,0.6’><GradientStop Color=‘#FFFFFFFF’ Offset=‘0’/><GradientStop Color=‘#FF000000’ Offset=‘1’/></LinearGradientBrush></Ellipse.Fill></Ellipse></Canvas></Grid>

Đoạn lệnh trên sẽ hiển thị hình sau:

image

 Hãy thêm một hình tròn nhỏ ở giữa cộng thêm 2 nhóm 3 đoạn thẳng màu đỏ để tạo ra kim giờ và kim phút.

            <Line X1=“100” X2=“25” Y1=“246” Y2=“247” Stroke=“Red” StrokeThickness=“1” /><Line X1=“100” X2=“25” Y1=“247” Y2=“247” Stroke=“Red” StrokeThickness=“1” /><Line X1=“100” X2=“25” Y1=“248” Y2=“247” Stroke=“Red” StrokeThickness=“1” /> <Line X1=“106” X2=“60” Y1=“246” Y2=“290” Stroke=“Red” StrokeThickness=“1” /><Line X1=“106” X2=“60” Y1=“247” Y2=“290” Stroke=“Red” StrokeThickness=“1” /><Line X1=“106” X2=“60” Y1=“248” Y2=“290” Stroke=“Red” StrokeThickness=“1” /> <Ellipse Width=“15” Height=“15” Canvas.Left=“100” Canvas.Top=“240”><Ellipse.Fill><LinearGradientBrushStartPoint=‘0.1,0.06’EndPoint=‘0.5,0.6’><GradientStop Color=‘#FFFFFFFF’ Offset=‘0’/><GradientStop Color=‘#FF000000’ Offset=‘1’/></LinearGradientBrush></Ellipse.Fill></Ellipse>

image

Cuối cùng, chúng ta sẽ lập trình để tạo ra các số chỉ ra các con số bằng cách thêm vào các TextBlock. Chúng ta làm điều này bằng cách tính toán vị trí X và Y theo đường tròn với một khoảng là 85 pixel, Mỗi số nằm cách nhau 30 độ. Số 1 sẽ bắt đầu tại vị trí 300 độ.

1: private void AddNumbers()2: {3: double angle = 300;4: for (int i = 1; i < 13; i++)5: {6: TextBlock tb = new TextBlock();7: tb.Foreground = new SolidColorBrush(Colors.White);8: tb.Text = i.ToString();9: 10: double radians = angle * (Math.PI / 180);11: double radius = 85;12: int x = (int)(radius * Math.Cos(radians));13: int y = (int)(radius * Math.Sin(radians));14: tb.SetValue(Canvas.LeftProperty, (double) x+97);15: tb.SetValue(Canvas.TopProperty, (double) y+239);16: 17: angle += 30;18: Clock.Children.Add(tb);19: }20: }

Đây là kết quả cuối cùng:

image

 

 

 

 

Published by namdh

9 thoughts on “Cách sử dụng Sharp, Brush và Gradient”

  1. Hay quá. Bác Nam ui, em đang định copy đống bài hướng dẫn Silverlight2 sang Blog của em quanganht.wordpress.com (hì hì, mới toe, chưa có cái gì), sau đó sửa và bổ sung hướng dẫn cho cụ thể, ngoài ra hướng dẫn và up source code = VB.NET ( em tự làm). Thế có được không ???

  2. Tất nhiên được, nếu có thêm xuất xứ nữa thì càng tốt 😉

  3. private void AddNumbers()
    cái hàm này gọi ở đâu vậy? làm sao gọi nó? chỉ giúp cái nhé Nam

  4. AddNumbers là hàm để hiển thị số, bạn gọi nó lúc tạo đồng hồ. Gọi khi nào cũng được, miễn sao trước khi hiển thị, nếu không đồng hồ sẽ không có số 🙂

  5. Vẫn không rõ lắm! vậy là hàm này đễ chỗ nào? trong file page.xaml hay trang html/aspx? đễ vị trí nào trong trang?
    ^^! hơi bị noob phần này,mới làm quen mà.chỉ giúp mình nhé Nam

  8. sao minh lam ma may cai so no khong hien tren dong ho, ma ni hien o ngoai thanh mot hang ngang

  9. cái phần code tạo số cho đồng hồ, sao báo là phần clock.children bị lỗi, bạn xem lại code dùm mình có thiếu phần khai báo chidlren ko, sao mình làm ko đc. với lại trong visual 2010 ko có Line mình ko tạo kim đồng hồ được, mong bạn giúp cho

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s