WPF绘图与动画（一）

最新推荐文章于 2024-08-14 14:29:12 发布
最新推荐文章于 2024-08-14 14:29:12 发布
阅读量145 收藏
点赞数
文章标签： 人工智能
原文链接：http://www.cnblogs.com/bjxingch/articles/7845624.html
版权

　　Line：直线段，可以设置其笔触(Stroke)。

　　Rectangle：矩形，既有笔触，又有填充（Fill）。

　　Ellipse：椭圆，长、宽相等的椭圆即为正圆，既有笔触又有填充。

　　Polygon：多边形，由多条直线段围城的闭合区域，既有笔触又有填充。

　　Polyline：折线（不闭合），由多条首尾相接的直线段组成。

　　Path：路径（闭合区域），基本图形中功能最强大的一个，可由若干直线、圆弧、贝塞尔曲线组成。

 

　　日常工作中，常用的绘图容器是Canvas和Grid。

　　

　　一、矩形

　　　　矩形由笔触（Stroke，即边线）和填充（Fill）构成。Stroke属性的设置与Line一样，Fill属性的数据类型是Brush。Brush是个抽象类，所以我们不可能拿一个Brush类的实例为Fill属性赋值而只能用Brush派生类的实例进行赋值。WPF的绘图系统包含非常丰富的Brush类型，常用的有：

　　SolidColorBrush：实心画刷。在XAML中可以使用颜色名称字符串（如Red、Blue）直接赋值。

　　LinearGradientBrush：线性渐变画刷。色彩沿设定的直线方向、按设定的变化点进行渐变。

　　RadialGrandientBrush：径向渐变画刷。色彩沿半径的方向、按设定的变化点进行渐变，形成圆形填充。

　　ImageBrush：使用图片（Image）作为填充内容。

　　DrawingBrush：使用矢量图（Vector）和位图（Bitmap）作为填充内容。

　　VisualBrush：WPF中的每个控件都是由FrameWorkElement类派生来的，而FrameworkElement又是由Visual类派生来的的。Visual意为“可视”之意，每个控件的可视化形象就可以通过Visual类的方法获得。获得这个可视化的形象后，我们可以用这个形象进行填充，这就是VisualBrush。比如当我想把窗体上的某个控件拖拽到另一个位置，当鼠标松开之前需要在鼠标指针下显现一个控件的“幻影”，这个“幻影”就是使用VisualBrush填充出来的一个矩形，并让矩形捕捉鼠标的位置、随鼠标移动。

 　　二、椭圆

　　　　椭圆也是一种常用的几何图形，它的使用方法与矩形没有什么区别。正圆（Circle），Width与Height相等的椭圆既是正圆。

　　三、路径

　　　　路径（Path）可以说是WPF绘图中最强大的工具，一来是因为它完全可以替代其他几种几何图形，二来它可以将直线、圆弧、贝塞尔曲线等基本元素结合进来，形成更复杂的图形。路径最重要的一个属性是Data，Data的数据类型是Geometry（几何图形），我们正式使用这个属性将一些基本的线段拼接起来、形成复杂的图形。

　　　　为Data属性赋值的语法有两种：一种是标签式的标准语法，另一种是专门用于绘制几何图形的“路径标记语法”。

　　　　Geometry的子类包括:

　　　　LineGeometry：直线几何图形。

　　　　RectangleGeometry：矩形几何图形。

　　　　EllipseGeometry：椭圆几何图形。

　　　　PathGeometry：路径几何图形。

　　　　StreamGeometry：PathGeometry的轻量级替代品，不支持Binding、动画等功能。

　　　　CombinedGeometry：由多个基本几何图形联合在一起，形成的单一几何图形。

　　　　GeometryGroup：由多个基本几何图形组合在一起，形成的几何图形组。

 

<Window x:Class="WPFLearn.DrawAndAnimation.PathGeometry"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="PathGeometry" Height="350" Width="340">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="160"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="160"/>
            <RowDefinition Height="160"/>
        </Grid.RowDefinitions>
        <!--直线-->
        <Path Stroke="Blue" StrokeThickness="2" Grid.Column="0" Grid.Row="0">
            <Path.Data>
                <LineGeometry StartPoint="20,20" EndPoint="140,140"/>
            </Path.Data>
        </Path>
        <!--矩形路径-->
        <Path Stroke="Orange" Fill="Yellow" Grid.Column="1" Grid.Row="0">
            <Path.Data>
                <RectangleGeometry Rect="20,20,120,120" RadiusX="10" RadiusY="10"/>
            </Path.Data>
        </Path>
        <!--椭圆路径-->
        <Path Stroke="Green" Fill="LawnGreen" Grid.Row="1" Grid.Column="0">
            <Path.Data>
                <EllipseGeometry Center="80,80" RadiusX="60" RadiusY="40"/>
            </Path.Data>
        </Path>
        <!--自定义路径（最为重要)-->
        <Path Stroke="Yellow" Fill="Orange" Grid.Column="1" Grid.Row="1">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="25,140" IsClosed="True">
                            <PathFigure.Segments>
                                <LineSegment Point="20,40"/>
                                <LineSegment Point="40,110"/>
                                <LineSegment Point="50,20"/>
                                <LineSegment Point="80,110"/>
                                <LineSegment Point="110,20"/>
                                <LineSegment Point="120,110"/>
                                <LineSegment Point="140,40"/>
                                <LineSegment Point="135,140"/>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

