WPF绘图技术介绍

作者:令狐掌门
技术交流QQ群:675120140
csdn博客:https://mingshiqiang.blog.csdn.net/


文章目录

  • WPF绘图基本用法
  • 绘制直线
      • 在XAML中绘制直线
      • 在C#代码中绘制直线
      • 使用Path绘制直线
      • 注意
  • 矩形绘制
      • 在XAML中绘制矩形
      • 在C#代码中绘制矩形
      • 设置矩形的位置
      • 使用圆角矩形
  • 画刷
      • 1. SolidColorBrush
      • 2. LinearGradientBrush
      • 3. RadialGradientBrush
      • 4. ImageBrush
      • 5. DrawingBrush
      • 6. VisualBrush
      • 7. TileBrush
  • 椭圆绘制
  • 路径绘制
      • 基本的路径命令
      • 绘制路径的例子
      • 路径的简化表示 - Mini-Language
      • 在C#代码中创建路径
  • LineSegment直线段
  • ArcSegment 圆弧
  • BezierSegment 三次方贝塞尔曲线段
  • QuadraticBezierSegment 二次方贝塞尔曲线段
  • Poly LineSegment 多直线段
  • PolyBezierSegment 多三次方贝塞尔曲线段
  • PoiyQuadraticBezierSegment 多二次方贝塞尔曲线
  • 路径标记语法


在 WPF (Windows Presentation Foundation) 中,绘图是一项重要的功能,允许开发者创建矢量图形、位图图形和动画。WPF 提供了一系列强大的绘图技术,主要分为以下几类:

  1. 形状(Shapes)
    WPF 提供了一组基本形状类,如 Rectangle、Ellipse、Line、Polygon 和 Path,它们都继承自 Shape 类。这些形状可以直接在 XAML 中声明,也可以在代码中动态创建。

  2. 几何图形(Geometries)
    Geometry 类是所有几何图形的基类。它包括 PathGeometry、EllipseGeometry、RectangleGeometry 和 CombinedGeometry 等。Geometry 可以用于定义形状的轮廓,也可以用于剪切(Clipping)和命中测试(Hit Testing)。

  3. 笔刷(Brushes)
    WPF 中的 Brush 类用于定义如何填充形状。它有几个子类,如 SolidColorBrush、LinearGradientBrush、RadialGradientBrush、ImageBrush 和 DrawingBrush。这些笔刷可以用来填充形状,也可以应用于控件的背景等。

  4. 绘画(Drawing)
    Drawing 对象表示可以绘制的一个持久性图形内容。它比 Shape 对象轻量,适用于性能至关重要的场合。Drawing 类有几个子类,如 GeometryDrawing、ImageDrawing 和 GlyphRunDrawing。

  5. 可视化对象(Visuals)
    Visual 对象是 WPF 中所有图形内容的基础。DrawingVisual 是一种轻量级的可视对象,用于渲染自定义图形。它比 Shape 更轻量,适用于复杂场景或需要大量图形对象的时候。

  6. 位图效果(Bitmap Effects)
    虽然 WPF 4.0 之后就不推荐使用旧的位图效果了,取而代之的是 Effect 类,如 DropShadowEffect 和 BlurEffect。这些效果可以应用于任何 UIElement,以产生阴影或模糊等视觉效果。

  7. 转换(Transforms)
    转换可以应用于任何 UIElement 或 Drawing 对象,用以改变对象的大小、位置或旋转。包括 TranslateTransform、RotateTransform、ScaleTransform、SkewTransform 和 MatrixTransform。

  8. 动画(Animations)
    WPF 的动画系统允许你对几乎所有属性进行动画处理。你可以使用不同类型的动画(如 DoubleAnimation、ColorAnimation 等)来创建平滑的过渡和复杂的动画序列。

WPF绘图基本用法

WPF提供了基本的绘图图元,例如直线,矩形,椭圆等,除了在窗口画布绘图,也可以在控件上绘图,例如在按钮上绘制“X”表示关闭按钮,也可以绘制渐变色,如下图所示:
在这里插入图片描述

xaml代码

<Window x:Class="DrawLine.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:DrawLine"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><LineX1="50" Y1="50"X2="200" Y2="200"Stroke="Black"StrokeThickness="4" /><LineX1="50" Y1="200"X2="200" Y2="50"Stroke="Black"StrokeThickness="4"StrokeDashArray="4 2"/><Path StrokeThickness="10"><Path.Data><LineGeometry StartPoint="210,100" EndPoint="400,100" /></Path.Data><Path.Stroke><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Color="Red" Offset="0.0" /><GradientStop Color="Orange" Offset="0.25" /><GradientStop Color="Yellow" Offset="0.5" /><GradientStop Color="Green" Offset="0.75" /><GradientStop Color="Blue" Offset="1.0" /></LinearGradientBrush></Path.Stroke></Path><Canvas><Button Width="100" Height="100" Canvas.Left="220" Canvas.Top="220"><Grid><LineX1="0" Y1="0"X2="100" Y2="100"Stroke="Black"StrokeThickness="2" /><LineX1="100" Y1="0"X2="0" Y2="100"Stroke="Black"StrokeThickness="2" /></Grid></Button></Canvas></Grid>
</Window>

