WPF中两条路径渐变的探讨

原创 2007年09月18日 22:39:00

我们在WPF中,偶尔也会涉及到两条路径作一些“路径渐变 ”。

先看看比较简单的情形:
如下图(关键点用红色圆点加以标识):
路径渐变PathBlending
(图1)

上面图1中的第1幅图可以说是最简单的路径渐变了,它由两条直线为基础,中间以插值方式作了两条直线间的渐变(插入路径数量为8,加上原始两条直线,最终共得到10条直线)。

图1中的第2幅图是将第1幅图中的右边直线从中间折起(我们称之为“拐点”),然后以此两路径(一条直线,一条折线)为基础,同样插入渐变路径条数为8,共得到10条路径,我们看到,由于拐点的作用,中间的八条路径逐渐呈现不同的拐角的折线。

图1中的第3幅图则是将第2幅的拐点变成了平滑弯曲的曲线(我们称之为“贝塞尔曲线”,关键点使用红圆点标识,贝塞尔控制点使用蓝色小圆点标识并用蓝色细线连接起来),同样插入渐变径径的条数为8,最终得到10条路径。我们发现,中间的渐变线也渐变成平滑曲线。

现在的问题是,如何实现两条给定路径的渐变呢?此问题亦可理解为:如何找到渐变线中的路径关键点及贝尔塞曲线控制点的坐标及相关点的类型(是直线拐点,中间关键点,或者是贝塞尔曲线的控制点)?

再来看看更复杂的情形:

下图2是两条曲线路径(一条红色曲线,一条是黑色曲线),我们将要说说以它们为基础的渐变。

两条曲线路径
(图2)


 下图3是两条路径渐变后的结果(插值路径数量为2):

PathBlending_Blent
(图3)


为了更清晰地示意,下图4特别标示出了路径关键点(红点圆点)及贝塞尔曲线控制点(蓝色小圆点及细线)。

带关键点的路径渐变示意图
(图4)


路径渐变分析图
(图5  可以确定的是:两条路径的首/尾点渐变时得到的中间点也在两首/尾点的连接直线上并且呈均匀分布,如上图的①②、③④所示,其他的关键点/控制点则需要根据两条路径及渐变插值数量而变化)

之所以说图2至图4复杂,是因为不仅有线的形状渐变(注意两条路径的关键点的个数也是不一样的,红线为4个关键点,黑线为5个关键点),还有颜色的渐变(从红色变成为黑色)。

至此,如何找到多关键点、多控制点渐变的算法以及颜色如何进行渐变都成了新问题。

此问题解决了,下面这种更复杂的效果也就迎刃而解了:
复杂曲线的渐变效果
图5 复杂曲线的渐变效果

先抛出问题,各位可以发表意见。

最后贴上图2,图3的XAML代码:

图2的XAML代码:
<Viewbox Width="459.847656" Height="184.886719"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="459.847656" Height="184.886719">
<!-- 红色部分路径 -->
  <Path StrokeThickness="1.000000" Stroke="#fffa0e0b" StrokeMiterLimit="1.000000" Data="F1 M 0.295898,66.248535 C 0.295898,66.248535 44.894531,33.529785 68.517578,66.316895 C 92.140137,99.104004 197.243164,206.331055 274.625000,133.188477 C 366.679688,46.227051 378.309570,2.718750 459.714844,25.067383"/>
<!-- 黑色部分路径 -->
  <Path StrokeThickness="1.000000" Stroke="#ff000000" StrokeMiterLimit="1.000000" Data="F1 M 10.119141,108.246094 C 10.119141,108.246094 53.936523,18.998535 136.617188,66.040527 C 167.621582,83.681641 183.833008,147.156250 219.471191,166.218750 C 278.868164,197.991211 354.396484,184.117188 377.431641,155.072266 C 417.988281,103.937500 380.077148,13.126953 443.849609,0.490234"/>
</Canvas>
</Viewbox>

图3的XAML代码:
<Viewbox Width="459.847656" Height="184.885742"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="459.847656" Height="184.885742">
<!-- 红色部分路径 -->
  <Path StrokeThickness="1.000000" Stroke="#fffa0e0b" StrokeMiterLimit="1.000000" Data="F1 M 0.295898,66.248535 C 0.295898,66.248535 44.894531,33.529785 68.517578,66.316895 C 92.140137,99.104004 197.243164,206.331055 274.625000,133.188477 C 366.679688,46.227051 378.309570,2.718750 459.714844,25.067383"/>

