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.mzph.cn/news/170666.shtml

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

相关文章

SpringMVC系列-7 @CrossOrigin注解与跨域问题

背景 前段时间帮同事分析了一个跨域问题&#xff0c;正好系统分析和整理一下。 1.跨域 理解同源策略是理解跨域的前提。同源策略定义如下&#xff1a; 在同一来源的页面和脚本之间进行数据交互时&#xff0c;浏览器会默认允许操作&#xff0c;而不会造成跨站脚本攻击&#x…

代码随想录算法训练营第五十五天|583. 两个字符串的删除操作 72. 编辑距离

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 583. 两个字符串的删除操作 class Solution:def minDistance(self, word1: str, word2: str) -> int:dp [[0] * (len(word2)1) for _ in range(…

香港站群服务器中1C/2C/4C/8C 的概念及区别

​  在选择香港站群服务器时&#xff0c;经常会看到1C、2C、4C和8C等不同的IP段。这些IP段代表了不同的子网掩码长度&#xff0c;也反映了服务器的IP地址数量和丰富性。 让我们来了解一下什么是IP段。IP段是指一组连续的IP地址&#xff0c;其中每个地址的前三个数字相同&…

代码随想录算法训练营 ---第四十二天

今天开始学习 动态规划&#xff1a;背包问题 也是比较难的一部分了 动态规划&#xff1a;背包问题 理论基础 01背包&#xff08;二维数组&#xff09; 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用…

模型优化【2】-剪枝[局部剪枝]

模型剪枝是一种常见的模型压缩技术&#xff0c;它可以通过去除模型中不必要的参数和结构来减小模型的大小和计算量&#xff0c;从而提高模型的效率和速度。在 PyTorch 中&#xff0c;我们可以使用一些库和工具来实现模型剪枝。 pytorch实现剪枝的思路是生成一个掩码&#xff0…

css加载会造成阻塞吗??

前言 前几天面试问到了这个问题&#xff0c;当时这个答得不敢确定哈哈&#xff0c;虽然一面还是过了 现在再分析下这个&#xff0c;总结下&#xff0c;等下次遇到就能自信得回答&#xff0c;666 准备工作 为了完成本次测试&#xff0c;先来科普一下&#xff0c;如何利用chr…

51单片机IO口的四种工作状态切换

51单片机IO口的四种工作状态切换 1.概述 这篇文章介绍单片机IO引脚的四种工作模式&#xff0c;每个模式都有各自的用武之地&#xff0c;后面在驱动外设硬件时会用它不同的模式。 2.IO口四种工作模式介绍 PnM1PnM0I/O口工作模式00准双向口&#xff1a;灌电流达20mA&#xff…

平衡树 - splay

相比于之前的普通平衡树进行左旋右旋来比&#xff0c;splay的适用性更高&#xff0c;使用更广泛。 核心函数rotate、splay函数&#xff0c;其它的根据需要进行修改。 int n, m; struct Node {int s[2], p, v, cnt; // 左右儿子、父节点、值、出现数量int size, flag; // 子树大…

leetcode刷题日志-15.三数之和

这道题还是有点难度&#xff0c;我能想到的就是三重循环&#xff0c;但是题目限制不能重复&#xff0c;所以这道题三重循环完还要去重&#xff0c;太过于麻烦。看了题解以后&#xff0c;大佬们还是厉害&#xff0c;大概思路是这样子的&#xff1a;先对数组进行排序&#xff0c;…

《洛谷深入浅出基础篇》P4017最大食物链————拓扑排序

上链接&#xff1a;P4017 最大食物链计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P4017 上题干&#xff1a; 题目背景 你知道食物链吗&#xff1f;Delia 生物考试的时候&#xff0c;数食物链条数的题目全都错了&#xff0c;因为她总是…

堆和栈的区别 重点来说一下堆和栈;堆与栈之间的联系

文章目录 堆和栈的区别重点来说一下堆和栈&#xff1a;那么堆和栈是怎么联系起来的呢? 堆与栈的区别 很明显&#xff1a; 今天来聊一聊java中的堆和栈&#xff0c;工作当中这两个也是经常遇到的&#xff0c;知识我们没有去注意理论上的这些内容&#xff0c;今天就来分享一下。…

02_MySQL体系结构及数据文件介绍

#课程目标 了解MySQL的体系结构了解MySQL常见的日志文件及作用了解事务的控制语句&#xff0c;提交和回滚能够查看当前数据库的版本和用户了解MySQL数据库如何存放数据能在使用SQL语句创建、删除数据库 #一、MySQL的体系结构 ##1、客户端(连接者) MySQL的客户端可以是某个客户…

redis基本数据结构(String,Hash,Set,List,SortedSet)【学习笔记】

redis数据结构介绍 redis是一个key-value的数据库&#xff0c;key一般是String类型&#xff0c;但是value的类型多种多样。 redis 通用命令 keys : 查看符合模板的所有key &#xff08;keys partten ,匹配表达式支持一些特殊字符 * &#xff1f;&#xff09;del&#xff1a;删…

项目实战详细讲解带有条件响应的 SQL 盲注、MFA绕过技术、MFA绕过技术、2FA绕过和技巧、CSRF绕过、如何寻找NFT市场中的XSS漏洞

项目实战详细讲解带有条件响应的 SQL 盲注、MFA绕过技术、MFA绕过技术、2FA绕过和技巧、CSRF绕过、如何寻找NFT市场中的XSS漏洞。 带有条件响应的 SQL 盲注 这篇文章的核心要点如下: 漏洞发现:作者在Portswigger提供的实验室中发现了一个盲SQL注入漏洞。这个漏洞存在于一个应…

paho mqtt的keepAliveInterval

一、keepAliveInterval 所用的版本为1.3.12 实验一、 这个值设置的30&#xff0c;打开mqtt的trace&#xff0c;发现每隔33s发送一次pingreq note&#xff1a; 期间&#xff0c;client和server一直保持qos0的消息交互&#xff08;client->server&#xff09; 实验二、 …

力扣:提莫攻击

代码&#xff1a; class Solution { public:int findPoisonedDuration(vector<int>& timeSeries, int duration){//根据数组中给出的元素的值来进行判断&#xff01;//若后面元素-前面元素>d 中了d秒&#xff01;// <d 中了差的秒数&…

cesium轨迹线(闪烁轨迹线)

cesium轨迹线(闪烁轨迹线) 下面有源码 实现思路 使用ellipse方法加载圆型,修改polyline中‘material’方法重写glsl来实现当前效果(cesium版本1.109) 示例代码 index.html <!DOCTYPE html> <html lang="en"><head

Java多态:多态多态,多么变态

&#x1f451;专栏内容&#xff1a;Java⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、重写1、重写的规则2、重写与重载的区别 二、多态1、多态的概念2、多态的实现3、向上转移和向下转型Ⅰ、向上转型Ⅱ、向下转…

基于python+Django+SVM算法模型的文本情感识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介1. 简介2. 技术栈3. 系统架构4. 关键模块介绍5. 如何运行 二、功能三、系统四. 总结 一项目简介 # 基于 Python Django SVM 算法模型的文本情感识别系统介…

DeepWalk代码实战-维基百科词条图嵌入可视化

准备工作&#xff1a; 从爬虫网站中爬取维基百科See also关联词条&#xff1a;https://densitydesign.github.io/strumentalia-seealsology/ 维基百科网站&#xff1a;https://www.wikipedia.org/ 爬取过程&#xff1a; 下载 tsv 文件&#xff1a; import networkx as nx # 图…