　　　　Figures是PathGeometry的默认内容属性、Segments是PathFigure的默认内容属性，所以常简化为这样：

        <Path>
            <Path.Data>
                <PathGeometry>
                    <PathFigure>
                        <!--各种线段-->
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

　　　　LineSegment：直线段。

　　　　ArcSegment：圆弧线段。

　　　　BezierSegment：三次方贝塞尔曲线段（默认贝塞尔曲线就是指三次曲线，所以Cubic一词被省略）。

　　　　QuadraticBezierSegment：二次方贝塞尔曲线段。

　　　　PolyLineSegment：多直线段。

　　　　PolyBezierSegment：多三次方贝塞尔曲线段。

　　　　PolyQuadraticBezierSegment:多二次方贝塞尔曲线。

　　在绘制这些线段的时候需要注意，所以这些线段都是没有起点（StartPoint）的，因为起点就是前一个线段的终点，而第一个线段的起点这是PathFigure的StartPoint。

　　　　

<Window x:Class="WPFLearn.DrawAndAnimation.LineSegment"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LineSegment" Height="300" Width="300">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <Path Stroke="Green" Fill="LawnGreen" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="0,0">
                        <LineSegment Point="150,0"/>
                        <LineSegment Point="150,30"/>
                        <LineSegment Point="90,30"/>
                        <LineSegment Point="90,150"/>
                        <LineSegment Point="60,150"/>
                        <LineSegment Point="60,30"/>
                        <LineSegment Point="0,30"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

　　ArcSegment用来绘制圆弧。

　　Point属性用来指定圆弧连接的终点；

　　圆弧截取自椭圆，Size属性即是完整椭圆的横轴半径和纵轴半径；

　　SweepDirection 属性指明圆弧是顺时针方向还是逆时针方向；

　　如果椭圆上的两点位置不对称，那么这两点的椭圆就会分为大弧和小弧，

　　IsLargeArc属性用于指明是否使用大弧去连接；

　　RotationAngle属性用来指明圆弧母椭圆的旋转角度。

 

　　BezierSegment（三次方贝塞尔曲线）由4个点决定：

　　⑴ 起点：即前一个线段的终点或PathFigure的StartPoint。

　　⑵ 终点：Point3属性，即曲线的终点位置。

　　⑶ 两个控制点：Point1和Point2属性。

<Window x:Class="WPFLearn.DrawAndAnimation.BezierSegment"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BezierSegment" Height="300" Width="300">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
        <Path Stroke="Black" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,0">
                        <BezierSegment Point1="250,0" Point2="50,200" Point3="300,200"></BezierSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

　　QuadraticBezierSegment（二次方贝塞尔曲线）与BezierSegment类似，只是控制点由两个减少为一个。也就是说，QuadraticBezierSegment由3个点决定：

　　⑴ 起点：即前一个线段的终点或PathFigure的StartPoint。

　　⑵ 终点：Point3属性，即曲线的终点位置。

　　⑶ 一个控制点：Point1。

<Window x:Class="WPFLearn.DrawAndAnimation.QuadraticBezierSegment"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="QuadraticBezierSegment" Height="300" Width="300">
    <Grid>
        <Path Stroke="Black" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,200">
                        <QuadraticBezierSegment Point1="150,-100" Point2="300,200"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

　　GeometryGroup也是Geometry的一个派生类，它最大的特点是可以将一组PathGeometry组合在一起、

 　　