绘制直线

在WPF中,直线的绘制非常直观,可以通过XAML或代码来完成。下面将分别介绍如何在XAML和C#代码中绘制直线。

在XAML中绘制直线

在XAML中,你可以使用<Line>元素来绘制一条直线。Line对象有几个重要的属性可以设置,包括X1Y1X2Y2(定义直线的起点和终点)、Stroke(定义线条颜色)和StrokeThickness(定义线条宽度)。

下面是一个绘制直线的基本示例:

<Canvas><Line X1="10" Y1="20" X2="100" Y2="100" Stroke="Black" StrokeThickness="2" />
</Canvas>

这段代码在一个Canvas容器中绘制了一条从坐标(10,20)到(100,100)的黑色直线,线条宽度为2。

在C#代码中绘制直线

如果你想在C#代码后台动态绘制直线,可以创建一个Line对象,设置其属性,然后将其添加到容器中。

下面是如何用C#代码创建和添加直线的示例:

// 创建一个新的Line对象
Line line = new Line();// 设置直线的起点和终点坐标
line.X1 = 10;
line.Y1 = 20;
line.X2 = 100;
line.Y2 = 100;// 设置线条的颜色和宽度
line.Stroke = System.Windows.Media.Brushes.Black;
line.StrokeThickness = 2;// 将直线添加到Canvas容器中
myCanvas.Children.Add(line);

在这个例子中,myCanvas是XAML定义中的一个Canvas元素的名称,在代码中需要有一个对应的Canvas实例。

使用Path绘制直线

除了Line元素外,你还可以用PathLineGeometry来绘制直线,这在需要绘制多条线或者复杂图形时特别有用。

<Path Stroke="Black" StrokeThickness="2"><Path.Data><LineGeometry StartPoint="10,20" EndPoint="100,100" /></Path.Data>
</Path>

这段代码使用Path元素绘制了和前面例子相同的直线。

注意

  • 当你将直线添加到Canvas中时,Canvas允许你指定直线的绝对位置。而如果你把直线添加到Grid或其他容器中时,直线的位置将由容器的布局特性来决定。
  • 直线的坐标指的是相对于其父容器的位置。例如,在Canvas中,X1Y1定义了直线起点相对于Canvas左上角的位置。

通过上面的方法,你可以轻松地在WPF应用程序中绘制直线。

矩形绘制

在WPF中,矩形的绘制同样可以在XAML中进行,或者在C#代码后台动态创建。矩形由Rectangle类表示,它提供了一些属性来定义其外观和行为。

在XAML中绘制矩形

使用XAML绘制矩形非常直接。你可以设置WidthHeight属性来定义矩形的尺寸,使用Stroke属性来定义边框的颜色,以及使用StrokeThickness属性来定义边框的宽度。如果你想填充矩形,可以使用Fill属性。

下面是一个简单的XAML示例,展示了如何绘制一个矩形:

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="2" Fill="SkyBlue" />

这段XAML代码将创建一个宽度为200、高度为100的矩形,拥有黑色边框和天蓝色填充。

在C#代码中绘制矩形

要在C#代码中创建并添加矩形,你需要创建一个Rectangle对象,设置其属性,然后将其添加到父容器中,如CanvasGrid

以下是如何在C#中动态创建矩形的示例:

// 创建一个新的Rectangle对象
Rectangle rect = new Rectangle();// 设置矩形的宽度和高度
rect.Width = 200;
rect.Height = 100;// 设置边框颜色和宽度
rect.Stroke = Brushes.Black;
rect.StrokeThickness = 2;// 设置填充颜色
rect.Fill = Brushes.SkyBlue;// 将矩形添加到某个容器中,例如名为myCanvas的Canvas中
myCanvas.Children.Add(rect);

在这个例子中,你需要有一个名为myCanvasCanvas实例已经在XAML中定义好。

设置矩形的位置

Canvas中,你还可以使用Canvas.LeftCanvas.Top附加属性来指定矩形的位置:

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="2" Fill="SkyBlue"Canvas.Left="50" Canvas.Top="50" />

或者在C#代码中:

Canvas.SetLeft(rect, 50);
Canvas.SetTop(rect, 50);

这会将矩形定位在距离Canvas左上角50像素的位置。

使用圆角矩形

如果你希望矩形有圆角,可以设置RadiusXRadiusY属性:

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="2"RadiusX="10" RadiusY="10" Fill="SkyBlue" />

这行代码会创建一个圆角矩形,每个角的横向和纵向半径都是10。

使用WPF绘制矩形就是这样简单。你可以通过组合不同的属性和变换,创造出各种复杂且有吸引力的界面元素。

画刷

在WPF中,Brush类是用来填充图形对象(如矩形、椭圆、路径等)的抽象基类,提供了多种派生类型的画刷,用以创建不同的填充效果。以下是一些常用的Brush派生类:

1. SolidColorBrush

这是最简单的画刷,提供了一种纯色填充。它只包含一个颜色。

<Rectangle Width="100" Height="100"><Rectangle.Fill><SolidColorBrush Color="Blue"/></Rectangle.Fill>
</Rectangle>

