写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画

下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细

MSDN告诉我们,Path可以用这些形状绘制:

ArcSegment 类 表示两点之间的一条椭圆弧。

BezierSegment 类 表示在两个点之间绘制的一条三次贝塞尔曲线。

LineSegment 类 在PathFigure中的两个点之间创建一条直线。

PolyBezierSegment 类 表示一条或多条三次方贝塞尔曲线。

PolyLineSegment 类 表示由PointCollection定义的线段集合,每个Point指定线段的终点。

PolyQuadraticBezierSegment 类 表示一系列二次贝塞尔线段。

QuadraticBezierSegment 类 在PathFigure的两点之间创建一条二次贝塞尔曲线。

说了这么多,好复杂呀,我们可以挑最简单的来用:

LineSegment 画直线,PolyLineSegment 画折线,ArcSegment 画圆弧

其实有了这三个类,我们可以画绝大多数简单常用的形状了,下面我举两个例子

这个形状宽和高都是100,其中矩形宽100高90,三角宽10高10居中

对于这样有棱角的图形,我们只需要找到他所有的顶点就行了

然后顺时针依次连起来,用PolyLineSegment折线来表示就行了

 <Path Stroke="Red" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<PolyLineSegment Points="100,0 100,90 55,90 50,100 45,90 0,90 0,0"></PolyLineSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>

来看这个带有圆角的图形,4个圆弧的半径是5,其他属性和上图一样.我们需要将它拆分,拆分成8个部分,4个圆弧和4个边,因为左上角圆弧的关系,起点设置成(5,0),每一部分的起点,都是上一部分的终点:

  1. 上边的直线:终点(95,0)
  2. 右上角的圆弧:终点(100,5),Size(5,5) 因为圆弧表示的是椭圆的圆弧,Size就是Size(宽,高),当宽和高都一样设置为5时,就指的是半径为5的圆的圆弧了
  3. 右边的直线:终点(100,85)
  4. 右下角的圆弧:终点(95,90),Size(5,5)
  5. 下边的折线:点的集合(55,90 50,100 45,90 5,90) 由于我们是顺时针来的,下边点的集合是从右到左依次来的
  6. 左下角圆弧:终点(0,85),Size(5,5)
  7. 左边的直线:终点(0,5)
  8. 左上角的圆弧:终点(5,0) 与起点重合

 <Path Stroke="Red" StrokeThickness="">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="5,0">
<LineSegment Point="95,0"></LineSegment>
<!--SweepDirection获取或设置一个值,该值指定是以 Clockwise 方向还是以 Counterclockwise 方向绘制弧-->
<!--顺时针绘制还是逆时针绘制,你试下另一个值,看下效果就知道怎么回事了-->
<ArcSegment Point="100,5" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
<LineSegment Point="100,85"></LineSegment>
<ArcSegment Point="95,90" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
<PolyLineSegment Points="55,90 50,100 45,90 5,90"></PolyLineSegment>
<ArcSegment Point="0,85" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
<LineSegment Point="0,5"></LineSegment>
<ArcSegment Point="5,0" Size="5,5" SweepDirection="Clockwise"></ArcSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>

WPF绘制简单常用的Path的更多相关文章

  1. WPF绘制简单常用的Path(转)

    写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...

  2. WPF中的常用布局

    一 写在开头1.1 写在开头评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好. 1.2 本文内容本文主要内容为WPF中的常用布局,大部分内容转载至https://blog.csdn.net ...

  3. WPF中的常用布局 栈的实现 一个关于素数的神奇性质 C# defualt关键字默认值用法 接口通俗理解 C# Json序列化和反序列化 ASP.NET CORE系列【五】webapi整理以及RESTful风格化

    WPF中的常用布局   一 写在开头1.1 写在开头微软是一家伟大的公司.评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好,应该抛弃对微软和微软的技术的偏见. 1.2 本文内容本文主要内容 ...

  4. WPF绘制自定义窗口

    原文:WPF绘制自定义窗口 WPF是制作界面的一大利器,下面就用WPF模拟一下360的软件管理界面,360软件管理界面如下: 界面不难,主要有如下几个要素: 窗体的圆角 自定义标题栏及按钮 自定义状态 ...

  5. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  6. WPF绘制党徽(立体效果,Cool)

    原文:WPF绘制党徽(立体效果,Cool) 前面用WPF方式绘制了党旗(WPF制作的党旗) ,去年3月份利用C# 及GDI+绘制过党徽,这次使用WPF来绘制党徽. ------------------ ...

  7. WPF 一个简单的颜色选择器

    原文:WPF 一个简单的颜色选择器 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/8340999 ...

  8. WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush)

    原文:WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush) 前面我们提到了LinearGradientBrush可以用来画渐变填充图,那么我们同时也可以使用ImageBr ...

  9. WPF入门(四)->线形区域Path内容填充之渐变色(LinearGradientBrush)

    原文:WPF入门(四)->线形区域Path内容填充之渐变色(LinearGradientBrush) 前面我们介绍到,Path对象表示一个用直线或者曲线连接的图形,我们可以使用Path.Data ...

随机推荐

  1. 程序员用HTML5制作的爱心树表白动画

    体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...

  2. js中Unicode转义序列

    将某一中文字符转义,可采取在线工具进行转义,http://tool.chinaz.com/tools/unicode.aspx "哈哈" ==="\u54c8\u54c8 ...

  3. iOS Block界面反向传值

    在上篇博客 <iOS Block简介> 中,侧重解析了 iOS Block的概念等,本文将侧重于它们在开发中的应用. Block是iOS4.0+ 和Mac OS X 10.6+ 引进的对C ...

  4. SharePoint 2013 Word 转换PDF服务介绍及示例

    前言:在SharePoint使用过程中,经常会发现将文档进行格式转换的需求,之前,看到SharePoint 2013有将PPT转换PDF文档的服务,后来,才发现SharePoint 2010开始,就有 ...

  5. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q128-Q130)

    Question  128 You are designing a SharePoint 2010 solution that includes a custom site definition an ...

  6. Android 轻松实现仿淘宝地区选择

    介绍 最近用淘宝客户端的时候,编辑地址的时候有个地区选择的功能.看上面的效果觉得挺酷,滚动的时候,是最后一个从下面飞上来挨着前一个.就自己鼓捣一个出来玩玩. 说了效果可能不太直观,下面上两张图看看效果 ...

  7. Java中 实现多线程成的三种方式(继承,实现,匿名内部类)

    ---------------------------------------------------------------------------------------------------- ...

  8. ViewController生命周期

    alloc -> initWithNibName -> loadView -> viewDidLoad -> viewWillAppear -> viewDidAppea ...

  9. ORA-00824: cannot set sga_target due to existing internal settings, see alert log for more information

    这篇文章是上篇文章”Expdp 导数错误 ORA-00832”的延续,前几天工作比较忙.累,直到今天才整理发出来.这个数据库实例的参数设置比较诡异其实是有原因的,由于这台数据库服务器系统是32位,数据 ...

  10. ORA-27125: unable to create shared memory segment

    平台环境   :  Oracle Linux Server release 5.7 x86_64 数据库版本 :  Oracle Database 10g Enterprise Edition Rel ...