Fabric.js eraser issue canvas

Question

Я хочу реализовать ластик в своем веб-приложении с помощью Fabric.js. Есть ли способ реализовать ластик в Fabric.js? Например, например, в MS Paint?

Answer 1

В Fabric нет встроенного ластика, и реализация немного сложна.

Дело в том, что все вещи основаны на объектах, и большинство вещей также основаны на использовании векторов.

В отличие от родного холста мы не можем просто стереть некоторые пиксели на глобальном растровом изображении. У нас есть целая объектная модель, а выход canvas - это простой цикл всех тех объектов, которые отображаются на холсте.

Один из способов, которым мы могли бы эмулировать ластик, - это, возможно, какой-то наложение поверх холста. И сортировка «стирает» линии на нем, создавая иллюзию того, что основные объекты уничтожаются.

Но есть еще осложнения с этим:

• Как бы мы сериализовать этот слой (в формате JSON или в SVG)?
• Что делать, если вы удалите половину ранее нарисованного пути, а затем хотите работать с уже стертой формой? Сама форма должна быть изменена; наложение не будет работать.
• Будет ли ластик влиять только на фигуры, а также на цвет фона? Как насчет фонового изображения?

В настоящее время, вероятно, больше проблем, о которых я не думал.