Javascript 基于单击按钮更改椭圆的填充取消填充状态，同时跟踪用户是否 Select 另一种 colored颜色

更新:没关系，我找到了强制双击的漏洞.因为按钮的轴已经被设置为"填充"，所以我需要在按钮上点击两次才能变回"无填充"，所以我现在所做的就是清空按钮的自轴，每次我改变 colored颜色 ，使它完美地工作.这可能不是最好的方法，但它奏效了.如果你有什么更好的办法，请告诉我.

我的方法基于这个全局变量，当我在ColorPalette中单击另一种 colored颜色 时，该变量将变为True，我将此变量放入opolateOptions中，因此当从ColorPalette调用它时，它首先运行并清除按钮的状态:

if (changedColor) {
     self.axis = "";
     changedColor = false;
} 

我正在为大学的一个绘图应用程序项目工作，我只被允许使用p5.js的香草Java脚本.我在不同的文件中有不同的构造函数，例如ColourPalette，用户在其中 Select 一种 colored颜色 (该 colored颜色 的填充在该构造函数中声明)，另一个CircleTool构造函数，我在其中创建一个椭圆，当 Select 该工具时，会出现一个按钮，可以在已填充/未填充之间切换.

现在我的问题是，切换按钮一开始工作没有问题，但当我 Select 一个新的 colored颜色 ，而按钮是"未填充"时，填充内部 colored颜色 调色板再次启用，但我的按钮没有更新，所以我想到了每次我更改 colored颜色 时从CircleTool调用panateOptions()函数，因为这将重新创建处于"已填充"状态的按钮.但这样做的问题是，当我更改 colored颜色 时，我现在需要单击该按钮两次，直到未填充生效，请参见以下代码:

colored颜色 构造器:这就是我每次 Select 新 colored颜色 时调用populateOptions()函数的地方，这样我的按钮每次都会重置为fill状态

//Displays and handles the colour palette.
function ColourPalette() {
    //a list of web colour strings
    this.colours = ["black", "silver", "gray", "white", "maroon", "red", "purple",
        "orange", "pink", "fuchsia", "green", "lime", "olive", "yellow", "navy",
        "blue", "teal", "aqua"
    ];
    //make the start colour be black
    this.selectedColour = "black";

    var self = this;

    var colourClick = function() {
        //remove the old border
        var current = select("#" + self.selectedColour + "Swatch");
        current.style("border", "0");

        //get the new colour from the id of the clicked element
        var c = this.id().split("Swatch")[0];

        //set the selected colour and fill and stroke
        self.selectedColour = c;
        fill(c);
        stroke(c);
        circleTool.unselectTool();
        circleTool.populateOptions();
        //add a new border to the selected colour
        this.style("border", "2px solid blue");
    }

    //load in the colours
    this.loadColours = function() {
        //set the fill and stroke properties to be black at the start of the programme
        //running
        fill(this.colours[0]);
        stroke(this.colours[0]);

        //for each colour create a new div in the html for the colourSwatches
        for (var i = 0; i < this.colours.length; i++) {
            var colourID = this.colours[i] + "Swatch";

            //using JQuery add the swatch to the palette and set its background colour
            //to be the colour value.
            var colourSwatch = createDiv()
            colourSwatch.class('colourSwatches');
            colourSwatch.id(colourID);

            select(".colourPalette").child(colourSwatch);
            select("#" + colourID).style("background-color", this.colours[i]);
            colourSwatch.mouseClicked(colourClick)
        }

        select(".colourSwatches").style("border", "2px solid blue");
    };
    //call the loadColours function now it is declared
    this.loadColours();
}

CircleTool构造函数:这是panateOptions函数所在的位置，按钮是在这里被控制的.

//Tool to draw circles
function CircleTool() {
    this.name = "circleTool";
    this.icon = "/assets/circle.jpg";

    var startMouseX = -1;
    var startMouseY = -1;
    var drawing = false;
    this.draw = function() {
        //Function to draw the circle
        if(mouseIsPressed) {
            if(startMouseX == -1) {
                drawing = true;
                startMouseX = mouseX;
                startMouseY = mouseY;
                loadPixels();
            }    
            else {
                updatePixels();
                ellipse(startMouseX,startMouseY,dist(startMouseX,startMouseY,mouseX,mouseY));
            }        
        }
        else if(drawing) {
            drawing = false;
            startMouseX = -1;
            startMouseY = -1;
        }
    }
    //This will clear the button from the canvas when circleTool is unselected
    this.unselectTool = function() {
        updatePixels();
        //clear options
        select(".options").html("");
    };
    //adds a button and click handler to the options area. When clicked
    //toggle the fill of the circle
    this.populateOptions = function() {
        select(".options").html(
            "<button id='circleButton'>Filled Circle</button>");
        //  //click handler
        select("#circleButton").mouseClicked(function() {
            var button = select("#" + this.elt.id);            
            if (self.axis == "fill") {
                self.axis = "notFill";
                
                button.html('Filled Circle');   
                fill(colourP.selectedColour);             
            }
            else {                
                self.axis = "fill";
                self.lineOfSymmetry = width / 2;
                noFill();
                button.html('Not Filled');
            }
            
        });
    };
}

为了消除需要点击按钮两次才能使unfilled生效的问题，我试图用一个全局变量来控制所有这些filled/unfilled，但它不起作用，因为即使我用布尔值控制按钮的状态，按钮也不会更新它的状态，除非我再次调用populateOptions函数.

我只想要这个按钮来控制和切换我的圆圈的填充状态，我不确定如何处理这个问题，似乎是一个简单的问题，但不能解决它.