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

Question

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

同样在http://fabricjs.com/dynamic-patterns/调整图案的角度时，它从图像/画布的左上角开始..任何方式从画布的中心做到这一点（所以哈巴狗旋转中心，不会被切断）

Answer 1

  

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

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

patternSourceCanvas.add(img);

使用：

patternSourceCanvas.add(yourShape);

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

  

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

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

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