无缝平铺图案深度分析
现在我们来仔细分析一下刚才定义的菱形图案，为什么它能够无缝平铺呢？因为在图案最左端的1像素部分，与图案最右端的1像素部分有良好的像素承接关系。这种承接关系体现在位置和颜色上。我们可以据此来推断，用一条线段来作为图案的话：
1：线段的两个端点分别位于图案的左右边界，且处在同一水平线上，那么这条线段的平铺效果最好，首尾相连，可以形成无缝平铺。
2：线段的两个端点都没有或只有一个到达边界，那么平铺效果其次，首尾虽不能相连，却也不会产生断接感。
3：线段的两个端点分别位于图案的左右边界，但不在同一水平线上，那么平铺效果最差，因为首尾既不能相连，又产生了断接感。
分别对应下图中3种效果范例。
上面所说的第一种平铺，其实还要一种例外的可能性：如果线段穿越边界时候呈现一定的角度(常见于曲线)，那么位于分界点的两个像素(下图中的A与B)即使不在同一水平线上，却同样能够形成无缝平铺。因为它们之间的落差符合线段的走势。这样的差异通常也就是1像素到2像素的距离，再大就会产生断接感了。
除了位置，边界像素的颜色对于平铺效果也是有影响的。这常见于使用渐变色作为平铺的时候。为了使效果明显，我们使用了模拟渐变的色块，并打上颜色数字来说明问题，如下图。
如果头尾颜色相同，颜色相接会产生一个重复的区域，使得颜色1在平铺中的比例两倍于其他颜色，造成不协调。当减去其中一个后，颜色的过渡就协调了。这可以从数字的变化上看出来。
不过如果渐变图案中的颜色数量较多或所占区域较小(如颜色只有1像素宽)，这种重复的效果就不容易被觉察，也就不必过于苛求。
头尾重复的情况也会出现在动画制作中，如下图是一个顺时针旋转箭头的动画过程，每帧的停留时间为1秒。注意第1帧与第9帧的箭头角度相同，这样在播放的时候，箭头在这个角度就会停留2秒，看起来就好像顿了一下似的，造成动画的不连贯。
前面我们所制作的无缝平铺图案又称为2方连续图案，因为只考虑到了横向或竖向(所有例子旋转90度即是)平铺的需要。这样的图案在填充大面积的区域时会显得很单调。下面我们就来看看如何制作4方连续图案，这并不困难，就是把两个方向结合起来考虑而已。
在第一个菱形的基础上，我们再创建一个30%左右的小菱形渐变，按照前面相同的手法处理成如下左图的样子。尽管很简陋，但这就是一个真正的4方连续图案了。平铺效果如下右图。
在制作这个图案的时候，大家最感到没有把握的就是让菱形在边界正好保留一半大小，这个过程中稍有误差就会造成平铺图案断接。所幸菱形具有很明显的棱边可提供视觉参考。但对于一些其他的形状就未必能够准确把握了。
(责任编辑：luwei) | 
精彩生活 