<Window x:Class="WPFLearn.DrawAndAnimation.GeometryGroup"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GeometryGroup" Height="300" Width="300">
    <Grid>
        <Path Stroke="Black" Fill="LightBlue" StrokeThickness="1">
            <Path.Data>
                <GeometryGroup>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <BezierSegment Point1="250,0" Point2="50,200" Point3="300,200"/>
                        </PathFigure>
                    </PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <BezierSegment Point1="210,0" Point2="50,200" Point3="300,200"/>
                        </PathFigure>
                    </PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <BezierSegment Point1="190,0" Point2="50,200" Point3="300,200"/>
                        </PathFigure>
                    </PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <BezierSegment Point1="170,0" Point2="50,200" Point3="300,200"/>
                        </PathFigure>
                    </PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <BezierSegment Point1="150,0" Point2="50,200" Point3="300,200"/>
                        </PathFigure>
                    </PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <BezierSegment Point1="130,0" Point2="50,200" Point3="300,200"/>
                        </PathFigure>
                    </PathGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Grid>
</Window>

　　路径标记语法

　　Path是如此之强大，可以让我们随心所欲地绘制图形，然而它的一大缺点也是不容忽视的，那就是其标签式语法的反锁。

　　路径标记语法实际上就是各种线段的简记法，比如<LineSegment Point=“150,5”>可以简写为“L 150,5”，这个L就是路径标记语法的一个“绘图命令”。

常用路径标记语法
命令用途语法示例对应标签式语法

分类

M移动到起始点M 起始点M 10，10<PathFigure StartPoint="0,0"/>移动命令
L绘制直线L 终点L 150,30<LineSegment Point="150,30"/>绘图命令
H绘制水平直线H 终点横坐标H 180 绘图命令
V绘制竖直直线V终点纵坐标V 180 绘图命令
A绘制圆弧

A 母椭圆尺寸

旋转角度

是否大弧

顺/逆时针

终点

A 180，80 45 1 1 150，150

<ArcSegment Size="180,180"

RotationAngle="45"

IsLargeArc="True"

SweepDirection="Clockwise"

Point="150,150"/>

绘图命令
C三次方贝塞尔曲线

C

控制点1

控制点2

终点

C 250,0 50,200 300，200 

<BezierSegment 

Point1="250,0"

Point2="50,200"

Point3="300,200"/>

绘图命令
Q二次方贝塞尔曲线

Q

控制点1

终点

Q 150，-100  300，200

<QuadraticBezierSegment

Point1="150,-100"

Point2="300,200"/>

绘图命令
S平滑三次贝塞尔曲线

S

控制点2

终点

S 100，200 200，300 绘图命令
T平滑二次贝塞尔曲线

T 

终点

T 400，200 绘图命令
Z闭合图形ZM 0，0 L 40，80 L 80，40 Z<PathFigure IsClosed="True"/>关闭命令
        <Path Stroke="Red" Data="M 0,0 C 30,0 70,100 100,100 S 170,0 200,0"/>
        <Path Stroke="Black" Data="M 0,0 C 30,0 70,100 100,100 C 130,100 170,0 200,0"/>
        
        <Path Stroke="Red" Data="M 0,200 Q 100,0 200,200 T 400,200"/>
        <Path Stroke="Black" Data="M 0,0 C 30,0 70,100 100,100 C 130,100 170,0 200,0"/>

　　　　使用Path剪裁界面元素

　　　　实际工作中经常会遇到制作不规则窗体或者控件的需求，WPF在这方面做了良好的支持，仅需使窗体或控件的Clip属性就可以轻松做到。

<Window x:Class="WPFLearn.DrawAndAnimation.ClipPath"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ClipPath" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Button x:Name="clipBtn" Click="ClipBtn_OnClick" Height="25" Content="Clip"/>
        <Path Visibility="Hidden" x:Name="clipPath" Data="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 1 55,100 Z"/>
    </Grid>
</Window>

　　

        private void ClipBtn_OnClick(object sender, RoutedEventArgs e)
        {
            this.Clip = this.clipPath.Data;
        }

　　               

转载于:https://www.cnblogs.com/bjxingch/articles/7845624.html

