总目录：http://blog.csdn.net/iloveas2014/article/details/38304477

3.2.6 渐变滤镜模拟简易等高线

      等高线是Photoshop精华中的精华，在第2章我们就已经初步领略到它的强大之处了。不过在上一节，我们就有意无意地在Flash IDE里的渐变发光滤镜中看到了等高线的身影（图 3.76）。
 

图 3.76 利用渐变发光模拟出来的等高线效果

      下面我们就试着从表象去探索等高线的一些规律。

      首先重温一下之前在Photoshop里设置过的几种极端投影等高线效果（图 3.77~图 3.80）。
 

图 3.77 等高线输出恒为100%

图 3.78 等高线输出恒为0%

图 3.79 等高线输出恒为50%
 

图 3.80 对线性等高线进行反相操作

      可以看到，等高线在投影样式里影响到的是alpha值，纵坐标（在Photoshop里称作“输出”）代表alpha（最低点为0，最高点为100%），而横坐标（在Photoshop里称作“输入”）代表该点到原始图形轮廓，横坐标的左侧是投影的外边缘，而右侧代表的是模糊区域的内边缘，也可以粗略认为与原始图形轮廓的交界处，而原始图形的alpha则等于等高线最右侧点的值。取得这个值以后再乘以投影不透明度75%，便得出最终输出的alpha。

      此处我暂不能给出严格的数学证明，但至少这一推测可以较完美地解释几种极端情况。

      图 3.81用图解的方式说明了图 3.80中等高线与alpha的关系。在图 3.77中，等高线的纵坐标恒为100%，所以整个阴影的alpha都等于100%，自然就看不到淡出效果了。而图 3.78的等高线，因为纵坐标恒等于0，所以整个阴影的alpha都为0%，投影被彻底隐藏掉了。

      当然，等高线的效果还受大小，扩展等参数的影响，以上仅仅是理想模型下得出的结论，当外部条件增多，干扰因素变得复杂之后，等高线的效果将会更加丰富，输入输出关系也不再像以上几种极端情况那么简单。所以我将在后续章节对等高线算法进行更深入的探讨。

图 3.81 等高线作用方式图解

      渐变发光的alpha也反映了模糊区域的alpha渐变，而且alpha反向和等高线反向也都产生了极其相似的变化，如此惊人的巧合，是否意味着我们可以直接用渐变发光的alpha来模拟出等高线来呢？

      先尝试模拟图 3.77~图 3.80里的等高线（图 3.82~ 图 3.85）。由于Photoshop的投影默认alpha是75%，所以每个点的alpha值都要乘以0.75。
 

图 3.82 左右两侧alpha都等于75%的渐变发光
 

图 3.83 左右两侧alpha都等于0%的渐变发光

图 3.84 左右两侧alpha都等于37.5%的渐变发光

图 3.85 左侧alpha=75%，右侧alpha=0%的渐变发光

      如果不拘泥于细节，我们对这几种等高线的模拟可以说是相当的成功，读者可以自行跟Photoshop的效果作一下对照。

      下面我们尝试用渐变发光模拟两条稍复杂的等高线。

      图 3.86是一条包含了多个转角点的折线，在Flash里，可以通过添加渐变点的方法实现，渐变点（位置，alpha值）的列表如下：

      （0%，0%），（25%，50%），（50%，0%），（75%，50%），（100%，0%）
 

图 3.86 节点较多的折线型等高线

      在Flash里，纵坐标（即alpha）需要都乘以0.75，得到的效果如图 3.87所示，边缘出现了误差，可以通过更改品质修正此问题，但会导致色彩变淡。

图 3.87 用Flash模拟锯齿状等高线效果

      对于折线型的等高线，Flash尚可勉强胜任（主要是边缘效果不佳）。下面再尝试模拟一条平滑的曲线（图 3.88）。
 

图 3.88 Photoshop的曲线型等高线

      若按折线型等高线的方式去模拟，其结果必然不正确，但我们照样去测试一把。先把坐标点记录下来：（0%,100%），（21%,39%），（38%,42%），（70%,60%），（100%,0%）。

      这些点在Flash IDE里很难精准地定位，不过幸好渐变条在设置了透明点之后会透出一个20*4的网格，所以可大致认为一格=5%。

      把所有纵坐标都乘以75%以后设置到Flash发光滤镜的渐变条，效果如图 3.89所示。
 

图 3.89 用Flash模拟平滑的等高线

      误差相当的大，等高线清晰的纹理线条出现了明显的模糊，因为Flash两个点之间只能做线性匀速的渐变（这一点我会在后续的章节给出强而有力的证明），所以，如果我们把Photoshop里的每个点都转为“边角”，那么Photoshop等高线跟Flash模拟出来的结果就会很接近了，只是边缘的模糊会比Flash的柔和一些。（图 3.90）。
 

图 3.90 平滑曲线转锯齿后的效果

      那Flash对于平滑曲线型的等高线就束手无策了吗？非也，曲线实际上也是点的集合，只要取的点足够多，折线也会无限接近曲线，在10像素的模糊区域内，我们只要在Photoshop的等高线上均匀地取出11个点（每隔10%取一点，通过点击曲线生成，图 3.91），并设置到Flash的渐变条上，就同样能取得比较满意的结果，只是Flash边缘粗糙的诟病还在。（图 3.92）

图 3.91 在Photoshop的等高线上取点

 
图 3.92 把取到的点应用到Flash中

      虽然只取了10个点，但这一过程已经很费劲儿了，如果模糊值再大一些，这种转换的工作量还真不敢想象，而且Flash里面查看单个点的透明度比较麻烦，又不能统一更改（实际上可以绕个圈子来解决这一问题），如果Photoshop里整个投影的不透明度需要调整，那Flash就得逐一去修改每个渐变点的alpha值，非常的不方便。再者，如果遇到如图 3.93的边角&曲线混合的等高线，想必就更让我们崩溃了。

图 3.93 边角与平滑共存的等高线

      至于不平滑的问题，看看图 3.94的实例就知道了——等高线的变换实际上不仅仅是一条曲线那么简单。
 
      图 3.94 尽管等高线最外侧全不透明，但模糊值较大时，边缘仍有模糊过的痕迹。

      但无论如何，我们还是很庆幸的看到Flash模拟Photoshop等高线的一些曙光，尽管Flash渐变发光滤镜在复杂等高线方面的表现力跟Photoshop仍存在一定的差距，而且投影还仅仅是等高线一个很简单的应用，但我相信，只要能深入剖析Photoshop等高线的构成和原理，Flash等高线的问题便可迎刃而解。

ActionScript3游戏中的图像编程（连载五十五）