<!-- 渐变部分路径(两条) -->
  <Path StrokeThickness="1.000000" Stroke="#ffa53d2c" StrokeMiterLimit="1.000000" Data="F1 M 3.570313,80.247559 C 3.570313,80.247559 37.239258,49.992188 64.153320,64.566406 C 77.456543,71.770020 104.818848,89.162598 138.143066,109.947266 C 176.041016,133.784180 213.795410,160.521484 256.240234,144.198242 C 298.073242,128.110352 340.344727,110.023438 361.418945,87.477051 C 396.536133,49.690430 399.673828,11.891602 454.426758,16.875000"/>
  <Path StrokeThickness="1.000000" Stroke="#ff523930" StrokeMiterLimit="1.000000" Data="F1 M 6.844727,94.247070 C 6.844727,94.247070 32.607910,68.570313 59.788574,62.816406 C 76.693848,59.237793 103.965820,67.975586 137.380371,87.994141 C 171.875000,108.659180 201.500000,143.897461 237.855469,155.208984 C 287.819336,170.753906 347.370117,147.070313 369.425781,121.274414 C 407.261719,76.813965 389.875977,12.509277 449.137695,8.682617"/>

<!-- 黑色部分路径 -->
  <Path StrokeThickness="1.000000" Stroke="#ff000000" StrokeMiterLimit="1.000000" Data="F1 M 10.119141,108.246094 C 10.119141,108.246094 53.936523,18.998535 136.617188,66.040527 C 167.621582,83.681641 183.833008,147.156250 219.471191,166.218750 C 278.868164,197.991211 354.396484,184.117188 377.431641,155.072266 C 417.988281,103.937500 380.077148,13.126953 443.849609,0.490234"/>
</Canvas>
</Viewbox>

WPF 坑系列之一 颜色渐变动画

WPF 坑系列之一 颜色渐变动画坑 动画对象不能用于动画属性“BorderBrush”,因为它是不兼容的类型“System.Windows.Media.Brush” ...

[各种面试题] 两条路径的最大收获

题目不太记得清了,大意是有个MXN的棋盘,然后每个格子上有一个价值,需要从左上角走到右下角再走回来,但每个格子只能走一次,请问来回的最大收获是多少。 找了个NOIP的原题: 题目链接: http:...

【Codeforces Round 336 (Div 2) E】【KMP 构造 脑洞 好题 模拟找规律】Marbles 两条路径同时出发前后行走能否恰好同时到终点

E. Marbles time limit per test 2 seconds memory limit per test 256 megabytes input ...

揭示自然语言数字化的两条路径(前者是美国人开辟的;后者是本人中国人开辟的)

过去和现在流行的做法就是美国人开辟的自然语言数字化的第一条路径,其特点是数字计算机人机交互的过程在本质上是就低(机器语言)不就高(日常语言),其理由就是因为后者存在多义性而计算机不能直接处理这种多义造...

去一个网段用静态路由怎么走两条路径

路由就是把信息从源传输到目的地的行为。形象一点来说,信息包好比是一个要去某地点的人,路由就是这个人选择路径的过程。而路由表就像一张地图,标记着各种路线,信息包就依靠路由表中的路线指引来到达目的地,路由...

传统企业向产业互联网转型的两条路径

 亚信CTO金亚东:传统企业向产业互联网转型的两条路径       摘要:在亚信CTO金亚东看来,传统企业面向产业互联网转型有两条路径,第一个路径就是像鹰一样去构建平台,还有一...

深度优先搜索 Tarjan算法 两条不相交的路径

题目:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1076 转载出处:https://www.byvoid.com/...
  • wwwlps
  • wwwlps
  • 2017年11月10日 11:20
  • 21

WPF径向渐变画刷例子

  • 2012年07月03日 13:37
  • 43KB
  • 下载

WPF [调用线程无法访问此对象,因为另一个线程拥有该对象。] 解决方案以及如何实现字体颜色的渐变

Window x:Class="MyWPFApp.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/pre...

WPF中的渐变画刷的一些案例

WPF的渐变画刷,这些画刷改变不同DrawingBrush对象的几何图形,创建渐变为不同形状的平铺模式。 下面是来自一个国外的一些渐变画刷案例: 案例1:定义一个简单的直线,这个几何图形是基于Draw...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF中两条路径渐变的探讨
举报原因:
原因补充:

(最多只允许输入30个字)