WPF画图の利用Path画扇形(仅图形)

一、画弧

Path继承自Sharp,以System.Windows.Shapes.Shape为基类,它是一个具有各种方法的控件。

我们先看一段xaml代码:

        <Path Stroke="Red">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="100,0">
                        <ArcSegment Point="200,100" Size="100,200" SweepDirection="Clockwise"
                                    RotationAngle="45"
                                    IsSmoothJoin="False" IsLargeArc="True"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

画出图形的效果如下:

如上红色部门。

Path的属性 Stroke无可置疑,就是决定颜色,Fill作为内部填充颜色。

Path.Date就是决定了这个Path的数据信息

PathGeometry是绘图逻辑(要绘制的图形,只能用Path表现出来),不是控件;也可以用数值的形式标识出来(后面说明)

PathFigure是几何图形的子部分,需要指定StartPoint,它有一个集合Segments,里面是各种类型的Segment(部分)

ArcSegment是椭圆弧  Point值得是到达点,size是X、Y轴,SweepDirection设置画的方向,RotationAngle标识旋转角度

IsSmoothJoin表示是不是和上一个链接部分是角,默认False,IsLargeArc标识是优弧还是劣弧,默认劣弧,

      IsStroke是否显示边

二、有了上面的基础,我们画一个扇形

        <Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,100"   >
                        <LineSegment Point="100,50"/>
                        <ArcSegment Point="100,150" Size="300,200" SweepDirection="Clockwise" />
                        <LineSegment Point="0,100"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

三、下面我用数值表示

wpf 前台绘制圆弧很简单,如:<Path x:Name="path_data" Stroke="#FFE23838" StrokeThickness="1" Data="M 100,0 A 50,100 0 0 0 100,200"></Path>

注解:M 起始点 (100,0)  A 尺寸(X50,Y100半径) 圆弧旋转角度值(0) 优势弧的标记(否,弧角度小于180) 正负角度标记(0 逆时针画圆) 结束点(100,200)

下面是两个半圆连接到一起,其余的类似,只要添加数据就可以

        <Path Stroke="Red" Fill="Aqua" Data="M 100,100 A 50,50 0 0 0 100,200 A 50 50 0 0 1 100,300">

        </Path>

基本是一段A表示一段弧 A 50,50 0 0 0 100,200 ,一段L表示一段线L 300,300,另起线段要声明M

四、后台代码实现

后台动态绘制圆弧,切入点ArcSegment,一步步摸索出绘制方法。

ArcSegment(Point point, Size size, double rotationAngle, bool isLargeArc, SweepDirection sweepDirection, bool isStroked);

由于Point是结束点,需要定义起始点StartPoint,尝试还真有这个属性,后台绘制就出来了。代码如下

Path path = new Path();
PathGeometry pathGeometry = new PathGeometry();
ArcSegment arc = new ArcSegment(new Point(100, 200), new Size(50, 100), 0, false, SweepDirection.Counterclockwise, true);
PathFigure figure = new PathFigure();
figure.StartPoint = new Point(100, 0);
figure.Segments.Add(arc);
pathGeometry.Figures.Add(figure);
path.Data = pathGeometry;
path.Stroke = Brushes.Orange;
canvas.Children.Add(path);

五、Date指令详解

1. 移动指令:Move Command(M):M 起始点  或者:m 起始点
比如:M 100,240或m 100,240
使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没有指定,则使用(0,0)。

2. 绘制指令(Draw Command):
我们可以绘制以下形状:
(1) 直线:Line(L)格式:L 结束点坐标 或: l 结束点坐标。
(2) 水平直线: Horizontal line(H)格式:H x值 或 h x值(x为System.Double类型的值)
(3) 垂直直线: Vertical line(V)格式:V y值 或 v y值(y为System.Double类型的值)
(4) 三次方程式贝塞尔曲线: Cubic Bezier curve(C)格式:C 第一控制点 第二控制点 结束点 或 c 第一控制点 第二控制点 结束点
(5) 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)格式:Q 控制点 结束点 或 q 控制点 结束点
(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)格式:S 控制点 结束点 或 s 控制点 结束点
(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)格式:T 控制点 结束点 或 t 控制点 结束点
(8) 椭圆圆弧: elliptical Arc(A)

Z指令,它就是一个关闭指令(close Command),表示封闭指定形状,即将首尾点连接起来形成封闭的区域。

上面每种形状后用括号括起的英文字母为命令简写的大写形式,但你也可以使用小写。使用大写与小写的区别是:大写是绝对值,小写是相对值。

时间: 2024-12-06 00:34:05

WPF画图の利用Path画扇形(仅图形)的相关文章

CSS深入了解border:利用border画三角形等图形

三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3三角形画法</title> <style> .content{ width: 0px; height:

Swift-贝赛尔曲线画扇形、弧线、圆形、多边形——UIBezierPath实现App下载时的动画效果

上篇文章提到了使用贝赛尔曲线实现画图板(传送门),顿时就对贝赛尔曲线兴趣大增有木有. 之所以接触贝赛尔曲线,多亏了师父.周五下班前师父给我留了个任务,让我周末回家研究研究 iPhone 手机下载 App 时的效果是怎么实现的(不知道效果的童鞋请看下图) 如果所示,下载 App 的过程效果,就是 App 图标中间有一个顺时针旋转的圆圈.当一圈走完时 App 就下载完成了. 刚给我交代这个任务的时候,顿时感觉好难有木有...(主要是因为那个时候我还不知道贝赛尔曲线) 抛开一切复杂内容不谈,我们今天只

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,

Android利用canvas画各种图形 及Paint用法 .

引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing

(转)Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

来自:http://blog.csdn.net/rhljiayou/article/details/7212620 1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writi

利用border-radious画图形

今天才发现,border-radius可以画很多图形,下面跟我来看一下吧: 在设有宽和高的情况下画一个圆: #div1{ /*宽高相等,圆角范围为高或宽的一半或以上*/ background-color: green; width: 120px; height: 120px; border-radius: 60px; } 运行结果: 当宽和高不相等的时候: #div1{ /*宽大于高,圆角范围为宽的一半或以上*/ background-color: green; width: 120px; he

WPF使用Path画圆的一个示例代码

原文:WPF使用Path画圆的一个示例代码 <Path Fill="red" Data="M 0,0 A 20,20 45 1 1 0,1 Z"/> 1. Fill是指Path的填充颜色 2. Data是Path的路径, M 0,0  --画笔移到0,0处: A 20,20 --画半径为20的圆弧: 45 1 1 --- 45为转角角度,1:是否有大小弧,画椭圆时才有用:1:顺时针 0,1 --- 终点 Z --- 闭合 原文地址:https://www

WPF Path 画箭头

原文:WPF Path 画箭头 代码: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height=