将样式添加到`clipPath` Fabric.js 对象答案

【问题标题】：Add style to `clipPath` Fabric.js Object将样式添加到`clipPath` Fabric.js 对象
【发布时间】：2020-07-19 22:02:23
【问题描述】：

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

这里是一个圆形画布的例子。我尝试将相同的样式应用于容器内的对象和容器本身，但正如您所见，只有容器内的对象被设置了样式。如何在此圆形容器上应用笔触或阴影 (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。我怎样才能达到同样的效果？

【问题讨论】：

你怎么知道公司在clipPath对象上使用了阴影？有没有看过的代码？因为，当我删除canvas.clipPath = container 行时，您的样式似乎也适用于容器。也许这也是网站上发生的事情。没有？
我不知道他们是否使用阴影，我只是根据我对工具的了解来假设。我对任何其他类型的解决方案持开放态度。如果删除canvas.clipPath = container 行，则不再有clipPath。我的目标是改变我的画布的形状。我发现最好的方法是使用clipPath（参见stackoverflow.com/questions/44529826/change-canvas-shape），但我不能在其上应用单一样式。
您希望画布上的样式是什么样的？如果它只是一个影子，为什么不直接用 css 来做呢？（例如filter: drop-shadow(0px 3px 3px #000);
谢谢@melchiar，我认为它行不通！由于容器和画布之间没有任何东西，drop-shadow 可以完美运行。您可以发布答案吗？
没问题！仅供参考，如果您也想抚摸画布，这有点棘手，但并非不可能。一种方法是将画布的大小设置为与剪贴路径相同，然后应用半径为 50% 的 CSS 边框。另一种方法是用笔划向画布本身添加一个圆形对象，并将其作为边框。

标签： javascript fabricjs

【解决方案1】：

在裁剪画布本身时，最好使用 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>

【讨论】：