Добавление маскирующего слоя поверх полотна fabric.js - PullRequest
4 голосов
/ 28 ноября 2011

У меня проблема с добавлением круглой маски поверх редактируемого fabric.js HTML5-холста. Подобная проблема описана в этой статье:

Создание маски изображения с помощью HTML 5 Canvas

Моя проблема в том, что когда я добавляю этот слой поверх холста fabric.js, тогда мой холст больше не редактируется внутри этого прозрачного круга. Это означает, что верхний элемент (маска) фиксирует событие click / drag, но я бы хотел переместить элементы под этот элемент маски. Ищете идеи, как обойти эту проблему.

1 Ответ

8 голосов
/ 28 ноября 2011

Вы можете использовать встроенную поддержку масок в ткани.

Вот пример создания круговой маски 100/100 с радиусом 200:

var canvas = new fabric.Canvas('...');
// ...
canvas.clipTo = function (ctx) {
  ctx.arc(100, 100, 200, 0, Math.PI*2, true);
};
...