Добавить стиль к `clipPath` Fabri c. js Object

Question

Мне нужен холст с заданной формой c. Я смог сделать это благодаря этому сообщению с использованием 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. Они используют Фабри c v3.6.0. Как я могу добиться того же?

Answer 1

При обрезке самого холста такие стили, как тени, лучше всего применять, используя CSS. Я также включил свойство controlsAboveOverlay, чтобы сделать элементы управления изменением размера видимыми вне clippath (не стесняйтесь отключать, если вам это не нужно).

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>