क्या एचटीएमएल कैनवास और जावास्क्रिप्ट का उपयोग करके सीमा पार करने तक एक बिंदु से भरने का कोई तरीका है?

Question

मेरे पास कुछ पुराना मूल कोड है जिसके साथ मैं काम कर रहा हूं। यह कुछ इस तरह चला जाता है:

PAINT (200, 200), 2, 10

यह अनिवार्य रूप से मतलब है: एक क्षेत्र निर्देशांक में शुरुआत भर: एक्स 200 Y 200 रंग गहरे हरे रंग के साथ जब तक बिंदु हल्के हरे रंग की एक सीमा रंग तक पहुँच जाता है, तो भरने बंद करो।

विचार यह है कि कोई एक रंग का उपयोग करके एक रूपरेखा (एक राज्य का कहना) खींच सकता है, फिर पूरे रूपरेखा को दूसरे रंग से भरें। यह पूरी स्क्रीन को भरता नहीं है क्योंकि रूपरेखा उस रंग का है जिस पर भरना बंद हो जाता है।

Answer 1

आप किसी क्षेत्र को भरने के लिए Flood fill का उपयोग कर सकते हैं। यह एक प्रारंभिक बिंदु (या बीज बिंदु) इनपुट के रूप में लेता है और अपने खाली पड़ोसियों को भरने के प्रयास से क्षेत्र को फिर से भरता है।

जावास्क्रिप्ट में एक साधारण ढेर आधारित कार्यान्वयन:

// 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) समारोह का परीक्षण करती है उस बिंदु (x, y) (, हल्के हरे रंग की इस मामले में) नहीं सीमा रंग से भर जाता है कि क्या है या है।

setPixel(point)(x, y) को अग्रभूमि रंग (गहरा हरा, अपने मामले में) के साथ बिंदु भरता है।

implementation of these functions मामूली है, और मैं इसे आपके पास छोड़ देता हूं।

उपरोक्त कार्यान्वयन 4-connected पड़ोस का उपयोग करता है। लेकिन इसे आसानी से 6 या 8-जुड़े पड़ोस तक बढ़ाया जा सकता है।