WPF InkCanvas 控件深入图形绘制指南

本文还有配套的精品资源，点击获取

简介： InkCanvas 是WPF中的一个控件，支持鼠标或触控设备进行绘画。本文将指导如何使用 InkCanvas 绘制直线、虚线、箭头、圆形、矩形、三角形、五边形、六边形和五角星等图形，并关注箭头和虚线的绘制技巧。重点介绍 Stroke 属性、自定义笔刷以及 StrokesCollected 事件的使用，并探讨如何通过 StylusPlugIns 扩展 InkCanvas 功能，以创建具有交互性的绘图应用程序。

1. InkCanvas 控件简介与基础使用

1.1 InkCanvas 控件概述

1.1.1 控件功能与应用场景

InkCanvas 控件是用于支持墨迹输入的 WPF 元素，广泛应用于需要电子签名、手写注释以及各种绘图应用的场景。它允许用户使用鼠标、触摸屏或压感笔进行绘制和书写，是构建交互式绘图应用的核心组件。

1.1.2 支持的绘图类型与特性

该控件支持多种绘图类型，包括但不限于手绘线条、形状、文本以及利用橡皮擦功能进行擦除。它提供了丰富的特性，如墨迹渲染效果、动态墨迹缩放、多点触控支持等。开发者可以进一步扩展 InkCanvas 的功能，以满足更高级的应用需求。

1.2 InkCanvas 的基本设置

1.2.1 环境搭建与配置

在使用 InkCanvas 之前，首先需要在 WPF 项目中添加对应的引用，并在 XAML 文件中引入命名空间。此外，还需确保系统已安装并正确配置了支持笔输入的设备。

1.2.2 控件的初始化与布局

一旦配置好环境，就可以通过设置 XAML 属性来初始化 InkCanvas ，包括其大小、边距、背景色等。随后，可以利用各种布局控件将其嵌入到应用界面中。

1.3 InkCanvas 的基本交互

1.3.1 触摸与鼠标事件处理

InkCanvas 提供了丰富的事件用于处理用户交互，例如 StylusDown 、 StylusUp 、 MouseMove 等。开发者可以通过处理这些事件来捕捉用户的笔触、手势和移动。

1.3.2 简单绘图操作的实现

借助 InkCanvas 提供的API，可以实现简单绘图操作，如线条绘制、颜色更换和笔触粗细调整。结合事件处理，可以创建一个基础的绘图应用，允许用户在控件上进行自由绘制。

<!-- 示例：XAML中的InkCanvas设置 -->
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ink="clr-namespace:System.Windows.Ink;assembly=PresentationFramework">
    <Grid>
        <ink:InkCanvas Name="inkCanvas" Background="White" />
    </Grid>
</Window>

上述代码片段展示了如何在 WPF 窗口中嵌入一个 InkCanvas ，并设置其背景颜色。这将为用户提供一个基本的绘图区域，以开始交互和绘图操作。在接下来的章节中，我们将深入探讨如何利用 InkCanvas 进行更复杂的绘制和交互。

2. 绘制直线和虚线的技巧

直线是图形绘制中最基础的元素之一，在UI交互设计中扮演着重要的角色。它不仅用于绘制基础图形，也常用于表示数据的可视化的视觉引导。本章节将深入探讨如何在InkCanvas控件中实现直线和虚线的绘制，并分享一些提高绘制效率和美观性的技巧。

2.1 直线绘制的实现

直线的绘制通常依赖于两点之间的连线，但在复杂的交互场景中，直线的绘制需要考虑更多的因素，例如线条的粗细、颜色、透明度等。我们将从基本的绘制方法开始，逐步深入到更高级的技术。

2.1.1 利用点和线段绘制直线

在InkCanvas控件中，直线绘制的基础是两点确定一条直线的原理。我们使用两个点，即起始点和结束点来确定直线的位置和方向。以下是一个基本的示例代码，展示了如何在InkCanvas上绘制直线：

