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的渐变画刷,这些画刷改变不同DrawingBrush对象的几何图形,创建渐变为不同形状的平铺模式。 下面是来自一个国外的一些渐变画刷案例: 案例1:定义一个简单的直线,这个几何图形是基于Draw...
  • lovegonghui
  • lovegonghui
  • 2017年01月18日 09:00
  • 765

WPF渐变背景

  • how0723
  • how0723
  • 2017年06月03日 20:59
  • 303

WPF 圆形按钮 渐变色

WPF 按钮:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x...
  • youqingyike
  • youqingyike
  • 2015年07月31日 14:19
  • 2062

GDI+学习记录(15)-路径渐变画刷

同线性渐变画刷相比,路径渐变画刷的最大特点在于:线性渐变画刷的渐变方向比较单一(水平,垂直,固定角度),而路径渐变画刷的渐变方向是从路径中央到路径边缘,是一种呈发散状的渐变,所以在使用路径渐变画刷填充...
  • Keep_Silence_
  • Keep_Silence_
  • 2012年10月29日 13:37
  • 3121

wpf 文字颜色渐变和阴影 cs代码

LinearGradientBrush brush = new LinearGradientBrush(); GradientStop gradientStop1 = new...
  • w18767104183
  • w18767104183
  • 2013年04月09日 09:35
  • 2456

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

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

WPF 中以相对路径引用资源所出现的异常

0. 在类型为WPF项目工程文件夹中创建一个名为“Icon”文件夹,并在该文件夹中添加“flow-c0.png”文件,并确保该文件的“Build Action”为“Resource” 1 . 在win...
  • cheqingjun
  • cheqingjun
  • 2011年06月29日 13:34
  • 1196

wpf 分别用 xaml 和后台代码实现 色彩渐变

xaml 方法:
  • a771948524
  • a771948524
  • 2013年07月14日 09:49
  • 1798

WPF 绝对路径与相对路径

用于在后台设置图片路径,这只是其中一种 QQdegluimg.Source = new BitmapImage(new Uri("\\img\\QQDL.png", UriKind.Relative...
  • qq_35491254
  • qq_35491254
  • 2016年12月07日 09:24
  • 1002

WPF 中资源路径的问题

WPF 中资源路径的问题 分类: .net WPF2011-12-26 21:31 2460人阅读 评论(1) 收藏 举报 wpfactionschemebuildoutputst...
  • Metal1
  • Metal1
  • 2014年11月26日 12:03
  • 2698
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF中两条路径渐变的探讨
举报原因:
原因补充:

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