FabricJS clippath 邊框顏色並將疊加圖像移動到 clippath 后面？

Question

我正在嘗試使用 fabricJS 在 canvas 上添加剪輯路徑區域（矩形對象）。 目前我將 Overlay Image 設置為 canvas，除此之外我還添加了 clippath 區域來放置對象。 我成功地將 object 放置在剪輯路徑中，但問題是我將它放置在剪輯路徑中的任何圖像都具有不透明度（意味着 object 也具有透明度），我知道是因為我將透明圖像設置為疊加層，它始終位於其他 object 之上。

我的查詢是

1. 我可以單獨設置剪輯路徑區域以忽略疊加嗎？ 或者至少設置像剪輯路徑這樣的首選項是第一優先級和下一個覆蓋？
2. 目前 clippath 沒有邊框，我不知道 clippath 在哪里？ 那么有沒有辦法在剪輯路徑區域上設置邊框？

這是我下面的代碼

HTML

<canvas id="ex8" width="300" height="400"></canvas>

JS

(function () {
  var canvas = new fabric.Canvas('ex8');
  canvas.controlsAboveOverlay = true;
  var clipPath = new fabric.Rect({ width: 100, height: 100, fill: 'red', top: 100, left: 100 });

  canvas.setOverlayImage(
    'https://i.ibb.co/88QkSMC/crew-front.png',
    canvas.renderAll.bind(canvas),
    {}
  );
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red', globalCompositeOperation: 'xor' }),

    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 }),
  ]);

  canvas.clipPath = clipPath;
  canvas.add(group);
})();

感謝你的幫助 ！！！

小提琴

Answer 1

非常有趣的問題。

您遇到的問題與在Fabric.js中應用圖層的順序有關。

如相關的github帖子中所述，圖層應用如下（從下到上）：

因此，並不是將clipPath放在 T 恤圖像（即Overlay image ）上。 恰恰相反，因為 T 恤層應用在 clipPath 上。

雖然看起來“透明度”來自clipPath resp。 fabric group ，它實際上來自Overlay image本身，因為圖像中的 T 恤是透明的（周圍的白色背景不是）。

當用鼠標懸停在 T 恤圖像上時（例如，在如下所示的文件資源管理器中），T 恤圖像的不透明度也是可見的。

至於邊框，您可以將以下內容添加到您的代碼中：

 group.set({ borderColor: 'yellow', cornerColor: 'yellow', cornerSize: 6, transparentCorners: false }); group.setActiveObject(canvas);

請注意，邊框僅在相應的 canvas 項目被激活時可見。 有關更多信息，您可以查看有關自定義的此鏈接。