// C#代码示例：在InkCanvas上绘制直线
private void DrawLine(InkCanvas canvas, Point startPoint, Point endPoint)
{
    // 创建一个InkStroke
    var inkStroke = new InkStroke(Brushes.Black, new StylusPointCollection(new StylusPoint[] {
        new StylusPoint(startPoint.X, startPoint.Y),
        new StylusPoint(endPoint.X, endPoint.Y)
    }));
    // 将新的InkStroke添加到canvas上
    canvas.Strokes.Add(inkStroke);
}

在这段代码中，我们首先创建了一个 InkStroke 对象，该对象用于表示绘制的笔触。我们传递了一个黑色画刷 Brushes.Black 和一个 StylusPointCollection ，这个集合中包含了两个 StylusPoint 对象，分别表示线条的起始点和结束点。最后，我们将这个笔触添加到了 InkCanvas 上。

2.1.2 高级直线绘制技术

直线绘制的高级技术涉及到更复杂的算法，比如动态平滑处理、压力感应实现粗细变化等。通过高级技术，我们可以实现更自然、更符合人机交互习惯的绘图体验。

// C#代码示例：动态平滑处理直线绘制
private void DrawSmoothLine(InkCanvas canvas, Point startPoint, Point endPoint, int pressure)
{
    // 基于压力计算线段粗细
    double thickness = pressure / 10.0;
    var inkStroke = new InkStroke(Brushes.Black, thickness, new StylusPointCollection(new StylusPoint[] {
        new StylusPoint(startPoint.X, startPoint.Y),
        new StylusPoint(endPoint.X, endPoint.Y)
    }));
    // 将新的InkStroke添加到canvas上
    canvas.Strokes.Add(inkStroke);
}

在这个示例中，我们通过一个额外的参数 pressure 来模拟笔的压力，根据压力值动态调整线条的粗细。这样，用户在绘图时可以根据实际的压力感来绘制出粗细不一的线条，提高了绘制的真实感。

2.2 虚线的创建与控制

虚线在图形设计中常用于区分不同的图形元素，提供视觉上的分隔。在InkCanvas中，我们可以通过自定义绘制算法来创建虚线效果。

2.2.1 虚线的算法实现

虚线的算法相对简单，主要是通过在直线绘制过程中加入空白段。在实际编码中，我们需要控制线条的绘制长度与空白段的长度，以及重复的周期。

// C#代码示例：绘制虚线
private void DrawDashedLine(InkCanvas canvas, Point startPoint, Point endPoint, double dashLength, double gapLength)
{
    // 创建一个InkStroke
    var inkStroke = new InkStroke(Brushes.Black, new StylusPointCollection());
    // 计算两点之间的距离
    double distance = Math.Sqrt(Math.Pow(endPoint.X - startPoint.X, 2) + Math.Pow(endPoint.Y - startPoint.Y, 2));
    double dashCount = distance / (dashLength + gapLength);
    for (int i = 0; i < dashCount; i++)
    {
        // 计算每个虚线段和间隔的结束点
        Point dashEndPoint = new Point(
            startPoint.X + (dashLength + gapLength) * i * (endPoint.X - startPoint.X) / distance,
            startPoint.Y + (dashLength + gapLength) * i * (endPoint.Y - startPoint.Y) / distance
        );
        // 判断是否为虚线段或空白段
        if ((i % 2) == 0)
        {
            inkStroke.StylusPoints.Add(new StylusPoint(dashEndPoint.X, dashEndPoint.Y));
        }
        else
        {
            inkStroke.StylusPoints.Add(new StylusPoint(dashEndPoint.X, dashEndPoint.Y));
        }
    }
    // 将新的InkStroke添加到canvas上
    canvas.Strokes.Add(inkStroke);
}

在这段代码中，我们首先计算了两点之间的直线距离，然后根据虚线和空白段的长度来确定虚线的段数。接着通过一个循环，计算每一段虚线的起点和终点。在循环中，我们通过一个简单的取模运算来交替添加虚线段和空白段。

2.2.2 调整虚线的属性参数

为了使虚线更具有表现力，我们需要对虚线的属性进行调整。比如调整虚线段的长度、空白段的长度、以及虚线的周期性等。

// 示例调整虚线属性参数
double dashLength = 5;   // 虚线段长度
double gapLength = 3;    // 空白段长度