2. LinearGradientBrush

线性渐变画刷可以在两个或多个颜色之间创建一个线性渐变效果。

<Rectangle Width="100" Height="100"><Rectangle.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><GradientStop Color="Yellow" Offset="0.0" /><GradientStop Color="Red" Offset="0.25"/><GradientStop Color="Blue" Offset="0.75"/><GradientStop Color="LimeGreen" Offset="1.0"/></LinearGradientBrush></Rectangle.Fill>
</Rectangle>

3. RadialGradientBrush

径向渐变画刷以圆形方式从一个点向外扩散颜色。

<Rectangle Width="100" Height="100"><Rectangle.Fill><RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5"><GradientStop Color="White" Offset="0" /><GradientStop Color="Blue" Offset="1" /></RadialGradientBrush></Rectangle.Fill>
</Rectangle>

4. ImageBrush

图像画刷使用一个图像作为填充。这可以是任何类型的图像文件,比如PNG、JPG等。

<Rectangle Width="100" Height="100"><Rectangle.Fill><ImageBrush ImageSource="image.jpg"/></Rectangle.Fill>
</Rectangle>

5. DrawingBrush

绘图画刷可以使用Drawing对象作为其内容。这允许你创建更复杂的图像作为填充,例如使用几何图形或者文字。

<Rectangle Width="100" Height="100"><Rectangle.Fill><DrawingBrush><DrawingBrush.Drawing><GeometryDrawing><GeometryDrawing.Geometry><GeometryGroup><EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/><RectangleGeometry Rect="0,0,100,100"/></GeometryGroup></GeometryDrawing.Geometry><GeometryDrawing.Brush><LinearGradientBrush><GradientStop Color="Yellow" Offset="0"/><GradientStop Color="Red" Offset="1"/></LinearGradientBrush></GeometryDrawing.Brush></GeometryDrawing></DrawingBrush.Drawing></DrawingBrush></Rectangle.Fill>
</Rectangle>

6. VisualBrush

视觉画刷允许你将一个WPF视觉对象(如控件或整个Window)作为纹理画刷使用。

<Rectangle Width="100" Height="100"><Rectangle.Fill><VisualBrush><VisualBrush.Visual><Button Content="Button"/></VisualBrush.Visual></VisualBrush></Rectangle.Fill>
</Rectangle>

7. TileBrush

瓷砖画刷是一个抽象类,ImageBrushDrawingBrushVisualBrush都继承自它。它提供了用于定义如何平铺画刷内容的属性,例如TileModeViewportViewportUnits

通过组合使用这些画刷,你可以创建各种视觉效果来填充WPF中的矩形和其他形状。

椭圆绘制

在WPF中,椭圆是通过Ellipse元素来创建的。与矩形类似,椭圆可以使用多种不同的画刷进行填充和描边。

以下是一个基本的XAML例子,演示了如何在WPF中绘制一个简单的椭圆:

<Ellipse Width="150" Height="100" Fill="SkyBlue" Stroke="Black" StrokeThickness="2" />

在这个例子中,Ellipse元素有以下属性:

  • WidthHeight:分别设置椭圆的宽度和高度。
  • Fill:设置椭圆的内部填充颜色,这里使用名为SkyBlue的预定义颜色。
  • Stroke:设置椭圆边框的颜色,这里使用黑色。
  • StrokeThickness:设置椭圆边框的厚度。

就像矩形一样,椭圆也可以使用各种类型的画刷进行填充和描边,包括SolidColorBrushLinearGradientBrushRadialGradientBrushImageBrush等。

例如,使用LinearGradientBrush填充椭圆的例子:

<Ellipse Width="150" Height="100"><Ellipse.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><GradientStop Color="Yellow" Offset="0.0" /><GradientStop Color="Red" Offset="1.0"/></LinearGradientBrush></Ellipse.Fill><Ellipse.Stroke><SolidColorBrush Color="Black" /></Ellipse.Stroke><Ellipse.StrokeThickness>2</Ellipse.StrokeThickness>
</Ellipse>

在这个例子中,椭圆从左上角(0,0)到右下角(1,1)使用了一个从黄色到红色的线性渐变填充,并且有一个黑色的描边边框。

你也可以在C#代码后台动态创建和设置椭圆的属性:

Ellipse myEllipse = new Ellipse();
myEllipse.Width = 150;
myEllipse.Height = 100;
myEllipse.Fill = new SolidColorBrush(Colors.SkyBlue);
myEllipse.Stroke = new SolidColorBrush(Colors.Black);
myEllipse.StrokeThickness = 2;// 然后将椭圆添加到界面上的容器中,例如一个Grid
myGrid.Children.Add(myEllipse);

以上就是在WPF中创建和定制椭圆的基本方法。

路径绘制

在WPF中,路径(Path)是一个非常强大的元素,它能够绘制几乎任何形状。Path使用PathGeometry或者更简单的Geometry字符串来定义形状。在WPF中,绘制路径的关键是理解“移动”(M)、“线”(L)、“曲线”(CQSA)以及“闭合”(Z)等命令。

