Как сделать do 'pixie-based' бесплатный чертеж в fabricjs

Question

Я пытаюсь создать «Eraser» для моего fabricjs основанного на 0,5 приложения для рисования без прозрачности (с нетривиальным фоновым изображением), i. е. все рисунки полупрозрачны, и мы все еще можем видеть фон через свободный чертеж.

Однако я понимаю, что по умолчанию все бесплатные чертежи являются «основанными на пути» i. е. все, что мы рисуем (между мышью мыши вверх), захватывается как отдельный путь в холсте, поэтому невозможно удалить произвольную часть пути. Поэтому я думаю, возможно, мы можем захватить событие mouse-down/up вручную и нарисовать изображение pixie by pixie и поместить его на холст с opacity = 0.5? так что мы можем использовать белый, чтобы перезаписать все эти «старые» чертежи?

Это эффективное/эффективное решение?

Однако я не уверен, как это можно реализовать в fabricjs? не могли бы вы дать мне несколько советов о шагах или о каком-то псевдокоде? спасибо

Answer 1

Я не выполнил свою попытку, когда у меня возникла аналогичная проблема, но основная концепция была простой: «Прочитайте пиксель под курсором (и под холстом, где еще один холст с фоновым изображением был), и нарисуйте путь с тем же цветом ", создавая эффект ластик. Исходным камнем был этот jsfiddle.net/DV9Bw/1/, возможно, он может помочь вам, я не пытался его завершить, так как идея была быстро оставлена ​​