在实际应用中，我们还可以根据不同的绘制场景来动态调整这些参数。例如，用户可以自定义虚线样式，以适应不同的绘图需求。

绘图技巧综合应用

综合应用上述直线和虚线的绘制技巧，可以创建出既实用又美观的图形。通过调整绘制参数和应用不同的算法，我们可以实现复杂的图形设计，满足各种专业的需求。下面是一个简单的工作流程图表，展示了直线和虚线绘制的应用过程。

graph TD;
    A[开始绘制] --> B[确定直线起始点];
    B --> C[确定直线结束点];
    C --> D[选择绘制类型];
    D --> E[绘制直线或虚线];
    E --> F[调整线型参数];
    F --> G[完成绘制];

以上就是绘制直线和虚线的技巧介绍，掌握这些基础和高级技术能够帮助我们在InkCanvas控件中创建出更加丰富多彩的图形设计。在下一章中，我们将继续探讨如何绘制具有方向性和扩展性的箭头图形。

3. 创建箭头图形的方法

3.1 箭头图形绘制基础

3.1.1 箭头的基本构成元素

箭头图形是由一系列基本几何形状组合而成的复杂图形，包括头部和尾部。箭头头部通常是三角形，用于表示方向，而箭头尾部则可以是直线、圆形或方形等。在设计箭头图形时，我们经常需要考虑以下几个构成元素：

• 箭头头部 ：定义了箭头的方向。可以有多种不同的形状，如尖锐的、圆润的或者扁平的三角形。
• 箭杆 ：连接头部和尾部的直线段，其长度、宽度和颜色都可以调整。
• 箭尾 ：在某些设计中，为了增加视觉效果，可能会在尾部添加额外的设计元素，如箭尾羽饰或特殊的形状。

要创建一个基本的箭头图形，通常需要确定头部和箭杆的位置以及箭头的指向。

3.1.2 根据方向绘制箭头

绘制箭头的第一步是确定箭头的方向。在大多数绘图环境中，可以使用鼠标或触摸设备来指定箭头的起点和终点。这些点定义了箭杆的方向和长度。在 InkCanvas 控件中，可以使用如下代码来实现绘制直线和基于直线的箭头：

private void Canvas_Draw(object sender, DrawEventArgs e)
{
    if (e.DrawingAttributes != null)
    {
        InkCanvas canvas = sender as InkCanvas;
        Point pt = e.GetPosition(canvas);
        switch (e.Action)
        {
            case DrawAction.Begin:
                line = new Line();
                canvas.Children.Add(line);
                break;
            case DrawAction.Continue:
                if (line == null)
                    break;
                line.X2 = pt.X;
                line.Y2 = pt.Y;
                break;
            case DrawAction.End:
                break;
        }
    }
}

上述代码段展示了如何使用 WPF InkCanvas 控件来绘制直线，并可以在此基础上添加箭头头部的逻辑。绘制箭头的关键在于添加额外的几何图形来构造箭头头部，这将在接下来的章节中详细讨论。

3.2 箭头图形的高级应用

3.2.1 自定义箭头样式

自定义箭头样式可以提升图形的表达能力和美观度。在 InkCanvas 中，可以通过调整笔刷 Brush 属性来自定义箭头的颜色、渐变或图案。此外，也可以改变箭头的线型 LineStyle 和线帽 LineCap 属性来创建不同风格的箭头。以下代码段演示了如何设置笔刷、线型和线帽：

private void CustomizeArrowStyle(Line arrowLine)
{
    // 设置笔刷
    var brush = new SolidColorBrush(Colors.Red);
    arrowLine.Stroke = brush;
    arrowLine.StrokeThickness = 3;

    // 设置线型为虚线
    var pen = new Pen(brush, 3);
    pen.DashStyle = new DashStyle(new double[] { 3, 3 }, 0);
    arrowLine.StrokeDashArray = pen.DashPattern;

    // 设置箭头线帽
    arrowLine.StrokeStartLineCap = PenLineCap.Triangle;
    arrowLine.StrokeEndLineCap = PenLineCap.Arrow;
}

3.2.2 箭头与线条的关联绘制