基本的路径命令

  • M(Move): 移动到一个新的起点。
  • L(Line): 从当前点画一条直线到指定的点。
  • HV(Horizontal and Vertical Line): 分别画水平和垂直线。
  • C(Cubic Bezier Curve): 使用三个点(两个控制点和一个终点)来定义一个贝塞尔曲线。
  • Q(Quadratic Bezier Curve): 使用两个点(一个控制点和一个终点)来定义一个贝塞尔曲线。
  • S(Smooth Cubic Bezier Curve): 继续之前的贝塞尔曲线,只需要指定一个新的终点和一个控制点。
  • A(Arc): 创建一个弧线。
  • Z(Close): 关闭当前路径,返回到起点。

绘制路径的例子

下面是一个使用Path元素绘制复杂图形的例子:

<Path Stroke="Black" Fill="Yellow" StrokeThickness="1"><Path.Data><PathGeometry><PathFigure StartPoint="10,50"><LineSegment Point="100,50" /><ArcSegment Point="100,100" Size="50,50" RotationAngle="0" IsLargeArc="False" SweepDirection="Clockwise" /><LineSegment Point="10,100" /><BezierSegment Point1="40,75" Point2="70,125" Point3="10,150" /><PolyLineSegment Points="50,150 100,150 100,200" /><QuadraticBezierSegment Point1="80,180" Point2="60,200" /></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,Path绘制了一个包含直线、弧线、贝塞尔曲线和折线段的复杂形状。

路径的简化表示 - Mini-Language

WPF也提供了一个“迷你语言”来简化路径的定义。与上面的PathGeometry相比,使用这种方式可以更简洁地定义路径:

<Path Stroke="Black" Fill="Yellow" StrokeThickness="1"Data="M 10,50 L 100,50 A 50,50 0 0 1 100,100 L 10,100 C 40,75 70,125 10,150 L 50,150 100,150 L 100,200 Q 80,180 60,200 Z" />

在这个Data属性中,我们使用了单个字母作为命令,后跟所需的点,以空格或逗号分隔。这种格式简洁且易于阅读,特别是对于复杂的路径。

在C#代码中创建路径

在C#代码中,你可以使用PathGeometryPathFigure类来动态创建路径:

PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(10, 50);LineSegment lineSegment = new LineSegment(new Point(100, 50), true);
pathFigure.Segments.Add(lineSegment);// ...其他Segments...pathGeometry.Figures.Add(pathFigure);Path path = new Path();
path.Stroke = Brushes.Black;
path.Fill = Brushes.Yellow;
path.StrokeThickness = 1;
path.Data = pathGeometry;myCanvas.Children.Add(path);

在这个例子中,我们创建了一个PathGeometry,添加了一个PathFigure和一些LineSegment等,然后将它们添加到一个Path元素中。最后,将这个Path元素添加到界面控件中,例如一个Canvas

LineSegment直线段

在WPF中,LineSegment用于在路径中绘制从当前点到指定点的直线。当你使用Path元素和它的PathGeometry来定义自定义图形时,LineSegment是构成路径的多个段之一。

要绘制一个直线段,你需要定义一个起始点和一个终止点。起始点通常是前一个路径命令的结束位置,或者是通过PathFigureStartPoint属性设置的。终止点是你在LineSegment中指定的点。

下面是一个基本的XAML示例,演示了如何使用LineSegmentPath中绘制直线:

<Path Stroke="Black" StrokeThickness="2"><Path.Data><PathGeometry><PathFigure StartPoint="10,20"><LineSegment Point="100,20" /></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,PathFigure的起始点(StartPoint)被设置为(10,20),然后LineSegment绘制了一条从(10,20)(100,20)的直线。

如果你想在C#代码中创建相同的直线段,可以这样做:

// 创建路径几何图形
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();// 设置起点
pathFigure.StartPoint = new Point(10, 20);// 创建直线段并添加到路径图形中
LineSegment lineSegment = new LineSegment();
lineSegment.Point = new Point(100, 20);
pathFigure.Segments.Add(lineSegment);// 将路径图形添加到路径中
pathGeometry.Figures.Add(pathFigure);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;
path.Data = pathGeometry;// 将路径添加到容器中,比如一个Canvas
myCanvas.Children.Add(path);

在上述代码中,我们创建了一个PathGeometry对象,然后创建了一个PathFigure并设置了它的StartPoint。接着,我们创建了一个LineSegment对象,设置其端点,然后将其添加到PathFigureSegments集合中。最后,我们将PathFigure添加到PathGeometryFigures集合中,并且将PathGeometry设置为Path元素的Data属性。最后,将这个Path元素添加到了一个名为myCanvas的容器中。

ArcSegment 圆弧

在WPF中,ArcSegment用于在路径中绘制一段弧线。这可以用来创建圆形、椭圆形或者圆弧等形状。ArcSegment具有多个属性,允许你定义弧线的大小、形状、旋转、起始点和终止点以及弧线绘制的方向。

以下是ArcSegment的关键属性:

  • Point: 弧线的终点。
  • Size: 弧线的宽度和高度,这决定了弧线的椭圆大小。
  • RotationAngle: 弧线相对于x轴的旋转角度。
  • IsLargeArc: 如果为True,则绘制大于或等于180度的弧线;如果为False,则绘制小于180度的弧线。
  • SweepDirection: 弧线的绘制方向,可以是Clockwise(顺时针)或Counterclockwise(逆时针)。

