Silverlight 基本形状和画图概述

 

Silverlight 基本形状和画图概述

本主题概述如何使用 Shape 对象进行画图。Shape 是一种 UIElement 类型，允许你在屏幕上画出基本图形。由于是 UI 元素， Shape 对象可以在 Canvas 元素中使用。

 

本主题包含以下小节：

• Shape 对象
• 使用路径和几何体
• 画基本形状
• 对基本形状进行变换
• 相关主题

Shape 对象

Silverlight 提供了很多现成的 Shape 对象可以使用。可以使用的 Shape 对象包括 Ellipse、 Line、Path、Polygon、Polyline和Rectangle。Shape 对象共同拥有下面的属性：

• Stroke: 描述基本形状的轮廓如何绘制。

• StrokeThickness: 描述基本形状轮廓的厚度。

• Fill: 描述基本形状的内部如何绘制。

• 设置坐标和顶点的数据属性是以 设备无关的像素为单位的。

Shape 对象可以在 Canvas 对象中使用，Canvas通过设置 Canvas.Left 和 Canvas.Top 附加属性支持子对象的绝对定位。

Line 类允许你在 2 点之间画直线，下面的例子显示了指定线段坐标和边框（stroke）属性的多种方法。

 

XAML

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="300" Width="300"> <!-- Draws a diagonal line from (10,10) to (50,50). --> <Line X1="10" Y1="10" X2="50" Y2="50" Stroke="Black" StrokeThickness="4" /> <!-- Draws a diagonal line from (10,10) to (50,50) and moves it 100 pixels to the right. --> <Line X1="10" Y1="10" X2="50" Y2="50" StrokeThickness="4" Canvas.Left="100"> <Line.Stroke> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Blue" Offset="0.25" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Line.Stroke> </Line> <!-- Draws a horizontal line from (10,60) to (150,60). --> <Line X1="10" Y1="60" X2="150" Y2="60" Stroke="Black" StrokeThickness="4"/> </Canvas>

尽管 Line 类提供了 Fill 属性，由于 Line 没有任何区域，所以，设置它是没有任何效果发。

另外一个基本形状是 Ellipse。通过设置图形的 Width 和 HeightEllipse 属性创建 Ellipse。要画一个圆，将 Ellipse 的 Width 和 Height 属性值设置为相等即可。

XAML
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Fill="Yellow" Height="100" Width="200" StrokeThickness="2" Stroke="Black"/> </Canvas>

使用路径和几何体

Path 类允许你画曲线和复杂形状。这些曲线和形状使用 Geometry 对象来描述。要使用 Path，你先创建一个 Geometry，然后设置 Path 对象的 Data 属性。有多种 Geometry 对象可供选择。 LineGeometry、RectangleGeometry 和 EllipseGeometry 类描述了相对简单的形状。要创建更加复杂的形状或者创建曲线，请使用 PathGeometry。创建 PathGeometry 对象的信息，请参见 Silverlight 几何图形概述。

XAML 简写语法

在 Extensible Application Markup Language (XAML) 中，你也可以使用特殊的简写语法描述 Path。下面的例子使用简写的语法画出复杂的形状。

XAML
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 100,200 C 100,25 400,350 400,175 H 280" /> </Canvas>

下图显示了上面例子中 Path 的结果。

Data 属性字符串以“move to”命令（使用 M 标记）开始，以 Canvas 坐标系统为路径建立起始点。Path 的 Data 参数是大小写敏感的。大写的 M 表示当前点的绝对坐标。小写的 m 表示的相对坐标。第一部分是三次 Bezier curve（贝塞尔曲线），以点(100,200)开始，(400,175)结束，使用两个控制点(100,25) 和 (400,350)绘制而成。这部分使用 C 命令，再次说明，大写的 C 表示绝对路径，小写的 c 表示相对路径。

第二段以绝对的水平线“line to”命令 H 指定从前面子路径的终点（400，175）到新的终点（280，175）之间画一条线。由于它是画水平线的“line to”命令，指定的值是 x 坐标。

有关路径语法的完整信息，请参见 Data 参考和 Path（路径）标记语法。

绘制基本图形

你可以使用 Brush 对象来划出一个基本形状的 Stroke（边框） 和 Fill（填充）。在下面的例子中， 指定 Ellipse 的边框和填充。请注意，画刷属性的有效值只能是关键字名或者是 16 进制的颜色值。

XAML
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="LightGray"> <Ellipse Canvas.Top="50" Canvas.Left="50" Fill="#FFFFFF00" Height="75" Width="75" StrokeThickness="5" Stroke="#FF0000FF"/> </Canvas>

下图显示了展现的 Ellipse。

另外一种方法是，你可以使用属性元素语法明确创建一个 SolidColorBrush 对象来画出纯色的基本形状。

XAML

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- This polygon shape uses pre-defined color values for its Stroke and Fill properties. The SolidColorBrush's Opacity property affects the fill color in this case by making it slightly transparent (opacity of 0.4) so that it blends with any underlying color. --> <Polygon Points="300,200 400,125 400,275 300,200" Stroke="Purple" StrokeThickness="2"> <Polygon.Fill> <SolidColorBrush Color="Blue" Opacity="0.4"/> </Polygon.Fill> </Polygon> </Canvas>

下图显示了呈现的基本形状。

你还可以画带渐变、图像、模式等的基本形状的边框和填充。更多信息，请参见 Silverlight 画刷概述。

变换形状

Transform 对象允许你在 2 维平面里变换图形。变换的种类包括旋转（RotateTransform）、缩放（ScaleTransform）、 倾斜（SkewTransform）和平移（TranslateTransform）。

对图形常用的变换是旋转。要旋转图形，创建一个 RotateTransform，然后指定他的 Angle。Angle 设置为 45 代表顺时针旋转元素 45 度；Angle 的值设置为 90，表示顺时针旋转 90 度，依次类推。如果你想要控制元素沿什么点旋转，请设置 CenterX 和 CenterY 属性。这些属性值以被旋转元素的坐标空间表示。CenterX 和 CenterY 的默认值都是 0，最后设置图形的 RenderTransform 属性对元素应用 RotateTransform。

下面的例子中，采用 RotateTransform 对图形沿左上角（0，0）旋转 45 度。

XAML

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Rotates the Polyline 45 degrees about the point (0,0). --> <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" Stroke="Blue" StrokeThickness="10" Canvas.Left="75" Canvas.Top="50"> <Polyline.RenderTransform> <RotateTransform CenterX="0" CenterY="0" Angle="45" /> </Polyline.RenderTransform> </Polyline> </Canvas>

要对图形（或者任何其他的 UI 元素）应用多个变换，请使用 TransformGroup。

有关变换对象和其他例子，请参见 Silverlight 变换概述。