在实际应用中，箭头往往与线条一起使用来表达流程或逻辑关系。因此，需要考虑箭头与线条的视觉一致性。可以使用墨迹插件 InkPresenter 和墨迹笔势 InkAnalyzer 来检测线条，并在适当的位置添加箭头头部。以下是一个简单的示例：

private void AddArrowheads(InkPresenter inkPresenter)
{
    foreach (Stroke stroke in inkPresenter.Strokes)
    {
        // 这里可以加入检测线条终点和方向的逻辑，并添加箭头头部
        // 代码省略...
    }
}

通过以上内容，您已经了解了如何使用 InkCanvas 控件创建基本的箭头图形，并对其进行自定义和关联绘制。在接下来的章节中，我们将进一步探讨其他图形的绘制技巧，如圆形、矩形和多边形等。

4. 圆形和矩形的绘制步骤

4.1 圆形的绘制技巧

4.1.1 利用弧线创建圆形

绘制圆形最直观的方法是使用弧线。在XAML中，可以使用 Path 元素来绘制弧线，因为 Path 元素支持 Geometry 属性，我们可以利用 EllipseGeometry 或者 ArcSegment 来定义一个圆形。在代码中， Geometry 类提供了 CreateFromArc 方法，它可以根据中心点、半径、起始角度和结束角度创建一个弧线。

<Path Stroke="Black" StrokeThickness="2" Fill="Transparent">
  <Path.Data>
    <EllipseGeometry RadiusX="100" RadiusY="100" Center="200,150"/>
  </Path.Data>
</Path>

以上XAML代码创建了一个位于(200,150)、半径为100的圆形。 RadiusX 和 RadiusY 代表水平和垂直半径，而 Center 属性指定了圆心的位置。

4.1.2 圆形绘制的优化方法

绘制圆形时，性能优化通常涉及减少重绘次数和使用合适的渲染技术。例如，可以利用 CompositionTarget.Rendering 事件来在屏幕上进行平滑的动画而不直接修改图形对象的属性。这样可以减少UI线程的负担，提升渲染性能。

private void OnRendering(object sender, EventArgs e)
{
    // 在这里更新你的圆的属性，例如位置或旋转角度
    circle.RenderTransform = new RotateTransform { Angle = angle++ };
}

在代码中， circle 是一个圆形对象的引用，我们使用 RotateTransform 来实现圆的旋转动画。通过监听 CompositionTarget.Rendering 事件，可以保证每一帧都会调用这个方法，从而实现平滑的动画效果。

4.2 矩形的绘制流程

4.2.1 矩形绘制的几种方法

绘制矩形主要有两种方法，一种是使用 Rectangle 控件，另一种是使用 Path 元素配合矩形 Geometry 。使用 Rectangle 是最简单的，它可以直接设置 Width 和 Height 属性来定义大小，而使用 Path 则可以提供更多的控制，如圆角矩形。

<Rectangle Width="200" Height="100" Fill="LightBlue" />

使用 Path 元素绘制矩形的方式如下所示：

<Path Stroke="Black" StrokeThickness="2" Fill="LightBlue">
  <Path.Data>
    <RectangleGeometry Rect="100,50 200,100" />
  </Path.Data>
</Path>

在这个例子中， RectangleGeometry 的 Rect 属性定义了矩形的位置和大小，格式为"x y width height"。

4.2.2 矩形属性的应用

矩形属性包括填充色（ Fill ）、边框颜色（ Stroke ）和边框厚度（ StrokeThickness ）等，这些属性允许开发者定义矩形的外观。对于更复杂的形状，可以通过调整 Path 数据来实现，如添加内圆角和外圆角。

<Path Stroke="Black" StrokeThickness="2" Fill="LightBlue">
  <Path.Data>
    <CombinedGeometry GeometryCombineMode="Union">
      <CombinedGeometry.Geometry1>
        <RectangleGeometry Rect="100,50 200,100" />
      </CombinedGeometry.Geometry1>
      <CombinedGeometry.Geometry2>
        <EllipseGeometry RadiusX="10" RadiusY="10" Center="100,75"/>
      </CombinedGeometry.Geometry2>
    </CombinedGeometry>
  </Path.Data>