以下是一个简单的XAML示例,演示了如何使用ArcSegmentPath中绘制弧线:

<Path Stroke="Black" StrokeThickness="2" Fill="LightBlue"><Path.Data><PathGeometry><PathFigure StartPoint="10,100"><!-- 绘制一个从(10,100)到(150,100)的180度弧线 --><ArcSegment Point="150,100" Size="70,50" RotationAngle="0" IsLargeArc="True" SweepDirection="Clockwise"/></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,我们设置了PathFigure的起始点为(10,100),然后使用ArcSegment从起始点绘制了一个180度的弧线到(150,100)。我们设置了Size(70,50),表示弧线所基于的椭圆的宽度(x轴半径)为70,高度(y轴半径)为50。RotationAngle设置为0表示椭圆没有旋转。IsLargeArc设置为True表示绘制的是一个大弧线(大于180度),而SweepDirection设置为Clockwise表示弧线的绘制方向是顺时针。

如果你想在C#代码中创建相同的弧线段,可以这样做:

// 创建路径几何图形
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();// 设置起点
pathFigure.StartPoint = new Point(10, 100);// 创建弧线段并添加到路径图形中
ArcSegment arcSegment = new ArcSegment();
arcSegment.Point = new Point(150, 100);
arcSegment.Size = new Size(70, 50);
arcSegment.RotationAngle = 0;
arcSegment.IsLargeArc = true;
arcSegment.SweepDirection = SweepDirection.Clockwise;
pathFigure.Segments.Add(arcSegment);// 将路径图形添加到路径中
pathGeometry.Figures.Add(pathFigure);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;
path.Fill = Brushes.LightBlue;
path.Data = pathGeometry;// 将路径添加到容器中,比如一个Canvas
myCanvas.Children.Add(path);

在这段代码中,我们创建了一个PathGeometry对象,并为其添加了一个PathFigure,设置了起点。然后,我们创建了一个ArcSegment对象,设置了所有必要的属性,将这个ArcSegment添加到了PathFigureSegments集合中。之后,我们将PathFigure添加到PathGeometryFigures集合中,并将该PathGeometry设置为Path元素的Data属性。最后,我们将这个Path元素添加到了一个名为myCanvas的容器中。

BezierSegment 三次方贝塞尔曲线段

在WPF中,BezierSegment表示一段三次贝塞尔曲线。三次贝塞尔曲线由四个点定义:起始点、两个控制点和一个结束点。起始点通常是前一个路径或图形的结束位置,而三次贝塞尔曲线的具体形状由两个控制点和结束点的位置决定。

以下是BezierSegment的关键属性:

  • Point1: 第一个控制点,用来定义曲线的形状。
  • Point2: 第二个控制点,同样用来定义曲线的形状。
  • Point3: 贝塞尔曲线的结束点。

下面是一个在XAML中使用BezierSegment来绘制三次贝塞尔曲线的例子:

<Path Stroke="Black" StrokeThickness="2"><Path.Data><PathGeometry><PathFigure StartPoint="10,20"><!-- 绘制一条三次贝塞尔曲线 --><BezierSegment Point1="100,0" Point2="200,40" Point3="300,20" /></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,PathFigureStartPoint设置为(10,20),这是贝塞尔曲线的起始点。BezierSegment的三个点Point1Point2Point3分别设置为(100,0)(200,40)(300,20),它们分别是两个控制点和曲线的结束点。

如果你想在C#代码中创建相同的贝塞尔曲线,可以这样做:

// 创建路径几何图形
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();// 设置起点
pathFigure.StartPoint = new Point(10, 20);// 创建贝塞尔曲线段并添加到路径图形中
BezierSegment bezierSegment = new BezierSegment();
bezierSegment.Point1 = new Point(100, 0);
bezierSegment.Point2 = new Point(200, 40);
bezierSegment.Point3 = new Point(300, 20);
pathFigure.Segments.Add(bezierSegment);// 将路径图形添加到路径中
pathGeometry.Figures.Add(pathFigure);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;
path.Data = pathGeometry;// 将路径添加到容器中,比如一个Canvas
myCanvas.Children.Add(path);

在这段代码中,我们创建了一个PathGeometry对象,并为其添加了一个PathFigure,设置了起点。然后,我们创建了一个BezierSegment对象,设置了三个控制点,将这个BezierSegment添加到了PathFigureSegments集合中。之后,我们将PathFigure添加到PathGeometryFigures集合中,并将该PathGeometry设置为Path元素的Data属性。最后,我们将这个Path元素添加到了一个名为myCanvas的容器中。

QuadraticBezierSegment 二次方贝塞尔曲线段

在WPF中,QuadraticBezierSegment用于绘制一段二次贝塞尔曲线。与三次贝塞尔曲线相比,二次贝塞尔曲线只使用一个控制点以及起始点和结束点。

以下是QuadraticBezierSegment的关键属性:

  • Point1: 控制点,用于定义曲线的形状。
  • Point2: 结束点,即贝塞尔曲线的终点。

