Как нарисовать прозрачный рисунок с использованием ткани JS - PullRequest
Новая
       15

Как нарисовать прозрачный рисунок с использованием ткани JS

0 голосов
/ 18 января 2019

Я использую Fabric JS версии 1.7.22. Я хочу стереть фоновое изображение.

Мой код холста выглядит так: 

var canvas = new fabric.Canvas('canvas');
var canvasElement  = document.getElementById('canvas');
var ctx = canvasElement.getContext('2d');
ctx.globalCompositeOperation = 'destinatoin-out';
canvas.setBackgroundImage('http://exampleImage.jpg', function (){
  canvas.renderAll();
})

var rect = new fabric.Rect({
  top:10,
  left:10,
  globalCompositeOperation: 'destination-out'
});
canvas.add(rect);

и вывод, как показано ниже:

enter image description here

Объяснение:

  1. Когда любой объект js obejct добавлен с атрибутом 'destination-out', он показывает фон прозрачным.
  2. Теперь вместо прямоугольника я хочу нарисовать с помощью мыши и попытаться добавить этот рисунок на полотно js canvas со свойством destination-out.
  3. но я не знаю, как добавить этот рисунок на холст после запуска события мыши.
  4. Я уже выхожу из режима рисования, когда клавиша мыши нажата. но когда я наведу курсор мыши на этот рисунок, в этот момент рисунок не является рисунком, а действует как один объект ткани js.
  5. , который не имеет атрибута globalCompositeOperation.
  6. , поэтому при использовании рисунка фон стирания отсутствует.

Как стереть фоновое изображение лучше, я не знаю, Пожалуйста, помогите мне.

Я просто хочу программно выбрать последний рисунок для события мыши и установить для этого чертежа атрибут globalCompositeOperation.

...