</Path>

在这个 CombinedGeometry 的实例中，我们通过组合矩形和圆形来创建一个带有圆角的矩形。 GeometryCombineMode 属性设置为 Union 表示将两个形状合并在一起。

通过本章节的介绍，我们可以看到，无论是圆形还是矩形，都有多种绘制方法和优化技巧，这为我们在应用中创建出符合视觉需求和性能要求的图形提供了丰富的选择。

5. 多边形（三角形、五边形、六边形）绘制技术

5.1 三角形的绘制

5.1.1 不同类型三角形的绘制方法

三角形是构成更复杂多边形的基础元素，在图形界面上常常用于表示方向、关系等。三角形的绘制依据顶点连接方式的不同，可分为等边三角形、等腰三角形、直角三角形等。

对于简单的三角形绘制，我们通常会使用线段绘制方法。在WPF的InkCanvas控件中，可以利用 Stroke 来绘制线段，通过 StartPoint 和 EndPoint 属性来定义线段的起始和结束坐标。

// 定义三个顶点坐标
Point p1 = new Point(100, 100);
Point p2 = new Point(150, 100);
Point p3 = new Point(125, 150);

// 创建Stroke对象
Stroke stroke1 = new Stroke(new Pen(Brushes.Black, 5));
stroke1.StartPoint = p1;
stroke1.EndPoint = p2;

Stroke stroke2 = new Stroke(new Pen(Brushes.Black, 5));
stroke2.StartPoint = p2;
stroke2.EndPoint = p3;

Stroke stroke3 = new Stroke(new Pen(Brushes.Black, 5));
stroke3.StartPoint = p3;
stroke3.EndPoint = p1;

// 将Stroke添加到InkCanvas上
inkCanvas.Strokes.Add(stroke1);
inkCanvas.Strokes.Add(stroke2);
inkCanvas.Strokes.Add(stroke3);

在上述代码中，我们首先定义了三个点，然后创建了三条线段，并设置了它们的起点和终点，最后将这些线段添加到InkCanvas控件中。这样就完成了一个简单的等边三角形的绘制。

5.1.2 三角形应用实例

在现实应用中，绘制三角形不仅仅停留在基础层面，我们还可以利用三角形的数学属性来实现更高级的功能。

例如，我们可以在应用程序中使用三角形来实现一个简单的3D旋转效果。可以利用三角函数来计算出各个顶点在空间中的位置变化，从而产生旋转动画。

// 三角形旋转示例
Point[] points = { p1, p2, p3 };
double angle = 0; // 旋转角度

// 创建一个故事板来控制旋转动画
Storyboard storyboard = new Storyboard();
DoubleAnimation rotateAnimation = new DoubleAnimation();
rotateAnimation.By = 360; // 旋转360度
rotateAnimation.Duration = TimeSpan.FromSeconds(2); // 持续时间
rotateAnimation.RepeatBehavior = RepeatBehavior.Forever; // 循环播放

// 设置旋转中心点
RotateTransform rotateTransform = new RotateTransform();
rotateTransform.CenterX = inkCanvas.Width / 2;
rotateTransform.CenterY = inkCanvas.Height / 2;
Storyboard.SetTarget(rotateAnimation, rotateTransform);
Storyboard.SetTargetProperty(rotateAnimation, "(RotateTransform.Angle)");

storyboard.Children.Add(rotateAnimation);
storyboard.Begin();

在此代码段中，我们通过创建一个故事板和动画对象，并将其应用到 RotateTransform 上，来实现三角形在InkCanvas上的无限旋转。通过调整动画的参数，我们可以控制旋转的速度和方式。

5.2 复杂多边形的绘制

5.2.1 五边形与六边形的绘制技巧

绘制五边形和六边形相较于三角形而言，增加了更多的顶点和线段。在手动绘制这些多边形时，我们通常需要精确计算每个顶点的位置，确保多边形的形状和大小正确无误。

为了简化五边形和六边形的绘制流程，我们可以通过循环来生成顶点的坐标。例如，一个正五边形可以通过在圆周上均匀分布五个顶点来生成。