下面是一个在XAML中使用QuadraticBezierSegment来绘制二次贝塞尔曲线的例子:

<Path Stroke="Black" StrokeThickness="2"><Path.Data><PathGeometry><PathFigure StartPoint="10,20"><!-- 绘制一条二次贝塞尔曲线 --><QuadraticBezierSegment Point1="100,200" Point2="200,20" /></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,PathFigure设置了起始点(10,20),贝塞尔曲线的控制点Point1设置为(100,200),结束点Point2设置为(200,20)

如果你想在C#代码中创建相同的贝塞尔曲线,可以这样做:

// 创建路径几何图形
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();// 设置起点
pathFigure.StartPoint = new Point(10, 20);// 创建二次贝塞尔曲线段并添加到路径图形中
QuadraticBezierSegment quadraticBezierSegment = new QuadraticBezierSegment();
quadraticBezierSegment.Point1 = new Point(100, 200);
quadraticBezierSegment.Point2 = new Point(200, 20);
pathFigure.Segments.Add(quadraticBezierSegment);// 将路径图形添加到路径中
pathGeometry.Figures.Add(pathFigure);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;
path.Data = pathGeometry;// 将路径添加到容器中,例如一个Canvas
myCanvas.Children.Add(path);

在这段代码中,我们同样创建了PathGeometry对象,添加了一个PathFigure并设置起始点。然后我们创建一个QuadraticBezierSegment,设置了控制点和结束点,并将其添加到PathFigureSegments集合中。最终,PathGeometry被赋给了Path元素的Data属性,并将这个Path添加到了容器myCanvas中。

Poly LineSegment 多直线段

在WPF中,PolyLineSegment用于绘制一系列相连的直线段。这个类允许你指定一个点的集合,每一对相邻的点之间会被绘制一条直线段。

以下是PolyLineSegment的关键属性:

  • Points: PointCollection类型,包含了一系列的点,这些点定义了多条相连直线段的端点。

下面是一个在XAML中使用PolyLineSegment来绘制多条相连直线段的例子:

<Path Stroke="Black" StrokeThickness="2"><Path.Data><PathGeometry><PathFigure StartPoint="10,20"><!-- 绘制一系列相连的直线段 --><PolyLineSegment Points="50,70 90,130 130,70 170,120" /></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,PathFigure设置了起始点(10,20)PolyLineSegmentPoints属性定义了一系列的端点:(50,70)(90,130)(130,70)(170,120)。这些点之间将被绘制直线连接。

如果你想在C#代码中创建相同的直线段,可以这样做:

// 创建路径几何图形
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();// 设置起点
pathFigure.StartPoint = new Point(10, 20);// 创建多直线段并添加到路径图形中
PolyLineSegment polyLineSegment = new PolyLineSegment();
polyLineSegment.Points = new PointCollection
{new Point(50, 70),new Point(90, 130),new Point(130, 70),new Point(170, 120)
};
pathFigure.Segments.Add(polyLineSegment);// 将路径图形添加到路径中
pathGeometry.Figures.Add(pathFigure);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;
path.Data = pathGeometry;// 将路径添加到容器中,比如一个Canvas
myCanvas.Children.Add(path);

在这段代码中,我们创建了PathGeometry对象,并为其添加了一个PathFigure,设置了起点。然后,我们创建了一个PolyLineSegment对象,添加了一系列的点,并将其添加到PathFigureSegments集合中。最终,PathGeometry被赋给了Path元素的Data属性,并将这个Path添加到了容器myCanvas中。

PolyBezierSegment 多三次方贝塞尔曲线段

在WPF中,PolyBezierSegment用于创建一系列三次贝塞尔曲线段。这个类允许你指定一系列的点,其中每三个点定义了一段贝塞尔曲线的两个控制点和一个结束点,与之前的结束点(或者PathFigure的起始点)一起形成贝塞尔曲线。

以下是PolyBezierSegment的关键属性:

  • Points: PointCollection类型,包含了一系列的点。在这个集合中,每连续的三个点将被视为一组,分别代表两个控制点和一个结束点。

下面是一个在XAML中使用PolyBezierSegment来绘制多个贝塞尔曲线段的例子:

<Path Stroke="Black" StrokeThickness="2"><Path.Data><PathGeometry><PathFigure StartPoint="10,20"><!-- 绘制一系列三次贝塞尔曲线段 --><PolyBezierSegment Points="40,35 65,35 90,20115,5 140,5 165,20190,35 215,35 240,20" /></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,PathFigure设置了起始点(10,20)PolyBezierSegmentPoints属性定义了一系列的点。这些点三个一组,定义了贝塞尔曲线的控制点和结束点。

如果你想在C#代码中创建相同的贝塞尔曲线段,可以这样做:

