教程6：渲染形状
2020-03-13 本文已影响0人
YottaYuan
渲染形状
的github
在本教程中，我们将学习如何使用Shapes和Brushes。
形状元素用于绘制矢量图形。形状具有填充属性（用于背景颜色）和描边属性（用于轮廓颜色）。这两个属性的类型均为Brush。使用StrokeWidth属性，您可以控制轮廓的粗细。
注意
Shape.Stroke是画笔而不是钢笔是WPF中存在的不幸的不一致之处。我们决定在NoesisGUI中遵循相同的API。在内部，确实使用笔来创建Shape的轮廓。但是Shape不直接暴露Pen，而是将Stroke定义为Brush并公开其他属性以调整内部Pen的设置：StrokeStartLineCap，StrokeEndLineCap，StrokeThickness等。
刷子
笔触和填充属性需要设置为有效的Brush：
- 纯色：用单色填充目标区域。它具有简单的Color属性。由于类型转换器将“ Blue”或“ #FFFFFFFF”之类的字符串转换为SolidColorBrushes，因此它们与XAML中的基础Color不能区分。
- 线性渐变：用假想线段上特定点上由颜色定义的渐变填充区域，并在这些点之间进行线性插值。
- 径向渐变的工作方式与LinearGradientBrush相似，不同的是它有一个起点，并且每个GradientStop都以椭圆的形式从中起点。
- 图像：图像画笔使用位图绘制区域。该ImageSource的财产是为了保持该位图的内容。在“ 图像教程”中有一章专门介绍ImageBrush。
形状
NoesisGUI支持四种基本形状：Rectangle，Ellipse，Line和Path。
长方形
对于带有或不带有圆角的矩形或正方形：
ShapesTutorialImg3.jpg
<StackPanel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
VerticalAlignment="Center">
<Rectangle Width="200" Height="100"
Fill="Orange" Stroke="Black" StrokeThickness="10" Margin="4" />
<Rectangle Width="200" Height="100" RadiusX="10" RadiusY="30"
Fill="Orange" Stroke="Black" StrokeThickness="10" Margin="4" />
<Rectangle Width="200" Height="100" RadiusX="30" RadiusY="10"
Fill="Orange" Stroke="Black" StrokeThickness="10" Margin="4" />
<Rectangle Width="200" Height="100" RadiusX="100" RadiusY="50"
Fill="Orange" Stroke="Black" StrokeThickness="10" Margin="4" />
</StackPanel>
椭圆
对于绘制椭圆或圆形：
ShapesTutorialImg4.jpg
<StackPanel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
VerticalAlignment="Center">
<Ellipse Width="200" Height="100"
Fill="Orange" Stroke="Black" StrokeThickness="10" Margin="4" />
<Ellipse Width="100" Height="200"
Fill="Orange" Stroke="Black" StrokeThickness="10" Margin="4" />
</StackPanel>
线
对于连接两个点的线段：
<StackPanel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
VerticalAlignment="Center">
<Line X1="100" Y1="50" X2="400" Y2="200" Stroke="Orange"
StrokeThickness="10" Margin="4" />
<Line X1="100" Y1="0" X2="400" Y2="0" Stroke="Orange"
StrokeThickness="10" Margin="4" />
<Line X1="100" Y1="150" X2="400" Y2="0" Stroke="Orange"
StrokeThickness="10" Margin="4" />
</StackPanel>
路径
对于复杂形状：
ShapesTutorialImg6.jpg
<StackPanel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
VerticalAlignment="Center">
<Path Fill="Orange" Stroke="Black" StrokeThickness="10"
Data="M 80,200 A 100,50 45 1 0 100,50 Z" />
</StackPanel>
形状通常放置在Canvas内，因为它支持其子对象的绝对定位。以下示例说明了一些基本形状：
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Height="300" Width="300" Background="LightGray">
<Line X1="30" Y1="30" X2="130" Y2="130" Stroke="Black" StrokeThickness="8"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Ellipse Canvas.Top="25" Canvas.Left="160" Height="120" Width="120"
StrokeThickness="4" Stroke="Black">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Rectangle Canvas.Left="45" Canvas.Top="250" Height="150" Width="80" RadiusX="9" RadiusY="9"
Fill="LightBlue" StrokeThickness="2" Stroke="Green" StrokeDashArray="3,1">
<Rectangle.RenderTransform>
<RotateTransform Angle="-80" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
ShapesTutorialImg1.jpg
除了上面已经注释的细节之外，在前面的示例中还有一些有趣的地方：
- 通过StrokeStartLineCap和StrokeEndLineCap属性可以修改起点和终点的行程上限。
- 笔划破折号是通过StrokeDashArray属性设置的。
- 元素可以通过附加属性或更改RenderTrasform属性来定义其在Canvas中的位置。
路径是复杂的形状，用于绘制以特殊的路径标记语法表示的图形，这是一种用于编写紧凑代码的迷你语言。有关该语言的更多信息，请参见SVG规范。Inkscape是从SVG文件转换为XAML路径格式的绝佳工具。
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Height="440" Width="385">
<Path Fill="#FFF2F000" Stroke="#FF000000" StrokeThickness="9"
Data="m 608.07798 229.66418 c -88.45345 78.6253 -223.89753 70.658 -302.52283 -17.79545
-78.62529 -88.45345 -70.65799 -223.897534 17.79546 -302.522828 86.89794 -77.242622
219.53868 -71.098432 298.92375 13.846751 L 465.71429 69.505043 z">
<Path.RenderTransform>
<TranslateTransform X="-245.7143" Y="150.8571"/>
</Path.RenderTransform>
</Path>
<Ellipse Height="45" Width="45" Fill="#FF000000">
<Ellipse.RenderTransform>
<TranslateTransform X="201" Y="110"/>
</Ellipse.RenderTransform>
</Ellipse>
</Canvas>
ShapesTutorialImg2.jpg
注意
在Inkscape中，要生成与NoesisGUI兼容的内容，必须选择Silverlight兼容模式。此模式生成更有效和紧凑的内容。
