在WPF中自定义你的绘制（四）

zoukankan html css js c++ java

在WPF中自定义你的绘制（四）

                                  在WPF中自定义你的绘制（四）
                                                              周银辉

1，利用路径绘制图形（PathGeometry）
有时我们需要绘制的图形可能很复杂而显得不是那么的规则，这时我们就需要将图形分解成若干小的部分（分解成线段、圆弧、贝塞尔曲线等等），然后将这些小部分使用PathGeometry组合在一起实现最终的绘制。
一个PathGeometry对象有若干个PathFingure对象组成并保存在其Fingures属性中，一个PathFingure对象有若干个PathSegment对象组成并保存在其Segments属性中，而PathSegment则表示一些最基本的曲线和线段。继承了PathSegment的类主要有：LineSegment直线段，ArcSegment弧线段，BezierSegment贝塞尔曲线段等。反过来说，我们由一些基本的曲线和线段相互连接而组成PathFingure（可以看着一个独立的子图形），然后我们再由若干个PathFingure构成最终的复杂图形。
参考如下代码：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Path Stroke="Black" StrokeThickness="1">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="100,50" >
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <LineSegment Point="200,50" />
                                    <LineSegment Point="150,100" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Page>

在上面的代码中，我们定义了一个图形，它由一个PathFingure组成，改PathFingure的起点是（100，50），假设我们使用一支笔来绘制该PathFingure，那么我们现在得将笔头移动到点（200，50），在起点和该点之间绘制一个LineSegment，然后将笔头移动到（150，100），在上一次绘制的终点即（200，50）和改点之间绘制一个LineSegment，便得到了下图中的图形：

之所以会产生这样的结果，请注意理解这句话“我们由一些基本的曲线和线段相互连接而组成PathFingure（可以看着一个独立的子图形）"。我们有权利选择这样的相互链接的曲线是否闭合（即将起点和终点用直线段连接起来），我们只需要将PahtFigure的IsClosed属性设置为True或False就可以了。如果我们将上面代码中的<PathFigure StartPoint="100,50" >
修改为<PathFigure StartPoint="100,50" IsClosed="True" >，那么将会得到如下图形:

就这样，我们使用多个PathFigure分别负责图形中的子图形并选择合适的颜色与填充方式，就可以绘制出最终的复杂图形，你能相信下面这么漂亮的图形就是这样绘制出来的吗？

你可以粘贴下面的代码到XamlPad到查看：

上面复杂图形的代码

你会发现上面的代码中，有许多这样的片段：
Data="F1 M 10.1172,19.4509L 1.5,21.2192L 1.5,40.5689L 10.231,42.0653L 10.1172,19.4509 Z "
这其实是描述PathGeometry所包含的数据的更轻量级的表示形式
你可以在MSDN的path markup syntax节找到解释

查看全文

相关阅读:
ES6 新特性
 基于.NET平台常用的框架整理
 你可能不知道的一些JavaScript 奇技淫巧
 js中apply方法的使用
 数据库中字段类型对应C#中的数据类型
 C# Socket SSL通讯笔记
 Media Types
JS使用模板快速填充HTML控件数据 --- 自己写组件(0)
FastDFS的配置、部署与API使用解读（8）FastDFS多种文件上传接口详解
 FastDFS的配置、部署与API使用解读（7）Nginx的FastDFS模块

原文地址：https://www.cnblogs.com/zhouyinhui/p/826542.html