// 创建路径几何图形
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();// 设置起点
pathFigure.StartPoint = new Point(10, 20);// 创建多贝塞尔曲线段并添加到路径图形中
PolyBezierSegment polyBezierSegment = new PolyBezierSegment();
polyBezierSegment.Points = new PointCollection
{new Point(40, 35), new Point(65, 35), new Point(90, 20),new Point(115, 5), new Point(140, 5), new Point(165, 20),new Point(190, 35), new Point(215, 35), new Point(240, 20)
};
pathFigure.Segments.Add(polyBezierSegment);// 将路径图形添加到路径中
pathGeometry.Figures.Add(pathFigure);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;
path.Data = pathGeometry;// 将路径添加到容器中,比如一个Canvas
myCanvas.Children.Add(path);

在这段代码中,我们创建了PathGeometry对象,并为其添加了一个带有起始点的PathFigure。然后我们创建了一个PolyBezierSegment对象,设置了一系列的点,并将其添加到PathFigureSegments集合中。最终,PathGeometry被赋给了Path元素的Data属性,并将这个Path添加到了容器myCanvas中。

PoiyQuadraticBezierSegment 多二次方贝塞尔曲线

在WPF中,PolyQuadraticBezierSegment 用于创建一系列的二次贝塞尔曲线段。这个类允许你指定一系列的点,其中每两个点定义了一段贝塞尔曲线的一个控制点和一个结束点,与之前的结束点(或者 PathFigure 的起始点)一起形成贝塞尔曲线。

以下是 PolyQuadraticBezierSegment 的关键属性:

  • Points: PointCollection 类型,包含了一系列的点。在这个集合中,每连续的两个点将被视为一组,分别代表一个控制点和一个结束点。

下面是一个在XAML中使用 PolyQuadraticBezierSegment 来绘制多个二次贝塞尔曲线段的例子:

<Path Stroke="Black" StrokeThickness="2"><Path.Data><PathGeometry><PathFigure StartPoint="10,20"><!-- 绘制一系列二次贝塞尔曲线段 --><PolyQuadraticBezierSegment Points="100,200 200,100 300,200 400,100 500,200 600,100" /></PathFigure></PathGeometry></Path.Data>
</Path>

在这个例子中,PathFigure 设置了起始点 (10,20)PolyQuadraticBezierSegmentPoints 属性定义了一系列的点。这些点两个一组,定义了贝塞尔曲线的控制点和结束点。

如果你想在C#代码中创建相同的二次贝塞尔曲线段,可以这样做:

// 创建路径几何图形
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();// 设置起点
pathFigure.StartPoint = new Point(10, 20);// 创建多二次贝塞尔曲线段并添加到路径图形中
PolyQuadraticBezierSegment polyQuadraticBezierSegment = new PolyQuadraticBezierSegment();
polyQuadraticBezierSegment.Points = new PointCollection
{new Point(100, 200), new Point(200, 100),new Point(300, 200), new Point(400, 100),new Point(500, 200), new Point(600, 100)
};
pathFigure.Segments.Add(polyQuadraticBezierSegment);// 将路径图形添加到路径中
pathGeometry.Figures.Add(pathFigure);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;
path.Data = pathGeometry;// 将路径添加到容器中,比如一个Canvas
myCanvas.Children.Add(path);

在这段代码中,我们创建了 PathGeometry 对象,并为其添加了一个带有起始点的 PathFigure。然后我们创建了一个 PolyQuadraticBezierSegment 对象,设置了一系列的点,并将其添加到 PathFigureSegments 集合中。最终,PathGeometry 被赋给了 Path 元素的 Data 属性,并将这个 Path 添加到了容器 myCanvas 中。

路径标记语法

WPF中的路径标记语法(Path Markup Syntax)是一种简短的字符串表示形式,用来描述二维图形路径。这种语法非常紧凑,允许开发者在XAML中快速定义复杂的图形路径。路径标记语法是基于SVG路径语法的。

在路径标记语法中,每个命令都是由一个字母开始,后面跟着参数列表。命令可以是大写或小写的,大写表示使用绝对坐标,小写表示使用相对坐标。以下是几个常见的路径命令:

  • M (moveto): 移动到一个新的位置。例如,M 100,200 移动到点 (100,200)。
  • L (lineto): 从当前位置画直线到新位置。例如,L 200,100 画线到点 (200,100)。
  • H (horizontal lineto): 画水平线到指定的X坐标。例如,H 200 画线到点 (200,当前y)。
  • V (vertical lineto): 画垂直线到指定的Y坐标。例如,V 100 画线到点 (当前x,100)。
  • C (cubic Bézier curve): 画三次贝塞尔曲线。例如,C 100,100 200,200 300,100 定义了一条曲线,其控制点为 (100,100) 和 (200,200),结束点为 (300,100)。
  • Q (quadratic Bézier curve): 画二次贝塞尔曲线。例如,Q 100,100 200,200 定义了一条曲线,其控制点为 (100,100),结束点为 (200,200)。
  • A (elliptical arc): 画椭圆弧。例如,A 100,50 0 1 0 300,100 画一个椭圆弧,半径为100x50,不旋转,大弧标志为1,顺时针绘制到点 (300,100)。
  • Z (close): 关闭当前子路径,并将当前点移动到子路径的起始点。

下面是一个包含多种命令的路径标记语法例子:

<Path Stroke="Black" StrokeThickness="2" Fill="LightBlue"Data="M 10,100 L 100,100 Q 150,50 200,100 C 250,150 350,150 400,100 H 500 V 150 Z" />

