12
votes

Comment puis-je effectuer un remplissage d'inondation avec la toile HTML?

Quelqu'un at-il mis en œuvre un algorithme de remplissage d'inondation en javascript pour une utilisation avec HTML Canvas

Mes exigences sont simples: inondation avec une seule couleur à partir d'un seul point, où la couleur limite est une plus grande couleur d'un certain delta la couleur au niveau du point spécifié. P>

  stopFill : function (fillColor, seedColor, pixelColor) {
    // Ignore alpha difference for now.
    return Math.abs(pixelColor.r - seedColor.r) > this.colorTolerance || Math.abs(pixelColor.g - seedColor.g) > this.colorTolerance || Math.abs(pixelColor.b - seedColor.b) > this.colorTolerance;
  },


3 commentaires

Quand c'est comme ça, vous devez répondre à votre propre question au lieu de modifier la question.


Pedro est correct: si vous avez trouvé une solution à votre problème, il est incorrect de "mettre à jour" votre question avec la réponse. La bonne façon est d'ajouter votre propre réponse et de l'accepter.


Veuillez déplacer votre édition en une réponse séparée. Je ne vous blâme pas pendant une erreur d'une décennie, mais vous êtes en mesure de le réparer maintenant.


3 Réponses :


1
votes

Je ne traiterais pas la toile comme une image bitmap.

Au lieu de cela, je garderais une collection d'objets de peinture et de modifier cette collection. Ensuite, par exemple, vous pouvez remplir un chemin ou une forme ou ajouter une nouvelle forme qui a les limites des objets que vous essayez de remplir.

Je ne peux pas voir comment "normal" Evlication a du sens dans le dessin vectoriel.


2 commentaires

Mon application dispose de deux types de couches: couches vectorielles et couches bitmap. J'ai besoin du remplissage des inondations pour les couches bitmap, principalement la couche d'arrière-plan (qui contient des terrains colorés qui sous-tend les lignes de contour pour une carte topographique).


En outre, les applications de peinture, le godet de peinture est assez standard.



3
votes

Voici une implémentation sur laquelle je travaille. Il peut être vraiment lent si la couleur de remplacement est trop proche de la couleur d'origine. C'est un peu plus rapide en chrome que Firefox (je ne l'ai pas testé dans d'autres navigateurs).

Je n'ai pas encore fait de tests exhaustifs, il peut donc y avoir des cas de bord où cela ne fonctionne pas. xxx


2 commentaires

Je vais donner à votre vôtre quand j'ai une chance. J'ai fini par mettre en œuvre mon propre algorithme de remplissage d'inondation. C'est précis mais lent. Si la plupart des toiles doivent être repeintes, il faut 8-9 secondes dans Firefox (pour une toile de pixels de 800x520).


@Paulchernoch: Vous devriez répondre à votre propre question et l'accepter.



6
votes

Pour créer un remplissage d'inondation Vous devez être capable de regarder les pixels présents déjà et de vérifier qu'ils ne sont pas la couleur que vous avez commencée avec quelque chose comme ça.

p>

<canvas></canvas>


0 commentaires