WPF绘图使用介绍

文章目录

  • 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>
        <Line
            X1="50" Y1="50"
            X2="200" Y2="200"
            Stroke="Black"
            StrokeThickness="4" />

        <Line
            X1="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>
                    <Line
                        X1="0" Y1="0"
                        X2="100" Y2="100"
                        Stroke="Black"
                        StrokeThickness="2" />
                    <Line
                        X1="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,20
                                  115,5 140,5 165,20
                                  190,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 或其他相关类。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

FDG6306P PowerTrench® MOSFET P沟道 特点及其应用详解

关于PowerTrench MOSFET&#xff1f; 它是一种MOS场效应晶体管&#xff0c;可以提高系统效率和功率密度。该技术采用了屏蔽栅极技术&#xff0c;可以减少开关损耗和导通损耗&#xff0c;从而提高了系统效率。此外&#xff0c;PowerTrench MOSFET还具有低导通电阻和高开关速度的…

Python---函数的应用案例(多个)涉及函数、字符串翻转修改

案例&#xff1a;使用print方法打印一条横线 下面是最原始的方法&#xff1a; print(- * 40) 案例&#xff1a;对上个案例进行升级&#xff0c;可以根据输入的num数值&#xff0c;生成指定数量的横线 相关链接Python----range方法&#xff08;函数&#xff09;-CSDN博客 Pyt…

现代计算与光学的跨界机遇——

时至今日&#xff0c;互补氧化金属半导体&#xff08;CMOS&#xff09;技术的飞速发展促进了集成电路的空前成功。 晶体管的创新与时俱进 正如戈登-E-摩尔&#xff08;Gordon E. Moors&#xff09;在1965年预测的那样&#xff0c;每隔18-24个月&#xff0c;计算芯片上的晶体管数…

手把手教你通过CODESYS V3进行PLC编程(二)

教程背景 在上一期教程中&#xff0c;我们已经完成了控制器设备的连接和配置。接下来的教程将继续以宏集MC-Prime为例&#xff0c;假设控制器已经配置并连接到开发者的PC上&#xff0c;为您演示如何为控制器安装合适的CODESYS V3版本并创建第一个程序。 一、安装CODESYS &…

TikTok青年领袖:短视频如何塑造新一代

在数字时代的潮流中&#xff0c;短视频平台TikTok崭露头角&#xff0c;成为年轻一代最喜爱的社交媒体之一。这个平台不仅改变了用户的娱乐方式&#xff0c;更在其中催生了一批富有创造力和影响力的青年领袖。 本文将深入探讨TikTok如何通过短视频内容塑造新一代的青年领袖&…

Modbus转Profinet改变局面,PLC与电力仪表秒级响应

Modbus转Profinet改变了传统的局面&#xff0c;实现了PLC与电力仪表之间的秒级响应。在过去&#xff0c;由于Modbus通信协议的限制&#xff0c;PLC与电力仪表之间的数据传输速度受到了很大的限制&#xff0c;无法满足工业自动化领域对实时性的要求。然而&#xff0c;随着Modbus…

加班做报表被嘲低效!快用大数据分析工具

做数据分析报表很耗时间&#xff0c;因为不仅要解决多业务系统数据质量标准不一问题&#xff0c;还需要进行大量的公式计算、报表设计与制作。但那是以前&#xff0c;在大数据分析工具强势崛起的当下&#xff0c;这些工作都能交给大数据分析工具来做了。以前是花90%的时间做报表…

快慢指针判断环形链表

我们在前面文章中写过用快慢指针判断链表是否带环&#xff1a; leetcode&#xff1a;环形链表-CSDN博客 我们用的是slow指针一次走一步&#xff0c;fast指针一次走两步&#xff0c;当slow入环后开始了追击&#xff0c;每走一次距离缩短1&#xff0c;最终就会相遇 思考问题 …

CURL踩坑记录

因为项目使用的windows server&#xff0c;且没有安装Postman&#xff0c;所以对于在本地的Postman上执行的请求&#xff0c;要拷贝到服务器执行&#xff0c;只能先转化成为curl命令&#xff0c;操作也很简单&#xff0c;如下&#xff1a; 注意&#xff0c;Postman默认对url包围…

Vocoder,声码器详解——语音信号处理学习(十)