在这个例子中,路径开始于点 (10,100),然后直线到 (100,100),接着是一条二次贝塞尔曲线至 (200,100),然后是一条三次贝塞尔曲线至 (400,100),接着画一条水平线到 x=500,然后画一条垂直线到 y=150,最后通过 Z 命令关闭路径。

路径标记语法非常适合在XAML中定义简短的图形路径,但对于更复杂的图形,可能需要使用 PathGeometry 或其他相关类。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/218391.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二十五、DSL查询文档(全文检索查询、精确查询、地理查询、复合查询)

目录 一、全文检索查询 1、match查询 语法: 2、multi_match查询 语法: 3、match和mult_match的区别 二、精确查询 1、term查询&#xff1a; 语法&#xff1a; 2、range查询&#xff1a;&#xff08;范围查询&#xff09; 语法&#xff1a; 三、地理查询 1、geo_bou…

数据结构——线性表

目录 1.线性表的定义 2.顺序表 2.1顺序表的定义 2.2 顺序表的应用 2.2.1 顺序表的管理 &#xff08;1&#xff09; 顺序表的初始化 &#xff08;2&#xff09; 销毁顺序表 &#xff08;3&#xff09; 打印顺序表的值 &#xff08;4&#xff09;检查顺序表的容量 &…

3.2 Windows驱动开发:内核CR3切换读写内存

CR3是一种控制寄存器&#xff0c;它是CPU中的一个专用寄存器&#xff0c;用于存储当前进程的页目录表的物理地址。在x86体系结构中&#xff0c;虚拟地址的翻译过程需要借助页表来完成。页表是由页目录表和页表组成的&#xff0c;页目录表存储了页表的物理地址&#xff0c;而页表…

【RTP】RTPSenderAudio::SendAudio

RTPSenderAudio 可以将一个opus帧封装为rtp包进行发送,以下是其过程:RTPSenderAudio::SendAudio :只需要提供payload部分 创建RtpPacketToSend 并写入各个部分 填充payload部分 sender 本身分配全session唯一的twcc序号 if (!rtp_sender_->

服务器连接github

https://zhuanlan.zhihu.com/p/543490354 比着这个一步步做就行。 https://blog.l0v0.com/posts/94ffdbdf.html 上传文件可以看这个 注意&#xff1a; 密钥ssh-keygen设置好之后&#xff0c;以后就不用每次输入账号密码才能访问了。 otherwise&#xff0c;每次要输入账号密码。…

【C++】PACS医学图像存储和传输系统源码带三维重建

PACS&#xff08;Picture Archiving and Communication System&#xff09;系统作为医学图像的存储和传输平台&#xff0c;为医生和患者提供了便捷高效的诊疗服务支持。近年来&#xff0c;三维重建技术在PACS系统中的应用越来越广泛。 三维后处理功能是临床数字技术中的重要组成…

OpenCV快速入门:相机标定——单目视觉和双目视觉

文章目录 前言一、相机标定的基本原理1.1 相机模型与坐标系1.1.1 相机模型1.1.2 坐标系 1.2 相机内参与外参1.2.1 内部参数1.2.2 外部参数 1.3 镜头畸变1.4 透视变换1.5 标定的重要性和应用场景 二、单目视觉2.1 单目视觉的原理2.1.1 单目视觉的原理2.1.2 单目视觉的公式2.1.3 …

nodejs+vue+python+PHP+微信小程序-健身俱乐部在线管理平台的设计与实现-安卓-计算机毕业设计

随着经济的发展、财富的累积&#xff0c;人们生活水平、生活质量大幅度提高&#xff0c;生活环境得到明显改善&#xff0c;但是竞争激烈、人们生活压力大、生活节奏快加上饮食习惯和生活方式不合理导致国内 亚健康人群逐年增多。统计数据表明当前我国亚健康人群比例已经超过了7…

基于ncurse实现的俄罗斯方块

1. 需求分析 方块的类型方块的变形方块的消除方块的存储方块的移动接受用户的输入 2. 概要设计 2.1 方块类型与变形 一共有七种&#xff0c;变换的方式如下。变换后的任意形状方块实际上可以存在一个4x4的矩阵中。 我们再压一下位&#xff0c;就可以存在16位中。 2.2 方块…

Transformer——decoder

上一篇文章&#xff0c;我们介绍了encoder&#xff0c;这篇文章我们将要介绍decoder Transformer-encoder decoder结构&#xff1a; 如果看过上一篇文章的同学&#xff0c;肯定对decoder的结构不陌生&#xff0c;从上面框中可以明显的看出&#xff1a; 每个Decoder Block有两个…

nodejs微信小程序+python+PHP-健身俱乐部在线管理平台的设计与实现-安卓-计算机毕业设计

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

在 STM32 上实现温度补偿和校正

本文介绍了如何在 STM32 微控制器上实现温度补偿和校正&#xff0c;以提高温度传感器的测量精度。首先&#xff0c;我们将简要介绍温度补偿和校正的原理和目的。然后&#xff0c;我们将详细讨论在 STM32 上实现温度补偿和校正的步骤和方法。同时&#xff0c;提供了一个简单的示…