ch08 二维绘图控件

操作等与 HTML 的 Canvas 几乎一样.

控件概览

涉及到的控件

控件描述
Ellipse绘制椭圆.
Line绘制线.
Path绘一组线和曲线.
Polygon绘制多个点连接而成的多边形, 最后一个点会与第一个形成闭合图形.
Polyline绘制多条折线.
Rectangle绘制矩形.

笔触属性

绘制图形本质上就是绘制线条, 涉及到线条样式, 颜色等. 这里是常用的绘制属性:

属性描述
Fill控件背景画刷 (类似于其他控件的 Background 属性).
Stroke绘制控件的边界.
StrokeDashArray数组 (逗号分隔), 表示虚线实部与虚部的长度. 这个长度会伴随绘制线的粗细而缩放. 例如长度为 1, 但线宽是 5 像素, 那么绘制时, 会以 5 像素为长度.
StrokeDashCap描述折线端点样式, 可取值为: Flat, Round, Square, Triangle. 其中 Flat 是按照线长精确结束. 其他会在结束位置加上一个 "帽子".
StrokeDashOffset开始绘制的起点与设定起点的偏移值.
StrokeEndLineCap描述线端点的样式, 可取值为 Flat, Round, Square, Triangle.
StrokeLineJoin处理 Rectangle, Polyline, Polygon, Path 相邻线段之间如何转折. 可取值有: Miter, Round, Bevel.
StrokeStartLineCap
StrokeThickness设置线宽.

Ellipse

Ellipse 控件绘制一个简单椭圆, 虽然它也有常用的事件, 但一般不会与用户交互. 该控件没有子组件.

Ellipse 的 Width, Height 决定了控件的尺寸, 其定位取决于容器控件. 如果忽略 Width, Height, 仅用 Margin 可以创建出与容器适配可变的椭圆.

LINE

绘制一条直线, 其属性 X1, Y1 和 X2, Y2 来决定位置. 该控件不含子控件, 且一般不会与用户交互.

需要设置颜色 Stroke, 否则看不到.

可以将该控件想想成一个矩形, 由 Width 和 Height 来控制, 然后在该矩形内部进行坐标计算, 绘制矩形. 即 (0, 0) 是该矩形内部的左上角位置.

image-20250625095821625

PATH

Path 控件用于绘制一系列折线, 圆弧, 贝塞尔曲线, 以及其图形. 可以使用子对象来定义图形, 但是通常使用的是 Path mini-language.

Path Mini-Language

要使用 Path Mini-Language 需要给控件提供一个 Data 属性. Data 属性会包含一组绘图命令简写. 这些指令会使用统一的坐标系, 来确定绘图位置.

案例说明: M41,3 L2,70 78,32 3,19 59,69, 41,3

  • 其中 M 是指 Move, 即移动到 41,3 的位置. 坐标都使用 逗号 分隔.

  • 然后 L 是指 Line, 即绘制折线, 所用坐标点在后续给出, 每一个组标点使用空格分隔. 坐标分量用逗号分隔. 按照语法, 可以使用逗号或空格(即都是可以的).

绘制指令的大小写还有特定含义, 大写表示使用绝对坐标, 小写表示相对于前一个点的相对坐标.

命令可以带有参数, 参数紧跟其后, 参数可以使用空格或逗号分隔.

绘制命令如下:

命令含义
F0使用奇/偶填充规则.
F1使用非零填充规则.
M 或 m移动到指定点.
L 或 l根据点绘制折线.
H 或 h根据给定 X 绘制水平直线. 其含义是从当前位置绘制到给定 X 的位置, Y 不变.
V 或 v根据给定的 Y 坐标绘制竖直直线. 其含义是从当前位置绘制到给定 Y 的位置, X 不变.
C 或 c绘制三次贝塞尔曲线. 该指令带有三个点坐标的参数. 两个控制点, 和一个结束端点. 绘制时从当前点开始.
S 或 s绘制光滑的贝塞尔曲线. 该命令带有两个参数: 一个控制点, 另一个是结束端点. 绘制从当前位置开始. 该命令是一个续接命令, 使用前一个的 S 的结束端点作为第一个控制点, 然后绘制三次贝塞尔曲线, 然后延续下去.
Q 或 q绘制二次贝塞尔曲线, 该命令带有两个参数, 一个控制点, 一个结束端点. 绘制从当前位置开始.
T 或 t使用一个点来绘制平滑的贝塞尔曲线. 其作用与 S 命令类似, 使用前一个点作为第一控制点, 然后延续绘制二次贝塞尔曲线.
A 或 a绘制一个椭圆弧. 该命令有五个参数, 从当前位置开始绘制.
size 表示 X, Y 轴上的弧半径 (可能是长短轴半径).
rotation_angle 表示椭圆的旋转角度.
large_angle 取值为 0 或 1, 表示圆弧的角度, 0 表示劣弧, 1 表示优弧.
sweep_direction 取值 0 或 1, 表示旋转方向, 0 表示逆时针, 1 表示顺时针.
end_point 表示圆弧结束点.
Z 或 z是否绘制成闭合曲线. 从当前位置到起点位置. 该指令不带参数.

Path 存储对象

Path 可以自己绘制图形, 也可以存放子元素表示图形. 例如

<Path Stroke=”Red” StrokeThickness=”5”>
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint=”60,20”>
            <PathFigure.Segments>
              <PathSegmentCollection>
                <PolyQuadraticBezierSegment
                                            Points=”140,150 140,50 140,00 30,100”/>
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

POLYGON

根据给出的点 (Points 属性) 绘制多边形, 最后一个点与第一个点形成闭合图形.

POLYLINE

根据给出的点 (Points 属性) 绘制折线, 不同于 Polygon 最后一个点与第一个点不会连接.

需要注意的是, 即使结束点与起点重合, Polyline 也没有办法绘制出与 Polygon 一样的多边形, 这是因为相邻折线的转角方式是不同的. 除非多绘出一部分, 将转角包含到路径中.

与 Canvas 一模一样.

RECTANGLE

绘制简单矩形, 属性用法与 Ellipse 一样, 布局取决于容器控件.

小结 (略)

Last Updated:
Contributors: jk