// 生成正五边形顶点坐标
int sides = 5;
double radius = 100;
Point[] pentagonPoints = new Point[sides];
double angleIncrement = 360 / sides;

for (int i = 0; i < sides; i++)
{
    double angle = angleIncrement * i;
    double radians = Math.PI * angle / 180;
    pentagonPoints[i] = new Point(inkCanvas.Width / 2 + radius * Math.Cos(radians), inkCanvas.Height / 2 + radius * Math.Sin(radians));
}

// 使用顶点坐标绘制五边形
for (int i = 0; i < sides; i++)
{
    int next = (i + 1) % sides;
    Stroke stroke = new Stroke(new Pen(Brushes.Black, 5));
    stroke.StartPoint = pentagonPoints[i];
    stroke.EndPoint = pentagonPoints[next];
    inkCanvas.Strokes.Add(stroke);
}

对于六边形，与五边形类似，我们只需更改边数为6，然后在相同的逻辑中生成六个顶点。

5.2.2 多边形填充与样式设置

多边形的绘制并不仅仅局限于轮廓线条的绘制。在实际应用中，往往还需要对多边形进行填充和样式设置，以增加视觉效果和功能性。

例如，为多边形添加渐变色填充，或者应用不同的画刷（如线性画刷、径向画刷等）来增强视觉效果。同时，我们还可以设置多边形边框的厚度、颜色和样式。

// 设置多边形填充和边框样式
SolidColorBrush brush = new SolidColorBrush(Colors.Blue);
brush.Opacity = 0.5;

for (int i = 0; i < pentagonPoints.Length; i++)
{
    int next = (i + 1) % pentagonPoints.Length;
    PathFigure figure = new PathFigure();
    figure.StartPoint = pentagonPoints[i];
    figure.Segments.Add(new LineSegment(pentagonPoints[next], true));
    PathGeometry geometry = new PathGeometry();
    geometry.Figures.Add(figure);
    GeometryDrawing drawing = new GeometryDrawing(brush, new Pen(Brushes.Black, 5), geometry);
    inkCanvas.Children.Add(new DrawingImage(drawing));
}

在本段代码中，我们使用 PathFigure 和 PathGeometry 对象来定义多边形的形状，然后使用 GeometryDrawing 对象来设置多边形的填充样式和边框样式，并将其添加到InkCanvas控件中。

通过这种方式，我们可以将一个多边形图形转换为更加丰富和动态的视觉元素，从而更好地满足用户界面设计的需求。

6. 五角星复杂图形的绘制方法

6.1 五角星的基本构成

6.1.1 利用向量数学绘制五角星

五角星是一种较为复杂的几何图形，可以通过向量数学来精确地绘制。五角星由10条线段构成，其中5条线段构成一个正五边形的外轮廓，另外5条线段连接相邻顶点，形成五角星的尖角部分。为了在 InkCanvas 控件上绘制五角星，首先需要计算出五角星顶点的位置。

// 计算五角星的一个顶点坐标
public Point CalculateStarPoint(Point center, double radius, double angle)
{
    // 将角度转换为弧度
    double radian = angle * (Math.PI / 180);
    // 计算五角星顶点的坐标
    return new Point(
        center.X + radius * Math.Cos(radian),
        center.Y + radius * Math.Sin(radian)
    );
}

上述代码块中展示了如何根据中心点、半径以及角度计算五角星的顶点位置。这里的角度是相对于正五边形的每个内角而言的，五角星的顶点位于相邻正五边形顶点之间的等分点。通过调整半径和角度，可以计算出所有需要的顶点坐标。

6.1.2 精确位置计算与绘制

一旦所有的顶点坐标计算完毕，接下来的步骤就是将这些点连接起来绘制五角星。这一步需要精确控制绘制的顺序，以确保五角星的尖角和凹陷部分正确无误。

