向 `clipPath` Fabric.js 对象添加样式

Question

我需要一个具有特定形状的 canvas。感谢 this post 使用 clipPath，我能够做到这一点。问题是我根本无法设计它。

这里有一个圆形的例子 canvas。我尝试对容器内的对象和容器本身应用相同的样式，但如您所见，只有容器内的对象被设置了样式。我如何向这个圆形容器 (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 应用阴影等样式。我还启用了 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>

向 `clipPath` Fabric.js 对象添加样式

Add style to `clipPath` Fabric.js Object

javascript

fabricjs