Silverlight cung cấp ba thành phần hình họa cơ bản: hình ellipse, chữ nhật và đường thẳng.
Đối tượng ellipse mô tả một hình ellipse hay hình tròn. Bạn có thể kiểm soát chiều rộng và chiều cao bằng cách đặt thuộc tính Width và Height.
Đối tượng Rectangle mô tả một hình vuông hoặc một hình chữ nhật, có thể bo tròn góc. Bạn kiểm soát chiều rộng và chiều cao bằng cách đặt giá trị các thuộc tính Width hoặc Height. Bạn cũng có thể dùng thuộc tính RadiusX và RadiusY để xác định độ cong của góc.
Thay vì dùng các thuộc tính Width và Height, bạn kiểm soát kích thước và vị trí của một đường thẳng bằng cách đặt giá trị cho các thuộc tính X1, Y1, X2, Y2 của nó.
Ví dụ sau vẽ một Ellipse, một Rectangle, và một Line trong một Canvas.
<Canvas xmlns=”http://schemas.microsoft.com/client/2007″ xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”> <Ellipse Height=”200″ Width=”200″ Canvas.Left=”30″ Canvas.Top=”30″ Stroke=”Black” StrokeThickness=”10″ Fill=”SlateBlue”/> <Rectangle Height=”100″ Width=”100″ Canvas.Left=”5″ Canvas.Top=”5″ Stroke=”Black” StrokeThickness=”10″ Fill=”SlateBlue”/> <Line X1=”280″ Y1=”10″ X2=”10″ Y2=”280″ Stroke=”black” StrokeThickness=”5″/> </Canvas>
Các đối tượng hình họa khác
Ngoài các đối tượng Ellipse, Line, và Rectangle, Silverlght còn cung cấp 3 đối tượng hình họa khác: Polygon, Polyline, và Path. Một Polygon (đa giác) là một hình đóng với một số cạnh, trong khi một PolyLine là một chuỗi các đoạn thẳng nối với nhau, các đoạn thẳng này có thể tạo thành một hình đóng (đa giác) hoặc không. Ví dụ sau sẽ tạo nên một Polygon và một PolyLine:
<Canvas xmlns=”http://schemas.microsoft.com/client/2007″ xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”> <Polyline Points=”150, 150 150, 250 250, 250 250, 150″ Stroke=”Black” StrokeThickness=”10″/> <Polygon Points=”10,10 10,110 110,110 110,10″ Stroke=”Black” StrokeThickness=”10″ Fill=”LightBlue”/> </Canvas>
Đối tượng Path có thể được dùng để biểu diễn một hình dạng phức tạp bao gồm cả cung và đường cong. Để dùng Path, bạn phải dùng một kiểu cú pháp đặc biệt để đặt thuộc tính Data của nó. Ví dụ sau sẽ tạo nên ba đối tượng Path.
<Canvas xmlns=”http://schemas.microsoft.com/client/2007″ xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”> <Path Data=”M0,0 L11.5,0 11.5,30 5.75,40 0,30z” Stroke=”Black” Fill=”SlateBlue” Canvas.Left=”10″ Canvas.Top=”10″ /> <Path Data=”M 10,100 C 10,300 300,-200 250,100z” Stroke=”Red” Fill=”Orange” Canvas.Left=”10″ Canvas.Top=”10″ /> <Path Data=”M 0,200 L100,200 50,50z” Stroke=”Black” Fill=”Gray” Canvas.Left=”150″ Canvas.Top=”70″ /> </Canvas>
Để có thêm thông tin về cú pháp của Path, hãy xem phần Path Markup Syntax trong bộ Silverlight SDK.
Vẽ hình bằng cách sử dụng bút vẽ
Hầu hết các hình họa đều bao gồm hai phần, đường viền và nền bên trong được kiểm soát bởi các thuộc tính Stroke và Fill. Hình minh họa sau cho bạn thấy phần đường viền và nền của hình chữ nhật ở ví dụ đầu tiên.
Không phải mọi hình đều có đầy đủ nền và viền: một Line (đoạn thẳng) chỉ có đường viền. Đặt giá trí thuộc tính Fill của một Line sẽ không có tác dụng.
Bạn đặt giá trị cho Stroke và Fill bằng cách sử dụng Brush (bút vẽ). Có 5 kiểu đối tượng bút vẽ mà bạn có thể dùng:
– SolidColorBrush
– nearGradientBrush
– RadialGradientBrush
– ImageBrush
– VideoBrush (mô tả trong phần media)
Vẽ dùng một màu với SolidColorBrush
Để vẽ một vùng với một màu nào đó, bạn dùng SolidColorBrush. XAML cung cấp một số cách để tạo SolidColorBrush.
Bạn có thể dùng một số cú pháp để chỉ tên của một màu, kiểu như “Black” hay “Gray”.
Bạn cũng có thể dùng cú pháp thập lục phân để mô tả các thành phần đỏ, xanh lá cây và xanh nước biển, cùng một thành phần tùy chọn chỉ ra độ trong suốt. Có thể dùng những cách sau:
– Ký pháp 6-số: Dạng là #rrggbb, trong đó rr là hai chữ số thập lục phân mô tả thành phần màu đỏ, gg mô tả màu xanh lá cây va bb mô tả màu xanh nước biển. Ví dụ như: #0033FF.
– Ký pháp 8-số: Định dạng tương tự ký pháp 6-số, ngoại trừ có thêm 2 ký tự mở rộng mô tả giá trị alpha, chỉ ra độ trong suốt: #aarrggbb. Ví dụ: #990033FF.
Ngoài ra còn có ký pháp 3 hoặc 4 số cho các màu 8-bit, nhưng ít được sử dụng.
Thay vì dùng các thuộc tính như Stroke và Fill để đặt giá trị cho bút vẽ, bạn cũng có thể tạo một đối tượng SolidColorBrush riêng và đặt thuộc tính Color cho nó, dùng một trong những định dạng màu đã nói ở trên.
Ví dụ sau đây cho thấy một số cách để vẽ một đối tượng bằng màu đen.
<Canvas xmlns=”http://schemas.microsoft.com/client/2007″ xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”> <Ellipse Height=”90″ Width=”90″ Canvas.Left=”10″ Canvas.Top=”10″ Fill=”black”/> <!– SolidColorBrush by color name. –> <Ellipse Height=”90″ Width=”90″ Canvas.Left=”110″ Canvas.Top=”10″ Fill=”#000000″/> <!– SolidColorBrush by 6-digit hexadecimal notation. –> <Ellipse Height=”90″ Width=”90″ Canvas.Left=”10″ Canvas.Top=”110″ Fill=”#ff000000″/> <!– SolidColorBrush by 8-digit hexadecimal notation. –> <Ellipse Height=”90″ Width=”90″ Canvas.Left=”110″ Canvas.Top=”110″> <Ellipse.Fill> <!– SolidColorBrush by object element syntax. –> <SolidColorBrush Color=”Black”/> </Ellipse.Fill> </Ellipse> </Canvas>
Vẽ hình với gradient dùng LinearGradientBrush và RadialGradientBrush
Silverlight hỗ trợ cả linear và radial gradiant. Gradient có một hoặc nhiều gradient stop mô tả sự chuyển đổi và vị trí của các màu sắc khác nhau trong gradient.
Hầu hết các gradient chỉ cần hai gradient stop, nhưng bạn có thể tạo nhiều hơn nếu muốn.
– LinearGradientBrush vẽ một gradient theo một đường thẳng. Đường thẳng này mặc nhiên sẽ nằm theo đường chéo từ góc trên trái xuống góc dưới phải. Bạn có thể đặt lại giá trị cho thuộc tính StartPoint và EndPoint để thay đổi vị trí của đoạn thẳng này.
– RadialGradientBrush vẽ một gradient dọc theo một đường tròn, mặc nhiên tâm hình tròn này sẽ nằm ở giữa vùng được vẽ. Bạn có thể thay đổi hình thức của gradient bằng cách đặt lại giá trị các thuộc tính GradientOrigin, Center, RadiusX, and RadiusY.
Để thêm gradient stop vào bút vẽ, bạn hãy tạo các đối tượng GradientStop. Đặt lại thuộc tính Offset của một GradientStop thành một giá trị từ 0 đến 1 để đặt lại vị trí tương đối của nó trong gradient. Đặt thuộc tính Color của GradientStop thành một giá trị màu, có thể dùng tên hoặc dùng cú pháp thập lục phân.
Ví dụ sau dùng các đối tượng LinearGradientBrush và RadialGradientBrush để vẽ 4 đối tượng Rectangle.
<Canvas xmlns=”http://schemas.microsoft.com/client/2007″ xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”> <!– Linear gradients –> <Rectangle Width=”140″ Height=”70″ Canvas.Left=”10″ Canvas.Top=”10″> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color=”Yellow” Offset=”0.0″ /> <GradientStop Color=”Red” Offset=”0.25″ /> <GradientStop Color=”Blue” Offset=”0.75″ /> <GradientStop Color=”LimeGreen” Offset=”1.0″ /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width=”140″ Height=”70″ Canvas.Left=”155″ Canvas.Top=”10″> <Rectangle.Fill> <LinearGradientBrush StartPoint=”0,0″ EndPoint=”1,0″> <GradientStop Color=”Yellow” Offset=”0.0″ /> <GradientStop Color=”Red” Offset=”0.25″ /> <GradientStop Color=”Blue” Offset=”0.75″ /> <GradientStop Color=”LimeGreen” Offset=”1.0″ /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <!– Radial gradients –> <Rectangle Width=”140″ Height=”70″ Canvas.Left=”10″ Canvas.Top=”110″> <Rectangle.Fill> <RadialGradientBrush> <GradientStop Color=”Yellow” Offset=”0.0″ /> <GradientStop Color=”Red” Offset=”0.25″ /> <GradientStop Color=”Blue” Offset=”0.75″ /> <GradientStop Color=”LimeGreen” Offset=”1.0″ /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width=”140″ Height=”70″ Canvas.Left=”155″ Canvas.Top=”110″> <Rectangle.Fill> <RadialGradientBrush GradientOrigin=”1,0″> <GradientStop Color=”Yellow” Offset=”0.0″ /> <GradientStop Color=”Red” Offset=”0.25″ /> <GradientStop Color=”Blue” Offset=”0.75″ /> <GradientStop Color=”LimeGreen” Offset=”1.0″ /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas>
Bạn cũng có thể dùng gradient để vẽ viền của một hình họa.
Hình minh họa sau cho thấy các gradient stop của LinearGradientBrush đầu tiên trong ví dụ trước.
Vẽ ảnh dùng ImageBrush
Một kiểu bút vẽ khác là ImageBrush. Mặc nhiên, hình ảnh sẽ được ép lại sao cho vừa với toàn bộ hình, bạn cũng có thể dùng thuộc tính Stretch để kiểm soát cách bút vẽ ép hình ảnh. Ví dụ sau dùng hai đối tượng ImageBrush với các giá trị Stretch khác nhau để vẽ hai đối tượng Rectangle.
<Canvas Width=”300″ Height=”300″ xmlns=”http://schemas.microsoft.com/client/2007″ xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Background=”White”> <Rectangle Height=”180″ Width=”90″ Canvas.Left=”10″ Canvas.Top=”10″ Stroke=”Black” StrokeThickness=”1″> <Rectangle.Fill> <ImageBrush ImageSource=”star.png”/> </Rectangle.Fill> </Rectangle> <Rectangle Height=”180″ Width=”90″ Canvas.Left=”110″ Canvas.Top=”10″ Stroke=”Black” StrokeThickness=”1″> <Rectangle.Fill> <ImageBrush ImageSource=”star.png” Stretch=”Uniform”/> </Rectangle.Fill> </Rectangle> </Canvas>
Đào Hải Nam 