Javascript 洪水填充工具P5.js

我再次来到这里，是因为我在我的绘图应用程序中实现洪水填充工具时仍然遇到困难

我试图使用p5.js制作一个相当简单的2d绘画应用程序，每个绘图工具都有自己的构造函数。我一直很难理解我做错了什么，为什么它不起作用，这导致了很多挫折

我在这里读了几篇文章，并在youtube上观看了一个教程，但我还是不太明白。我将包括到目前为止我所做的，你可以看到的。具体来说，我不确定为draw函数编写什么。我想洪水填充发生在鼠标和鼠标坐标时，按下鼠标。此外，我希望目标颜色是从单独的构造函数函数colorplate（）中选择的颜色

HTML:

洪水填充构造函数我需要帮助。控制台中的第112行（在draw函数中）出现“UncaughtReferenceError:floodFill未定义”，我有点纠结于如何修复它：

function FillTool() {
    
//set an icon and a name for the object
this.icon = "assets/freehand.jpg";
this.name = "FillTool";
    
var colourNew = ColourPalette(colourP); //Placeholder - How do I do this?

    
function getPixelData(x,y){
  var colour = [];

  for (var i = 0; i < d; i++) {
    for (var j = 0; j < d; j++) {
      idx = 4 * ((y * d + j) * width * d + (x * d + i));
      colour[0] = pixels[idx];
      colour[1] = pixels[idx+1];
      colour[2] = pixels[idx+2];
      colour[3] = pixels[idx+3];
    }
  }

  return colour;
}

function setPixelData(x, y, colourNew) {
  for (var i = 0; i < d; i++) {
    for (var j = 0; j < d; j++) {
      idx = 4 * ((y * d + j) * width * d + (x * d + i));
      pixels[idx] = colourNew[0];
      pixels[idx+1] = colourNew[1];
      pixels[idx+2] = colourNew[2];
      pixels[idx+3] = colourNew[3];
    }
  }
}

function matchColour(xPos,yPos,oldColour){    
    var current = get(xPos,yPos);
    if(current[0] == oldColour[0] && current[1] == oldColour[1] && current[2] == oldColour[2] && current[3] == oldColour[3]){        
        return true;
    }    
}

function checkPixel(x1,y1,pixelArray){    
    for (var i = 0 ; i < pixelArray.length; i+=2){        
        if(x1 == pixelArray[i] && y1 == pixelArray[i+1]){                       
            return false;                    
           }
        else {               
           console.log(pixelArray.length)
           return true;             
            }
    } 
}


function floodFill (xPos,yPos){
    loadPixels();
    colourOld = getPixelData(xPos, yPos);
    var stack = [];
    var pixelList = [];
    stack.push(xPos,yPos);
    pixelList.push(xPos,yPos);
    console.log(stack);

    while(stack.length > 0){
        var yPos1 = stack.pop();
        var xPos1 = stack.pop();
        setPixelData(xPos1,yPos1,colourNew);

        if(xPos1 + 1 <= width && xPos1 + 1 > 0 ){
            if(matchColour(xPos1+1,yPos1,colourOld) && checkPixel(xPos1+1,yPos1,pixelList)){
                stack.push(xPos1+1,yPos1);
                pixelList.push(xPos1+1,yPos1);
            }
        }

        if(xPos1+1 <= width && xPos1+1 > 0 ){
            if(matchColour(xPos1-1,yPos1,colourOld) && checkPixel(xPos1-1,yPos1,pixelList)){
                stack.push(xPos1-1,yPos1);
                pixelList.push(xPos1-1,yPos1);
            }
        }
        if(yPos1+1 <= height && yPos1+1 > 0 ){
            if(matchColour(xPos1,yPos1+1,colourOld) && checkPixel(xPos1,yPos1+1,pixelList)){
                stack.push(xPos1,yPos1+1);
                pixelList.push(xPos1,yPos1+1);
            }
        }

        if(yPos1-1 <= height && yPos1-1 > 0 ){
            if(matchColour(xPos1,yPos1-1,colourOld) && checkPixel(xPos1,yPos1-1,pixelList)){
                stack.push(xPos1,yPos1-1);
                pixelList.push(xPos1,yPos1-1);
            }
        }
    }

    updatePixels();
    console.log(pixelList);
}  
}

