Fabric.js gomme question toile

Question

Je veux implémenter gomme dans mon application web en utilisant Fabric.js. Est-il possible d'implémenter gomme dans Fabric.js? Par exemple, comme dans MS Paint?

Answer 1

Il n'y a pas d'effaceur intégré dans Fabric et l'implémentation est un peu difficile. Ce qui est à propos de Fabric, c'est que tout est basé sur des objets et que la plupart des choses sont basées sur des vecteurs. À la différence des canevas natifs, nous ne pouvons pas simplement effacer certains pixels sur une image bitmap globale. Nous avons un modèle d'objet entier en dessous, et la sortie du canevas est une simple boucle de tous les objets rendus sur le canevas. Une façon d'émuler une gomme est peut-être d'avoir une sorte de superposition sur le dessus de la toile. Et sorte-de dessiner des lignes "effacées" sur elle, donnant l'illusion d'objets sous-jacents étant effacés.

Mais il y a encore des complications avec ceci:

• Comment pourrions-nous sérialiser cette couche (à JSON ou SVG)? Que se passe-t-il si vous effacez la moitié d'un tracé dessiné précédemment et souhaitez ensuite travailler avec une forme déjà effacée? La forme elle-même doit être modifiée. la superposition ne fonctionnerait pas.
• L'effaceur affecterait-il uniquement les formes ou la couleur d'arrière-plan? Et l'image de fond?

Il y a probablement plus de problèmes auxquels je n'ai pas pensé pour le moment.