C'è un modo per riempire da un punto fino a quando non colpisce un bordo usando HTML Canvas e JavaScript?

Question

Ho un vecchio codice base con cui sto lavorando. Va qualcosa di simile:

PAINT (200, 200), 2, 10

Questo significa essenzialmente: riempire un'area inizio alle coordinate X 200 Y 200 con il verde scuro colore fino al punto raggiunge un colore confine di verde chiaro, quindi arrestare il riempimento.

L'idea è che si può tracciare un contorno (ad esempio di uno stato) utilizzando un colore, quindi riempire l'intero contorno con un altro colore. Non riempie l'intero schermo perché il contorno è del colore a cui si arresta il riempimento.

Answer 1

È possibile utilizzare Flood fill per riempire una regione. Prende un punto di partenza (o il punto di origine ) come input e riempie in modo ricorsivo la regione, tentando di riempire i suoi vicini vuoti.

Una semplice implementazione stack-based in JavaScript:

// Takes the seed point as input 
var floodfill = function(point) { 
    var stack = Array(); 
    stack.push(point); // Push the seed 
    while(stack.length > 0) { 
     var currPoint = stack.pop(); 
     if(isEmpty(currPoint)) { // Check if the point is not filled 
      setPixel(currPoint); // Fill the point with the foreground 
      stack.push(currPoint.x + 1, currPoint.y); // Fill the east neighbour 
      stack.push(currPoint.x, currPoint.y + 1); // Fill the south neighbour 
      stack.push(currPoint.x - 1, currPoint.y); // Fill the west neighbour 
      stack.push(currPoint.x, currPoint.y - 1); // Fill the north neighbour 
     } 
    } 
}; 

isEmpty(point) è la funzione che verifica se il punto (x, y) viene riempito con il colore confine (verde chiaro, in questo caso) o meno.

setPixel(point) riempie il punto (x, y) con il colore di primo piano (verde scuro, nel tuo caso).

Il implementation of these functions è banale, e lo lascio a voi.

L'implementazione precedente utilizza un quartiere 4-connected. Ma può essere facilmente esteso a 6 o 8 quartieri collegati.