// 绘制五角星的方法
private void DrawStar(InkCanvas inkCanvas, Point center, double radius, int thickness)
{
    // 五个凸点坐标
    Point[] convexPoints = new Point[5];
    // 五个凹点坐标
    Point[] concavePoints = new Point[5];
    // 计算凸点坐标
    for (int i = 0; i < 5; i++)
    {
        convexPoints[i] = CalculateStarPoint(center, radius, 36 + 72 * i);
        concavePoints[i] = CalculateStarPoint(center, radius / 2, 72 + 72 * i);
    }

    // 创建五角星的笔刷，定义边框颜色和粗细
    Pen starPen = new Pen(Brushes.Black, thickness);

    // 使用 BeginFigure 方法开始绘制
    inkCanvas.Strokes.Add(new Stroke(starPen, convexPoints[0]));
    inkCanvas.Strokes.Add(new Stroke(starPen, concavePoints[0]));
    // 以顺时针或逆时针方向连接剩余的点
    for (int i = 1; i < 5; i++)
    {
        inkCanvas.Strokes.Add(new Stroke(starPen, concavePoints[i]));
        inkCanvas.Strokes.Add(new Stroke(starPen, convexPoints[i]));
    }
    // 闭合路径回到起点
    inkCanvas.Strokes.Add(new Stroke(starPen, convexPoints[0]));
}

// 调用绘制五角星的方法
Point center = new Point(200, 200); // 五角星中心点坐标
double radius = 100;               // 五角星外圈半径
int thickness = 5;                 // 线条粗细
DrawStar(inkCanvas, center, radius, thickness);

在这个代码块中，首先计算凸点和凹点的坐标，然后使用 InkCanvas 的 Stroke 集合来绘制五角星。通过调整 center 、 radius 和 thickness 参数，可以控制五角星的位置、大小和线条粗细。

6.2 五角星绘制的进阶技巧

6.2.1 旋转与缩放技术

五角星绘制完成后，我们可能需要对其进行旋转、缩放等操作，以适应不同的显示效果和应用场景。这些操作可以通过变换矩阵来实现。在 InkCanvas 控件中，可以使用变换属性 RenderTransform 来应用旋转和缩放变换。

// 旋转和缩放五角星
private void TransformStar(StrokeCollection strokes, double angle, double scaleX, double scaleY)
{
    // 创建旋转变换和缩放变换
    RotateTransform rotate = new RotateTransform(angle);
    ScaleTransform scale = new ScaleTransform(scaleX, scaleY);

    // 创建变换组并添加旋转变换和缩放变换
    TransformGroup transformGroup = new TransformGroup();
    transformGroup.Children.Add(rotate);
    transformGroup.Children.Add(scale);

    // 应用变换组到五角星
    foreach (var stroke in strokes)
    {
        stroke.RenderTransform = transformGroup;
    }
}

// 调用变换方法
TransformStar(inkCanvas.Strokes, 45, 1.5, 1.5);

这里， TransformStar 函数接收五角星的 Stroke 集合、旋转角度和缩放比例作为参数，然后创建相应的变换，并将它们应用到 Stroke 集合上。通过这种方式，我们可以轻松地调整五角星的位置和大小。

6.2.2 动态绘制与动画效果

为了增强用户体验，动态绘制五角星和应用动画效果是一种有效的技术手段。在 InkCanvas 控件中，可以利用 WPF 的动画框架来实现平滑的动态绘制效果。

// 创建旋转动画
private void AnimateStar(StrokeCollection strokes, double duration)
{
    DoubleAnimation rotationAnimation = new DoubleAnimation
    {
        To = 360,
        Duration = TimeSpan.FromSeconds(duration),
        RepeatBehavior = RepeatBehavior.Forever
    };

    // 应用动画到五角星的变换组
    foreach (var stroke in strokes)
    {
        if (stroke.RenderTransform is TransformGroup transformGroup)
        {
            transformGroup.Children[0] = new RotateTransform(); // 替换旋转变换
            Storyboard.SetTargetProperty(rotationAnimation, new PropertyPath("RenderTransform.(TransformGroup)[0].Angle"));
            Storyboard.SetTarget(rotationAnimation, transformGroup.Children[0]);
            new Storyboard().Children.Add(rotationAnimation);
            new Storyboard().Begin();
        }
    }
}

// 调用动画函数
AnimateStar(inkCanvas.Strokes, 4); // 4秒内完成360度旋转

此代码段创建了一个无限重复的旋转动画，它会持续旋转五角星。动画的目标属性设置为变换组中第一个变换的 Angle 属性。通过调整 duration 参数，我们可以控制旋转动画的快慢。

