形状

浏览示例。 浏览示例

.NET 多平台应用 UI (.NET MAUI) Shape 是 View 的一种类型，可用于在屏幕上绘制形状。 Shape 对象可用于布局类和大多数控件，因为 Shape 该类派生自该 View 类。 .NET MAUI 形状位于 Microsoft.Maui.Controls.Shapes 命名空间中。

Shape 定义以下属性：

  • Aspect 描述了类型 Stretch 的形状如何填充其分配的空间。 此属性的默认值为 Stretch.None。
  • Fill类型 Brush，指示用于绘制形状内部的画笔。
  • Stroke类型 Brush，指示用于绘制形状轮廓的画笔。
  • StrokeDashArray类型 DoubleCollection，表示一组值 double，这些值指示用于描绘形状轮廓的短划线和间隙的图案。
  • StrokeDashOffset类型 double，用于指定短划线图案中短划线开始的距离。 此属性的默认值为 0.0。
  • 类型为float[]的StrokeDashPattern指示用于绘制形状笔划时的短划线和间隙图案。
  • StrokeLineCap类型 PenLineCap，描述线条或线段的开头和末尾的形状。 此属性的默认值为 PenLineCap.Flat。
  • StrokeLineJoin，类型为PenLineJoin，指定用于形状顶点的连接类型。 此属性的默认值为 PenLineJoin.Miter。
  • StrokeMiterLimit，类型 double，指定一个形状的斜切角长度与其一半StrokeThickness比例限制。 此属性的默认值为 10.0。
  • StrokeThickness类型 double，指示形状轮廓的宽度。 此属性的默认值为 1.0。

这些属性由 BindableProperty 对象提供支持，表示它们可以是数据绑定的目标，并可以设置样式。

.NET MAUI 定义派生自 Shape 类的多个对象。 这些是 Ellipse、 Line、 Path、 Polygon、 Polyline、、 Rectangle和 RoundRectangle。

绘制形状

Brush 对象用于绘制形状的 Stroke 和 Fill：

<Ellipse Fill="DarkBlue"
         Stroke="Red"
         StrokeThickness="4"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Start" />

在此示例中，Ellipse 的描边和填充被指定为：

绘制形状。

重要

Brush 对象使用类型转换器，该转换器允许 Color 为 Stroke 属性指定值。

如果您没有为Stroke指定Brush对象，或者将StrokeThickness设置为0，则不会绘制形状周围的边框。

有关 Brush 对象的详细信息，请参阅 画笔。 有关有效 Color 值的详细信息，请参阅 “颜色”。

拉伸形状

Shape 对象具有一个 Aspect 属性，属于 Stretch 类型。 此属性确定如何 Shape 拉伸对象的内容以填充 Shape 对象的布局空间。 Shape对象的布局空间是 .NET MAUI 布局系统为Shape分配的空间量，这可能是由于显式的WidthRequest和HeightRequest设置，或者因为它的HorizontalOptions和VerticalOptions设置。

Stretch 枚举定义以下成员：

  • None，指示内容保留其原始大小。 这是 Shape.Aspect 属性的默认值。
  • Fill，指示调整内容的大小以填充目标维度。 不保留纵横比。
  • Uniform，指示调整内容的大小以适应目标维度，同时保留纵横比。
  • UniformToFill，指示调整内容的大小以填充目标维度，同时保留纵横比。 如果目标矩形的纵横比与源不同，则会将源内容剪裁为适合目标维度。

以下 XAML 演示如何设置 Aspect 属性：

<Path Aspect="Uniform"
      Stroke="Yellow"
      Fill="Red"
      BackgroundColor="LightGray"
      HorizontalOptions="Start"
      HeightRequest="100"
      WidthRequest="100">
    <Path.Data>
        <!-- Path data goes here -->
    </Path.Data>  
</Path>

在此示例中，对象 Path 绘制心脏。 对象的PathWidthRequest属性HeightRequest设置为 100 个与设备无关的单位，其Aspect属性设置为 Uniform。 因此，将调整对象的内容大小以适应目标维度，同时保留纵横比：

拉伸形状。

绘制虚线形状

Shape 对象具有一个类型为 DoubleCollection 的 StrokeDashArray 属性。 此属性表示 double 的值集合，这些值用于指示用于勾勒形状轮廓的短划线和间隙的图案。 DoubleCollection 是 ObservableCollection 的 double 的值。 double集合中的每个元素都指定短划线或间隙的长度。 集合中的第一项位于索引 0 处，指定短划线的长度。 集合中的第二项位于索引 1 处，指定间隙的长度。 因此，具有偶数索引值的对象指定短划线，而具有奇数索引值的对象则指定间隙。

Shape 对象还具有一个StrokeDashOffset 属性，该属性的类型为 double，用于指定短划线图案中短划线开始的位置的距离。 未能设置此属性将导致 Shape 具有纯色轮廓。

可以通过设置 StrokeDashArray 和 StrokeDashOffset 属性绘制虚线形状。 该 StrokeDashArray 属性应设置为一个或多个 double 值，每个对用一个逗号和/或一个或多个空格分隔。 例如，“0.5 1.0”和“0.5,1.0”都是有效的。

以下 XAML 示例演示如何绘制虚线矩形：

<Rectangle Fill="DarkBlue"
           Stroke="Red"
           StrokeThickness="4"
           StrokeDashArray="1,1"
           StrokeDashOffset="6"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

在此示例中，绘制带有虚线笔划的填充矩形：

虚线矩形。

控制线结束

一条线有三个部分：起始帽、线条体和终端帽。 开始和结束端点描述线条或线段开头和结尾的形状。

Shape 对象具有一个 StrokeLineCap 属性，其类型为类型 PenLineCap，用于描述线条或线段的开头和末尾的形状。 PenLineCap 枚举定义以下成员：

  • Flat，表示不超出行最后一点的上限。 这与无行帽相当，并且是属性的 StrokeLineCap 默认值。
  • Square，表示高度等于线条粗细的矩形，长度等于线条粗细的一半。
  • Round，表示直径等于线条粗细的半环。

重要

如果在没有起点或终点的形状上设置该属性，该 StrokeLineCap 属性将不起作用。 例如，如果将此属性设置在Ellipse或Rectangle上，则没有效果。

以下 XAML 演示如何设置 StrokeLineCap 属性：

<Line X1="0"
      Y1="20"
      X2="300"
      Y2="20"
      StrokeLineCap="Round"
      Stroke="Red"
      StrokeThickness="12" />

在此示例中，红线在行的开头和结尾处四舍五入：

线条帽。

控制线联接

Shape 对象具有一个 StrokeLineJoin 类型 PenLineJoin属性，该属性指定在形状顶点使用的联接类型。 PenLineJoin 枚举定义以下成员：

  • Miter，表示正则角顶点。 这是 StrokeLineJoin 属性的默认值。
  • Bevel，表示倒角顶点。
  • Round，表示圆角顶点。

注释

当属性设置为时，可以将属性设置为，以限制形状中线条连接处的斜接长度。

以下 XAML 演示如何设置 StrokeLineJoin 属性：

<Polyline Points="20 20,250 50,20 120"
          Stroke="DarkBlue"
          StrokeThickness="20"
          StrokeLineJoin="Round" />

在此示例中，深蓝色折线的顶点处使用了圆角连接。

线条连接方式。

  • Last updated on