javascript - 在 Fabric.js 中创建斑点或条纹图案

Question

我想用斑点或条纹图案填充多边形。我可以找到很多使用图像作为图案而不是其他形状或多边形的示例

同样在http://fabricjs.com/dynamic-patterns/中，当您调整图案的角度时，它会从图像/画布的左上角进行调整。任何从画布中心进行的方式（所以哈巴狗围绕中心旋转并且不会被切断）

Answer 1

我可以找到很多使用图像作为图案而不是其他形状或多边形的示例。

使用相同的动态模式演示，您只需要替换：

patternSourceCanvas.add(img);

和：

patternSourceCanvas.add(yourShape);

..确保画布具有适当的尺寸。如您所见，Fabric 可以使用整个内存画布来渲染图案，因此您添加到该画布上的任何东西（包括 SVG 形状或简单形状或其他任何东西）都将用作图案。

..当您调整图案的角度时，它会从图像/画布的左上角进行

如果将 originX/originY 更改为“center”，pug 的图像应该围绕它们的中心旋转：

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