我们可以使用fabric js改变画布的形状吗

Question

我想在衬衫里面添加对象，默认情况下画布是方形的 我怎样才能制作这种类型的画布？ 我尝试过使用 css 它只会改变形状，但画布的功能仍然像正方形一样。

Answer 1

看看这个：https://ourcodeworld.com/articles/read/1016/how-to-create-your-own-t-shirt-designer-using-fabricjs-in-javascript

如果您阅读博客文章并查看最后一个演示，您会发现它会在图像上使用填充来裁剪图像。但这不是完美的像素。为了做到这一点，请阅读以下内容

Pixel Perfect Shape Cropped Canvas

1. 我们可以将画布剪裁成我们想要的形状。这将隐藏画布的其余部分。
   参考：Fabric.js Clip Canvas (or object group) To Polygon
2. 现在您将面临另一个问题，即您的控件也被剪裁了，这让用户体验很糟糕。
3. 解决方案是使用canvas.controlsAboveOverlay = true;

创建自定义 svg 图片

有两种方法

1. Google 并下载您需要的 svg 图片。
2. 使用Figma，您可以使用钢笔工具创建自定义对象并将其导出为 svg。

提示：使用 figma 插件 Image tracer 从图像中提取 svg。