7. Stroke 属性和 StrokeCollected 事件的应用

在本章节中，我们将深入了解 InkCanvas 控件中的 Stroke 属性以及 StrokeCollected 事件的高级用法和优化技巧。这些内容对于增强 InkCanvas 的交互性和用户体验至关重要。

7.1 Stroke 属性深入解析

7.1.1 Stroke 属性的基本使用

Stroke 属性用于表示用户通过 InkCanvas 控件绘制的笔画信息，包括笔画的颜色、宽度、样式等。通过设置 Stroke 属性，开发者能够控制绘制的外观和感觉。基本使用涉及设置笔画的属性，如下示例代码：

InkCanvas.Strokes.Add(new Stroke(new StrokeContainer(), new Point(10, 10)));
// 上述代码创建了一个新的笔画，并添加到 InkCanvas 中。

7.1.2 Stroke 属性的高级调整与优化

为了优化用户体验和笔画的渲染效果，开发者需要更深入地了解 Stroke 属性的高级调整。例如，可以创建自定义笔画样式，改变笔画的渲染模式等。

// 自定义笔画颜色和宽度
var customStroke = new Stroke(new StrokeContainer());
customStroke.DrawingAttributes.Color = Colors.Red;
customStroke.DrawingAttributes.Width = 3; // 宽度单位为像素
InkCanvas.Strokes.Add(customStroke);

7.2 StrokeCollected 事件的处理

7.2.1 事件的触发机制与应用场景

StrokeCollected 事件在 InkCanvas 中收集了所有相关的笔画后触发。此事件是 InkCanvas 中非常重要的一个事件，它可以在用户完成一系列笔画后触发，进行进一步的处理，如数据存储、分析或界面更新。

private void InkCanvas_StrokeCollected(object sender, InkCanvasStrokeCollectedEventArgs e)
{
    // 处理收集到的笔画数据
    var stroke = e.Stroke;
    // 这里可以添加代码对stroke进行操作
}

7.2.2 事件的处理方法与最佳实践

在处理 StrokeCollected 事件时，最佳实践是尽量减少事件处理函数中的计算量和资源消耗。例如，可以将数据处理工作放在后台线程中进行，以避免阻塞UI线程导致应用无响应。

private void InkCanvas_StrokeCollected(object sender, InkCanvasStrokeCollectedEventArgs e)
{
    // 将数据处理的工作委托给后台线程
    Task.Run(() => 
    {
        // 对笔画数据进行处理
        var processedData = ProcessStrokeData(e.Stroke);
        // 更新UI（UI操作需要回到主线程）
        Dispatcher.Invoke(() => 
        {
            UpdateUIWithProcessedData(processedData);
        });
    });
}

private StrokeData ProcessStrokeData(Stroke stroke)
{
    // 处理笔画数据的逻辑
    return new StrokeData();
}

private void UpdateUIWithProcessedData(StrokeData data)
{
    // 更新UI元素的逻辑
}

在上述代码中，我们演示了如何将数据处理与UI更新的操作分离，以保证应用的响应性和流畅性。

总结

通过本章内容，我们了解了 Stroke 属性的基本和高级应用，以及如何高效地处理 StrokeCollected 事件。这些技术的掌握将帮助我们创建更加丰富和动态的交互式应用。需要注意的是，每个章节的最后一行不应包含总结性内容，以保持章节的开放性和连续性。在下一章节中，我们将继续探索 InkCanvas 的高级功能和扩展性。

本文还有配套的精品资源，点击获取

简介： InkCanvas 是WPF中的一个控件，支持鼠标或触控设备进行绘画。本文将指导如何使用 InkCanvas 绘制直线、虚线、箭头、圆形、矩形、三角形、五边形、六边形和五角星等图形，并关注箭头和虚线的绘制技巧。重点介绍 Stroke 属性、自定义笔刷以及 StrokesCollected 事件的使用，并探讨如何通过 StylusPlugIns 扩展 InkCanvas 功能，以创建具有交互性的绘图应用程序。

本文还有配套的精品资源，点击获取