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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

【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金亚东看来,传统企业面向产业互联网转型有两条路径,第一个路径就是像鹰一样去构建平台,还有一...

wpf自定义创建图例2(渐变式)

在创建图例时,有时需要绘制渐变色的图例,这样需要先用PS调出一个渐变色图片,通过工具获取到渐变色值设置,然后通过wpf创建图例,加载图片资源标记颜色对应值 wpf前端代码: <Window...

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

WPF的渐变画刷,这些画刷改变不同DrawingBrush对象的几何图形,创建渐变为不同形状的平铺模式。 下面是来自一个国外的一些渐变画刷案例: 案例1:定义一个简单的直线,这个几何图形是基于Draw...

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

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

WPF径向渐变画刷例子

  • 2012-07-03 13:37
  • 43KB
  • 下载

UIKit和Core Graphics绘图——构造路径,阴影以及渐变扩展

构造路径 通常,一系列点组合一起构成一个形状,而若干个形状组合在一起可以构造一个路径,路径可以规则也可以不规则,随意组合。通过Core Graphics很容易管理路径。 主要用到的函数或方法:...

wpf 渐变画刷BitmapEffects

  • 2011-08-09 13:15
  • 929B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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