Gibt es eine Möglichkeit, mit HTML Canvas und JavaScript von einem Punkt bis zu einem Rand zu füllen?

Question

Ich habe einen alten Basiscode, mit dem ich arbeite. Es geht in etwa so:

PAINT (200, 200), 2, 10

Dies bedeutet im Wesentlichen: eine Fläche an den Koordinaten beginnend füllen: X 200 Y 200 mit der Farbe dunkelgrün bis der Punkt eine Grenze Lichtfarbe grün erreicht, stoppt dann Füllung.

Die Idee ist, dass man einen Umriss (sagen wir von einem Zustand) mit einer Farbe zeichnen und dann den gesamten Umriss mit einer anderen Farbe füllen kann. Es füllt nicht den gesamten Bildschirm aus, da die Kontur die Farbe hat, bei der die Füllung endet.

Answer 1

Sie können Flood fill verwenden, um eine Region zu füllen. Es nimmt einen Startpunkt (oder den Startpunkt) als eine Eingabe und füllt die Region rekursiv, indem es versucht, seine leeren Nachbarn zu füllen.

Eine einfache stapelbasierten Implementierung 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) ist die Funktion, die (in diesem Fall Licht grün) mit der Randfarbe wird der Punkt (x, y) gefüllt oder nicht, überprüft, ob.

setPixel(point) füllt den Punkt (x, y) mit der Vordergrundfarbe (dunkelgrün, in Ihrem Fall).

Die implementation of these functions ist trivial, und ich überlasse es Ihnen. Die folgende Implementierung verwendet eine 4-connected Nachbarschaft. Aber es kann leicht zu 6 oder 8 verbundenen Nachbarschaften erweitert werden.