Показать внешнюю часть элемента с непрозрачностью – Fabric js – controlAboveOverlay ⇐ CSS

[Anonymous]

controlsAboveOverlay — это свойство в Fabric.js. Это логическое значение, которое, если ему присвоено значение true, отображает элементы управления (границы, углы и т. д.) объекта над наложенным изображением. Наложенное изображение — это изображение, которое можно настроить для отображения поверх холста.
В настоящее время оно дает следующий результат. Внешняя часть имеет только элементы управления.


Я хотел бы показать внешнюю часть элемента с непрозрачностью 0,5. Как показано ниже.


Вот пример HTML-кода.

Код: Выделить всё

Fabric.js Example with controlsAboveOverlay







.canvas-container {
/* Setting the background color of the canvas container */
background-color: #f0f0f0;
}


(function () {
/* Initializing a new Fabric.js canvas with certain properties */
var canvas = new fabric.Canvas("canvas", {
width: 600,
height: 500,
backgroundColor: "#ffffff",
/* Setting controlsAboveOverlay to true to render controls above the overlay image */
controlsAboveOverlay: true,
});

/* Creating a rectangular clip path */
var clipPath = new fabric.Rect({
width: 300,
height: 300,
left: (canvas.getWidth() - 300) / 2,
top: 10,
});

/* Creating a group of objects, in this case, a single rectangle */
var group = new fabric.Group([
new fabric.Rect({
width: 100,
height: 100,
fill: "red",
left: (canvas.getWidth() - 150) / 2,
top: 10,
}),
]);

/* Applying the clip path to the canvas */
canvas.clipPath = clipPath;

/* Adding the group of objects to the canvas */
canvas.add(group);
})();

Подробнее здесь: https://stackoverflow.com/questions/784 ... oveoverlay