首页 技术 正文
技术 2022年11月24日
0 收藏 579 点赞 4,299 浏览 1688 个字

今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现.

北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 以一种巧妙的思路实现了这个效果 使大家受益匪浅

本来这篇博客应该由雷叔来写的,奈何雷叔忙着写教材,就委托我来写了.

我之前也总结过两种方法,再加上雷叔这第三种方法,一起写出来,分享给大家.

像画笔一样慢慢画出Path的三种方法(补充第四种)

方法1

这种方法是最容易想到的,但是局限性也比较大,只适用于接近直线的这种Path.但是相对的代码比较简单,也适用于动态生成Path的这种情况.仿Echarts地图用的就是这种方法.

思路:不管什么样的Path,最终整个控件其实都是一个矩形.实现这个效果就是给Path控件的透明掩码(OpacityMask)一个线性渐变画刷(LinearGradientBrush),把标识不透明度的节点用动画从一个方向推向另一个方向(DoubleAnimation控制GradientStop.Offset由0到1).

需要注意的也只是推的方向,是从左上角推向右下角,还是从右上角推向坐下角……等,那几种情况.实质就是根据Path起点和终点的坐标判断改怎样设置画刷的StartPoint和EndPoint.总结了一个方法,直接上代码吧.

             //path的起点和终点
Point startPoint = figure1.StartPoint;
Point endPoint = arc1.Point;
//画刷的起点和终点,默认从左上角推向右下角,也就是X方向从左向右推,Y方向从上向下推
Point start = new Point(, );
Point end = new Point(, );
if (startPoint.X > endPoint.X)
{
//如果path起点的X大于终点的X,就说明起点在右边,需要从右向左推
start.X = ;
end.X = ;
}
if (startPoint.Y > endPoint.Y)
{
//如果path起点的Y大于终点的Y,就说明起点在下边,需要从下向上推
start.Y = ;
end.Y = ;
}

方法2

这种方法也很容易想到,能解决第一种方法解决不了的图形,缺点是计算相对复杂,需要有几何功底.

思路:计算出每个时刻path的终点,用帧动画或计时器直接去修改path对象.

例子比较简单了,就是个圆形.知道圆形的公式就可以了

圆心o(a,b)
(x-a)^2+(y-b)^2=r^2
x=a+r*cosθ
y=b+r*sinθ

需要注意的是几何的坐标系和wpf的坐标系不一样,wpf的坐标系是左上角是(0,0),向右X++,向下Y++.只需要把几何坐标系角度逆时针旋转90度就可以了.

具体看程序里的代码吧,比较直观.

方法3

这才是本文的重点,是雷叔提供的奇思妙想.不得不佩服雷叔扎实的基本功.感觉雷叔像邓肯,大基本功,不华丽,却是灵魂的所在.

思路:给path设置虚线,通过动画控制虚线的Offset来实现这个效果.把虚线的实线部分和虚线部分都和path设置的一样长,然后Offset也设置成path的长度,这就相当于path这显示的是虚线部分,实线部分刚好被挤出去.动画控制Offset变成0就可以了.

这么说可能比较抽象,上个图吧.

像画笔一样慢慢画出Path的三种方法(补充第四种)

这样的话,在前台就能搞定任意静态的path了.

当然了,如果是动态的path还是需要求周长.然而这并不容易.还请各路高手指点.

源码下载: 像画笔一样慢慢画出Path.rar

方法4

额外补充第四种方法吧.不是我的,详见 http://www.cnblogs.com/tong-tong/archive/2012/10/19/2730825.html

大概意思就是给个一样的Sengment,通过点动画 PointAnimation,PointAnimationUsingPath 控制终点坐标.但是这种方法不能画贝塞尔曲线节点,因为控制的点多于一个.

上面提到的这个群是个wpf交流群,真心不错.我在这里进步很大,直接从菜鸟变得不怎么菜鸟了.推荐给大家.

群号码:152049269 欢迎各位萌新,菜鸟,高手,大神加入.分享心得,共同进步

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141992.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站