在Fabric.js中創建斑點或條紋圖案

Question

我想用斑點或條紋圖案填充多邊形。 我可以找到很多使用圖像作為圖案的示例，但沒有其他形狀或多邊形的示例

同樣在http://fabricjs.com/dynamic-patterns/中，當您調整圖案的角度時，它會從圖像/畫布的左上角開始進行操作。任何從畫布中心進行操作的方法（因此哈巴狗繞着中心旋轉並且沒有被切斷）

Answer 1

我可以找到很多使用圖像作為圖案但沒有其他形狀或多邊形的示例。

使用相同的動態模式演示 ，您只需替換：

patternSourceCanvas.add(img);

與：

patternSourceCanvas.add(yourShape);

..確保畫布具有適當的尺寸。 如您所見，Fabric可以使用整個內存中的畫布來渲染圖案，因此您添加到該畫布上的任何內容（包括SVG形狀或簡單形狀等）都將用作圖案。

..調整圖案的角度時，它從圖像/畫布的左上角開始

如果將originX / originY更改為“中心”，則哈巴狗的圖像應繞其中心旋轉：

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