当前位置:网站首页 / WPF / 正文

[ay的wpf]写给自己的wpf高级教程 [15]-弧-贝塞尔-BezierSegment[2/3]

时间:2016年07月12日 | 作者 : aaronyang | 分类 : WPF | 浏览: 2438次 | 评论 0

先学会Blend中怎么使用钢笔工具

blob.png

这里跟PhotoShop差不多

blob.png

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========


使用工具

单击形成点,在已有的路径上,是添加点,在点上点击是删除点。(AY)

按住Alt键左键拖点和     延长线上的点(方向线),可以重新调整弧度。

直接单击点连接就是直线



先看其他知识。Path的Data

使用PathFigureCollection的表示方法

     <Path Stroke="Black" StrokeThickness="1" Fill="#FFC8E44A">
                <Path.Data>
                    <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
                </Path.Data>
            </Path>

blob.png

使用StreamGeometry的表示方法

<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />

blob.png

WPF提供两个类来描述路径数据:一个是StreamGeometry,另一个是PathFigureCollection

这两种方式都可以达至同一种显示效果,那么,什么时候使用StreamGeometry,什么时候使用PathFigureCollection方式呢?

一般地,当你建立路径后,不再需要修改时,可使用StreamGeometry方式,如果还需要对路径数值进行修改,则使用PathFigureCollection方式(这里就是PathGeometry)


参考文章地址:http://blog.csdn.net/johnsuna/article/details/1885597


Data属性的表示语法:

(1)StreamGeometry方式: [填充规则] 外形描述[外形描述]*

(2)PathFigureCollection方式: 外形描述[外形描述]*


注:

(1)上面语法中,[...]表示可选,*代表任意个。

(2)“填充规则”中,有EvenOdd和Nonzero两种。XAML中为了简洁,使用“F0”表示EvenOdd,“F1”表示Nonzero。

(3)“外形描述”的语法:moveCommand drawCommands [closeCommand]

其中:移动指令(moveCommand),绘制指令(drawCommands),关闭指令(closeCommand)。

(4)moveCommand指定起始点,使用一个drawingCommand描述外形轮廓的内容描述,closeCommand用来关闭路径。


PathDataMarkupSyntax01.png

1. 移动指令:Move Command(M):M 起始点  或者:m 起始点

比如:M 100,240或m 100,240

使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没有指定,则使用(0,0)。


2. 绘制指令(Draw Command):

我们可以绘制以下形状:

(1) 直线:Line(L)

(2) 水平直线: Horizontal line(H)

(3) 垂直直线: Vertical line(V)

(4) 三次方程式贝塞尔曲线: Cubic Bezier curve(C)

(5) 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)

(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)

(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)

(8) 椭圆圆弧: elliptical Arc(A) 



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

比如:L 100, 200 L 300,400表示从绝对坐标点(100,200)到另一绝对坐标点(300,400)的一条直线。而l 100, 200 l 300,400则表示相对上一点(如果未指定,则默认为(0,0)坐标点)开始计算的坐标点(100,200)到坐标点为(300,400)的一条直线。

当我们重复使用同一种类型时,就可以省略前面的命令。比如:L 100, 200 L 300,400简写为:L 100, 200 300,400。


PathDataMarkupSyntax02.png

细心的读者可能会发现,有点怪怪的感觉,因为我故意将下面的三角形的代码放在前面了,这样,似乎不太符合习惯。事实上,上面的代码与这个结果完全一样:

<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 100,10 100,40 Z M 10,100 L 100,100 100,50 Z" />

这里有一个你暂时还没见过的Z指令,它就是一个关闭指令(close Command),表示封闭指定形状,即将首尾点连接起来形成封闭的区域



绘制指令格式语法:

(1) 直线:Line(L)
格式:
L 结束点坐标 或: l 结束点坐标。
比如:L 100,100 或 l 100 100。坐标值可以使用x,y(中间用英文逗号隔开)或x y(中间用半角空格隔开)的形式。

(2) 水平直线  Horizontal line(H):绘制从当前点到指定x坐标的直线。
格式:H x值 或 h x值(x为System.Double类型的值)
比如:H 100或h 100,也可以是:H 100.00或h 100.00等形式。

(3) 垂直直线 Vertical line(V):绘制从当前点到指定y坐标的直线。
格式:V y值 或 v y值(y为System.Double类型的值)
比如:V 100或y 100,也可以是:V 100.00或v 100.00等形式。

(4) 三次方程式贝塞尔曲线 Cubic Bezier curve(C):通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。
格式:C 第一控制点 第二控制点 结束点 或 c 第一控制点 第二控制点 结束点
比如:C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中,点(100,200)为第一控制点,点(200,400)为第二控制点,点(300,200)为结束点。

(5) 二次方程式贝塞尔曲线 Quadratic Bezier curve(Q):通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。
格式:Q 控制点 结束点 或 q 控制点 结束点
比如:q 100,200 300,200。其中,点(100,200)为控制点,点(300,200)为结束点。

(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S):通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。
格式:S 控制点 结束点 或 s 控制点 结束点
比如:S 100,200 200,300

(7) 平滑二次方程式贝塞尔曲线 smooth quadratic Bezier curve(T):与平滑三次方程贝塞尔曲线类似。
格式:T 控制点 结束点 或 t 控制点 结束点
比如:T 100,200 200,300

关于第(6)种平滑三次方程式贝塞尔曲线与第(7)种平滑二次方程式贝塞尔曲线的比较:

PathDataMarkupSyntax03.png


XAML代码:

<!-- 这是左边平滑三次方程式贝塞尔曲线的代码 -->

<Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 S 250,100 80,280" />


<!--这是关键点的连线示意-->

<Path Stroke="Black" StrokeThickness="1"  Data="M 150,10 L 250,100 80,280" />


<!-- 这是右边平滑二次方程式贝塞尔曲线的代码 -->

<Path Stroke="Red" StrokeThickness="2" StrokeDashArray="1,1,1"   Data="M 150,10 T 250,100 80,280" />

备注:为了方便比较,我使用了同一个控制点,坐标均为:(250,100),起始和结束点也一样。另外,我使用了虚线(用了StrokeDashArray属性)及不同颜色以示区分。


(8) 椭圆圆弧: elliptical Arc(A) : 在当前点与指定结束点间绘制圆弧。

A 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点

或:

a 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点

尺寸(Size): System.Windows.Size类型,指定椭圆圆弧X,Y方向上的半径值。

旋转角度(rotationAngle):System.Double类型。

圆弧旋转角度值(rotationAngle):椭圆弧的旋转角度值。 

优势弧的标记(isLargeArcFlag):是否为优势弧,如果弧的角度大于等于180度,则设为1,否则为0。 

正负角度标记(sweepDirectionFlag):当正角方向绘制时设为1,否则为0。 

结束点(endPoint):System.Windows.Point类型。


3. 关闭指令(close Command):用以将图形的首、尾点用直线连接,以形成一个封闭的区域。

用Z或z表示。



====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

推荐您阅读更多有关于“WPF4.5,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,目前主maui

目前在合肥市中安创谷A1科大智联就职,5月底离职

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表