参考文献&#xff1a; [1] Vocoder (由助教許博竣同學講授)哔哩哔哩bilibili [2] Oord A, Dieleman S, Zen H, et al. Wavenet: A generative model for raw audio[J]. arXiv preprint arXiv:1609.03499, 2016. [3] https://deepmind.com/blog/article/wavenet-generative-mode…

关于实时云渲染并发问题的分享,实时云渲染到底能不能省显卡?

近期遇到很多客户咨询实时云渲染技术中的并发问题&#xff0c;在这里点量小芹针对这个问题的几个常见疑惑进行集中的解答分享&#xff0c;希望对有迷惑的朋友有所启发和帮助。 第一个问题&#xff0c;实时云渲染能否扩展一张显卡支持的并发数&#xff1f; 实时云渲染是一个新兴…

没有淘礼金权限怎么办?

前面我写了一篇微信公众号创建淘礼金的博文&#xff0c;在实际开发中不少人遇到了&#xff0c;淘礼金没有权限的问题。 既然没权限&#xff0c;解决方法就是去申请权限&#xff0c; 只需要满足以下规则&#xff0c;就可以自主申请开通。 申请规则&#xff1a; &#xff11;&a…

uni-app 跨端开发注意事项

文章目录 前言H5正常但App异常的可能性标题二H5正常但小程序异常的可能性小程序正常但App异常的可能性小程序或App正常&#xff0c;但H5异常的可能性App正常&#xff0c;小程序、H5异常的可能性使用 Vue.js 的注意区别于传统 web 开发的注意H5 开发注意微信小程序开发注意支付宝…

SpringBoot 导入其他配置文件

默认情况下&#xff0c;springboot 初始的项目中都有一个 application.yml 或者 application.properties 文件&#xff0c;如果我们希望再定义一个独立的配置文件用来配置特定业务数据&#xff0c;而不希望把这些配置内容都堆积在 application 配置文件中&#xff0c;实现这个需…

Android7.1 高通平台 修改系统默认语言

客户需求&#xff1a;修改系统默认语言为英文&#xff08;美国&#xff09; 源码位置&#xff1a;/build/tools/buildinfo.sh 只需修改 ro.product.locale的值即可&#xff0c;如下图&#xff1a;

《C++ Primer》第9章 顺序容器(一)

参考资料&#xff1a; 《C Primer》第5版《C Primer 习题集》第5版 C 中的容器可以分为 3 类&#xff1a;顺序容器、关联容器、无序关联容器。 9.1 顺序容器概述&#xff08;P292&#xff09; 所有顺序容器都提供了快速顺序访问的能力&#xff0c;但在以下方面的性能有所不…

jjwt使用说明-笔记

jjwt官网链接&#xff1a;https://github.com/jwtk/jjwt POM 依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.12.3</version> </dependency> <dependency><grou…

Web前端—移动Web第五天(媒体查询、Bootstrap、综合案例-alloyTeam)

版本说明 当前版本号[20231122]。 版本修改说明20231122初版 目录 文章目录 版本说明目录移动 Web 第五天01-媒体查询基本写法书写顺序案例-左侧隐藏媒体查询-完整写法关键词 / 逻辑操作符媒体类型媒体特性 媒体查询-外部CSS 02-Bootstrap简介使用步骤下载使用 栅格系统全局…

易点易动库存管理系统革新企业库存管理,降本增效

随着全球经济的快速发展和市场竞争的加剧&#xff0c;企业对库存管理的需求变得越来越迫切。传统的手工操作和繁琐的库存管理方式已经无法满足现代企业的需求。为了解决这一问题&#xff0c;易点易动库存管理系统应运而生。 易点易动库存管理系统概述 易点易动库存管理系统是一…

快速上手Banana Pi BPI-M4 Zero 全志科技H618开源硬件开发开发板

Linux[编辑] 准备[编辑] 1. Linux镜像支持SD卡或EMMC启动&#xff0c;并且会优先从SD卡启动。 2. 建议使用A1级卡&#xff0c;至少8GB。 3. 如果您想从 SD 卡启动&#xff0c;请确保可启动 EMMC 已格式化。 4. 如果您想从 EMMC 启动并使用 Sdcard 作为存储&#xff0c;请确…