weixin_34234823
关注
WPF基本绘图与动画
GhostKINGC学长的笔记本
03-27 157
绘图和动画是WPF中应用于UI层面上的非常新鲜、有趣且富有创造张力的功能。XAML的图形绘制功能非常强大，WPF原生支持动画开发，精美的动画能够提升软件的美观程度，提升用户与软件交互的感知效果。这一章我们从最基本的绘图以及动画入手，初步探知并掌握简单的绘图和动画效果。
WPF学习之绘图和动画
热门推荐
星火燎猿
11-13 5万+
如今的软件市场,竞争已经进入白热化阶段,功能强、运算快、界面友好、Bug少、价格低都已经成为了必备条件。这还不算完，随着计算机的多媒体功能越来越强，软件的界面是否色彩亮丽、是否能通过动画、3D等效果是否吸引用户的眼球也已经成为衡量软件的标准。 软件项目成功的三个要素是：资源、成本、时间。无论是为了在竞争中保持不败还是为了激发起用户对软件的兴趣，提高软件界面的美化程度、恰当的将动画和3D等效果引入
WPF绘图与动画（四）
weixin_33743703的博客
11-19 89
　　WPF规定，可以用来制作动画的属性必须是依赖属性。 　　Timeline、AnimationTimeline和Storyboard 　　 　　⒈简单线性动画 　　　　所谓“简单线性动画”就是指仅由变化起点、变化终点、变化幅度、变化时间4个要素构成的动画。 　　　　　　变化时间（Duration属性）：必须指定，数据类型为Duration。 　　　　　　变化终点（To属性）...
wpf 路径动画 举例
最新发布
08-14 492
来沿着这个路径移动一个元素（比如一个矩形）。先，我们需要在XAML中定义一个。
WPF中绘画和动画
wangganggang90的专栏
11-28 1403
一、WPF的基本图形包括以下几个（它们都是Shape类的派生类）: (1)   Line：直线段，可以设置其笔触（Stroke）； (2)   Rectangle：矩形，既有笔触，又有填充（Fill）； (3)   Ellipse：椭圆，长、宽相等的椭圆即为正圆，既有笔触又有填充； (4)   Polygon：多边形，有有多条直线段围成的闭合区域，既有笔触又有填充。 (5)   Poly
WPF绘图
weixin_34249678的博客
04-14 604
添加一个绘图面板项目按右键添加类DrawingPanel using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using Syste...
WPF 绘图和动画(绘图：Shape，Path，Brush，DrawVisual；动画：高级动画，关键帧动画，动画路径，场景)
04-05
WpfDrawAnimationDemo项目很可能是包含了一系列WPF绘图和动画的示例代码，通过这个项目，你可以深入理解如何在实际应用中利用这些技术。例如，你可以找到如何创建自定义形状，使用画刷填充，以及如何实现各种动画...
WPF水波动画
08-03
WPF 是微软推出的一种强大的用户界面框架，它为开发者提供了丰富的图形渲染和动画功能。我们将主要关注三个关键概念：绘图、帧动画以及贝塞尔曲线。 首先，让我们了解一下绘图在WPF中的应用。WPF提供了多种图形元素...
WPF实现画线动画效果
10-18
WPF（Windows Presentation Foundation）是微软推出的一种用于构建Windows客户端应用...通过以上步骤，就可以用WPF后台代码实现画线动画效果，这种技术在开发诸如绘图应用、动画演示等类型的WPF应用程序时非常有用。
WPF绘图与高级动画技术实战指南
资源摘要信息: "WPF 绘图和动画" 在探讨WPF（Windows Presentation ...这些实例对学习和掌握WPF绘图和动画有极大的帮助，通过它们可以直观地理解WPF的强大绘图和动画能力，为创建丰富动态的用户界面打下坚实基础。
WPF 画线动画效果实现
guigenyi的专栏
07-15 8751
弄了将近三天才搞定的，真是艰辛的实现。 看了很多博客，都太高深了，而且想要实现的功能都太强大了，结果基础部分一直实现不了，郁闷啊~ 千辛万苦终于找到了一个Demo，打开一看，代码只有20几行，不行我非要记一笔。 说正题： 需求：一条直线（不是曲线），模范笔画一样在画布上逐渐画出来 效果：
DrawToolsWPF，ＷＰＦ绘图
06-20
DrawToolsWPF,WPF绘制，能实现绘制多个图形
wpf绘图，可绘制各种图形
04-08
WPF Visifire Charts 破解版，可以绘制各种图形
基于WPF的简单交互式画图程序，WPF画图的一个比较全的学习
01-26
基于WPF的简单交互式画图程序，WPF画图的一个比较全的学习
wpf绘图
yangRedmi的博客
06-19 1178
WPF 绘图
WPF 绘图
weixin_44574132的博客
07-07 419
说到绘图，大家是不是想到了美术呢？那讲到绘图各位肯定会想到绘图需要一定的美术功底呢。其实这里讲的不是美术的绘图哈，这里讲的是使用编程语言去绘图。当然这个也时需要编程语言基础的是吧! 这里的几何绘图其实也不是很难的，只要你能够想到的那么你就一定能够写的出来，这个说简单也不简单说不难也难。 这次要分享给大家的图形是： 直线 矩形 椭圆 多边形 多线形 那么这次我就给大家分享下...
C# WPF 画图
sf315418的博客
02-11 630
有时候我们的程序界面中需要显示一些简单的示意图，一般我们有原图的话直接嵌入我们程序就可以，但有时候我们没有原图，这时候我们不妨用代码自己画出来.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值