添加样式到`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>