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