添加樣式到`clipPath` Fabric.js Object

Question

我需要一個具有特定形狀的 canvas。 多虧了這篇使用clipPath的帖子，我才能做到這一點。 問題是我根本無法設計它。

這里以圓形 canvas 為例。 我嘗試對容器內的 object 和容器本身應用相同的樣式，但正如您所見，只有容器內的 object 是樣式化的。 如何將描邊或陰影應用到這個圓形容器（ clipPath ）？

 const canvas = new fabric.Canvas("canvas", {backgroundColor: "#d3d3d3"}) const container = new fabric.Circle({ radius: 150, left: 50, top: 50, stroke: "rgba(0, 0, 0, 0.5)", strokeWidth: 1, }) const obj = new fabric.Rect({ width: 100, height: 100, left: 150, top: 150, fill: "blue", stroke: "rgba(0, 0, 0, 0.5)", strokeWidth: 1, }) const shadow = new fabric.Shadow({ color: "rgba(0, 0, 0, 0.5)", blur: 10, }) container.set("shadow", shadow) obj.set("shadow", shadow) canvas.clipPath = container canvas.add(obj) canvas.requestRenderAll()

 #canvas { background: #e8e8e8; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.min.js"></script> <canvas id="canvas" width="400" height="400"></canvas>

[編輯] 我找到了一家這樣做的公司： https://www.plaqueomatic.fr/plaqueomatic/plastique 。 他們使用織物v3.6.0 。 我怎樣才能達到同樣的效果？

Answer 1

裁剪 canvas 本身時，最好使用 CSS 應用類似 styles 的陰影。 我還啟用了controlsAboveOverlay屬性，以使調整大小的控件在剪輯路徑之外可見（如果不需要，請隨意禁用）。

 const canvas = new fabric.Canvas("canvas", { backgroundColor: "#d3d3d3", controlsAboveOverlay: true }) const container = new fabric.Circle({ radius: 150, left: 50, top: 50, stroke: "rgba(0, 0, 0, 0.5)", strokeWidth: 1, }) const obj = new fabric.Rect({ width: 100, height: 100, left: 150, top: 150, fill: "blue", stroke: "rgba(0, 0, 0, 0.5)", strokeWidth: 1, }) const shadow = new fabric.Shadow({ color: "rgba(0, 0, 0, 0.5)", blur: 10, }) obj.set("shadow", shadow) canvas.clipPath = container canvas.add(obj) canvas.requestRenderAll()

 #canvas { -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5)); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.min.js"></script> <canvas id="canvas" width="400" height="400"></canvas>