this.draw = function() {

    if(mouseIsPressed){
        floodFill(mouseX,mouseY);
    }
}

函数FillTool（）{
//设置对象的图标和名称
this.icon=“assets/freehand.jpg”；
this.name=“FillTool”；
var colourNew=colorplate（colorp）；//占位符-我该怎么做？
函数getPixelData（x，y）{
var颜色=[]；
对于（变量i=0；i0）{
var yPos1=stack.pop（）；
var xPos1=stack.pop（）；
setPixelData（xPos1、yPos1、colorNew）；
如果（xPos1+10）{
if（匹配颜色（xPos1+1、yPos1、colorold）和检查像素（xPos1+1、yPos1、像素列表））{
stack.push（xPos1+1，yPos1）；
pixelList.push（xPos1+1，yPos1）；
}
}
如果（xPos1+10）{
if（匹配颜色（xPos1-1、yPos1、colorold）和检查像素（xPos1-1、yPos1、像素列表））{
堆栈推送（xPos1-1，yPos1）；
pixelList.push（xPos1-1，yPos1）；
}
}
如果（yPos1+10）{
if（匹配颜色（xPos1、yPos1+1、colorold）和检查像素（xPos1、yPos1+1、像素列表））{
堆栈推送（xPos1，yPos1+1）；
push（xPos1，yPos1+1）；
}
}
如果（yPos1-10）{
if（匹配颜色（xPos1，yPos1-1，彩色）和检查像素（xPos1，yPos1-1，像素列表））{
堆栈推送（xPos1，yPos1-1）；
pixelList.push（xPos1，yPos1-1）；
}
}
}
更新像素（）；
console.log（像素列表）；
}  
}
this.draw=函数（）{
如果（按下鼠标）{
漫灌（mouseX、mouseY）；
}
}

---

抱歉，如果有点乱，那是我大脑目前的准确表现。

功能

checkPixel

非常慢，因为

pixelArray

在绘制新像素时会增长，因此每次验证是否有新像素在堆栈中或已经绘制过需要更长的时间

在javascript中，可以使用对象

{}

存储键/值对，如：

var colours = { 'red':{'r':255,'g':0,'b':0,'a':255}, 'black':{'r':0,'g':0,'b':0,'a':255} };

调用方法

hasOwnPorperty

来验证密钥的存在速度非常快

colours.hasOwnPorperty('red') // is true
colours.hasOwnPorperty('green') // is false

如果在

颜色中有1000000种颜色

，则

拥有自己的属性

在

颜色中找到一种颜色

的时间不会比在

颜色中只有一种颜色

的时间长。（对于您版本的

checkPixel

，它是O（1）与O（n）相对）

尝试在圆圈内单击。。。还是外面

let工具箱，d；
函数设置（）{
createCanvas（600400）；
d=像素密度（）；
//创建辅助功能和调色板
//...
设colorred=调色板（255,0,0255）；
//...
工具箱={'selectedTool'：新建FillTool（）}；
工具箱。选择工具。设置颜色（红色）；
背景（255）；
推（）；
冲程重量（1）；
冲程（0）；
圆圈（75,75100）；
仰泳（）；
填充（0255,0255）；
圆圈（125,75100）；
pop（）；
}
函数绘图（）{
如果（！toolbox.selectedTool.hasOwnProperty（“绘图”））{
警告（“您的工具看起来没有绘制方法！”）；
返回；
}
toolbox.selectedTool.draw（）；
}
函数FillTool（）{
让自我=这个；
//设置对象的图标和名称
self.icon=“assets/freehand.jpg”；
self.name=“FillTool”；
self.color=调色板（0,0,0255）；
self.draw=函数（）{
如果（按下鼠标）{
漫灌（mouseX、mouseY）；
}
};
self.setColor=功能（col）{
self.color=col；
};
功能匹配颜色（位置、旧颜色）{
var current=获取像素数据（位置x、位置y）；
返回（当前[0]===
var colours = { 'red':{'r':255,'g':0,'b':0,'a':255}, 'black':{'r':0,'g':0,'b':0,'a':255} };

colours.hasOwnPorperty('red') // is true
colours.hasOwnPorperty('green') // is false