javascript - 在 Fabric.js 中创建 Blob 或条状图案

Question

我想用 Blob 或条纹图案填充多边形。 我可以找到很多使用图像作为图案的示例，但不能找到其他形状或多边形

也在 http://fabricjs.com/dynamic-patterns/当您调整图案的 Angular 时，它会从图像/ Canvas 的左上角进行调整。任何方法都可以从 Canvas 的中心进行调整(这样哈巴狗就会围绕中心旋转并且不会被切断)

Answer 1

I can find plenty of examples using an image as a pattern but not other shapes or polygons.

使用相同的dynamic patterns demo ，您只需要替换:

patternSourceCanvas.add(img);

与:

patternSourceCanvas.add(yourShape);

..确保 Canvas 具有正确的尺寸。正如您所看到的，Fabric 可以使用整个内存 Canvas 来渲染图案，因此您添加到该 Canvas 上的任何内容(包括 SVG 形状或简单形状或其他形状)都将用作图案。

.. when you adjust the angle of the pattern it does it from the top left corner of the image/canvas

如果将 originX/originY 更改为“center”，哈巴狗的图像应围绕其中心旋转:

img.scaleToWidth(100).set({
  originX: 'center',
  originY: 'center'
});