渲染形状

的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兼容模式。此模式生成更有效和紧凑的内容。