一、画弧

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=""
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(, ), new Size(, ), , false, SweepDirection.Counterclockwise, true);
PathFigure figure = new PathFigure();
figure.StartPoint = new Point(, );
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),表示封闭指定形状,即将首尾点连接起来形成封闭的区域。

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

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

  1. 【wpf】Path画扇形以及Path的Data属性的理解

    <Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...

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

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  3. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

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

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

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

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  6. 利用border-radious画图形

    今天才发现,border-radius可以画很多图形,下面跟我来看一下吧: 在设有宽和高的情况下画一个圆: #div1{ /*宽高相等,圆角范围为高或宽的一半或以上*/ background-colo ...

  7. (转载)C# GDI+ 画简单的图形:直线、矩形、扇形等

    GDI+是一种绘图装置接口, 当拖动窗体是,窗体发生移动,window默认为从窗体移动到另一个地方,先发生擦除后再重新画一个窗体: 而我们自己动手画的图(如下面的线),不会重新画:在属性中,Paint ...

  8. 《Programming WPF》翻译 第7章 2.图形

    原文:<Programming WPF>翻译 第7章 2.图形 图形时绘图的基础,代表用户界面树的元素.WPF支持多种不同的形状,并为它们每一个都提供了元素类型. 7.2.1基本图形类 在 ...

  9. 《Programming WPF》翻译 第7章 1.图形基础

    原文:<Programming WPF>翻译 第7章 1.图形基础 WPF使得在你的应用程序中使用图形很容易,以及更容易开发你的显卡的能力.这有很多图形构架的方面来达到这个目标.其中最重要 ...

随机推荐

  1. js 幻灯片

    基本思路 红色:为可见区域 黑色方框:元素,不可见. 通过绝对定位方式,把黑色方框,移动到红色可见区别,来实现图片切换.  实例 创建幻灯实例对象 <div class="slide& ...

  2. Mobius反演的套路

    T1 \(\sum_{i=1}^N \sum_{j=1}^M [(i,j)=1]\) \(f(d)=\sum_{i=1}^N \sum_{j=1}^M [(i,j)=d]\) \(g(d)=\sum_ ...

  3. 解决OpenCV JavaCameraView相机preview方向问题

    网上找了很多解决都是有问题的,研究了半天源码解决了这个问题.我是从整个相机启动和数据传输的过程着手的,这里捡重点介绍一下,最后会贴上修改后的两个源文件. 首先要知道一个概念. 图里的小圆圈是Home按 ...

  4. 学习用Node.js和Elasticsearch构建搜索引擎(7):零停机时间更新索引配置或迁移索引

    上一篇说到如果一个索引的mapping设置过了,想要修改type或analyzer,通常的做法是新建一个索引,重新设置mapping,再把数据同步过来. 那么如何实现零停机时间更新索引配置或迁移索引? ...

  5. vi中的全局替换

    一.基本语法 替换命令语法: :[addr]s/源字符串/目标字符串/[option] 全局替换: :%s/源字符串/目标字符串/g 参数说明: [addr]--表示检索范围,省略时表示当前行. &q ...

  6. 手把手教你全家桶之React(三)--完结篇

    前言 本篇主要是讲一些全家桶的优化与完善,基础功能上一篇已经讲得差不多了.直接开始: Source Maps 当javaScript抛出异常时,我们会很想知道它发生在哪个文件的哪一行.但是webpac ...

  7. 餐饮ERP相关问题FAQ

    1.订单无法自动上传,手动上传也是失败. 检查网络是否有问题,网络如果正常,打开本地连接-属性-internet协议版本4-首选DNS服务器设置为(114.114.114.114) 然后再打开IE浏览 ...

  8. java----回文序列判断java

    import java.util.Scanner; public class test02 { public static void main(String[] args) { Scanner in ...

  9. 洗礼灵魂,修炼python(74)--全栈项目实战篇(2)——前期准备之详解虚拟机下安装ubuntu,基本配置,远程访问

    如果上一篇我转发的关于ubuntu的博文,你看完觉得还没准备好,那么,本篇从最基础的开始,安装虚拟机到正常使用ubuntu 虚拟机 1.什么是虚拟机 虚拟机(Virtual Machine)指通过软件 ...

  10. Javascript 高级程序设计--总结【三】

    ********************  Chapter 8 BOM ******************** BOM由浏览器提供商扩展 window: 既是js访问浏览器窗口的接口,又是Globa ...