如何将边框添加到 polygon/round 形状的图像

Question

我们正在构建传送带的形状，有什么方法可以为图像创建 圆形边框 吗？下面的图像是 png 文件，在所选图像周围有方形边框。在搜索时，我们从 link

中找到了这段代码

CSS Border on PNG image with transparent parts

img{
    -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
    filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}

有没有办法给canvas中的图片添加阴影？请帮助我们提供相关代码和建议。

Answer 1

我通过属性 shadow 和 strokeWidth（在 css 中通过添加阴影）做到了这一点。这样图像就会像这样。

item.strokeWidth = 15;               
item.shadow = new fabric.Shadow({color:'red',blur:15,affectStroke:true});

当前输出：

如果有人有更好的解决方案，请集思广益。

如何将边框添加到 polygon/round 形状的图像

How to add border to the image as polygon/round shaped

fabricjs