在Javascript中对非矩形形状创建斜角效果
我想在(非矩形)形状(在canvas元素中)创建斜角效果.搜索了几乎整个互联网:到目前为止没有运气.寻找建议.在我耗尽所有现有可能性之前,我不想自己实施斜角效果.目标浏览器是Chrome.
这是没有应用斜角的图像,以及具有我正在寻找的效果的图像.这是在Photoshop中完成的:
编辑:我和MarkE的建议纠缠在一起.阴影偏移方法的两个问题是:
1) 必须绘制一个边界,这是我不想要的.
2) 边框的厚度决定了阴影的强度.
我不希望边框可见,所以我需要一种尽可能小的边框,然后切出边框的方法.截至目前,这涉及许多不同的步骤:
1) 首先,我创建一个具有透明填充颜色,边框和轻微阴影(具有(0,0)偏移)和模糊1的形状.然后我将形状绘制到自身上以增加阴影的不透明度.
2)然后,我创建一个具有透明填充颜色,边框和阴影的形状,如markE所述.我将lineWidth设置为一个非常小的数字 - 例如.5.我将(1)中的形状应用到此形状(通过globalCompositeOperation = 'destination-out')上,然后将形状绘制在自身上3次,以增加阴影的不透明度.
3)然后我绘制正常的形状,没有边框.我将(2)应用到正常形状上并再次切割与(1)使用的形状边界globalCompositeOperation = 'destination-out'.
结果如下:
问题首先 - 斜角效应如何起作用？
你可能会说斜面效果也是你的平面2d图像的3d,它确实存在(好吧,就像对象被照亮的方式).
基本上,着色计算就像在一些实际的3d对象上完成一样,但由于你只有2d图像,你还需要一些称为 - 法线贴图的东西.
法线贴图是2d图像,其代替图像中的颜色,在RGB通道中编码表面法线信息.因此,图像中的每个像素都具有RGB分量,R通道用于x方向的表面法线,G用于y方向的法线,B用于法线的z轴分量.
了解更多关于法线贴图这里.
另一种选择是使用凹凸贴图.这是一个图像,而不是像素的颜色或关于法线的信息,保存有关像素的"高度"的信息.
了解更多关于凹凸贴图这里.
无论您是凹凸贴图还是法线贴图,结果都非常相似.凹凸贴图在图像中只有一个通道(灰度图像),因此它们更容易制作,并且往往更"逼真",但它取决于您追求的效果.
这是方形图像上斜角效果的凹凸贴图示例.
问题是图像通常具有不均匀的形状(如您的示例),那么如何为这些图像创建凹凸贴图？
解决方案是创建一个称为" Eucledian Distance Matrix "的东西.
EDM广泛用于Photoshop中,它们可以保存某些像素远离图像的信息(图层上最近的彩色像素).EDM用于抚摸对象和斜角效果.(有很多资源可以生成EDM)
因此,在第2行和第2列中仅有像素着色的4x4图片的EDM示例将如下所示.
1 1 1 2
1 0 1 2
1 1 1 2
2 2 2 3
使用EDM,您可以获取信息在图像"内部"有多少像素,然后根据该信息生成凹凸贴图.
if (isInside(x,y))
if ( dist = innerDistanceAt(x,y) < bevelWidth )
bumpMap[x][y] = dist/bevelWidth;
else
bumpMap[x][y] = 1.0;
这段代码只是一个伪代码的例子,但你应该明白这个想法.
所以我们现在已经制作了凹凸贴图,是时候计算光照(做阴影)了.
有很多可以使用的着色模型 - 列表.而且这里的视觉差异更大 - 链接.
我将从Lambert模型开始.你可以找到很多关于它的资源.
通常,您需要曲面法线(或凹凸贴图,然后可以从中计算曲面法线(使用微分))和光矢量.根据该信息和漫反射颜色(在这种情况下,图像中的像素颜色),您可以计算该像素的亮度,然后输出着色像素.
我没有发布很多工作代码,因为笔画效果和斜角效果非常复杂,但你应该明白这个想法.这就是他们"真正"在照片编辑软件中的工作方式,正如您所看到的,它并不那么容易.
如果您有任何疑问,请随时提出.
关于斜角效果的随机链接 - 这里.