如何从图像数组中选择图像并将该图像绘制在画布上

Question

我正在从事的这个项目遇到了问题。这里的代码是每当鼠标在画布上单击时绘制图像。我有一组国旗，我想让用户选择他们选择的任何国旗并将其绘制在画布上。当我单击选项从画布中选择我选择的任何标志时，它只会绘制一个特定的标志。我希望有人帮助我找到一种方法从数组中选择不同的标志并将它们绘制在画布上。

for(var i = 0; i < 254; i++){
    flags[i] = loadImage('assets/flags/a' + i + '.png');
}

this.fla = flags[i];

//where was the mouse on the last time draw was called.
//set it to -1 to begin with
var startMouseX = -1;
var startMouseY = -1;

this.draw = function(){
    //if moused is pressed draw selected object at mouse locations on the canvas
    if(mouseIsPressed){
        //checks the size of the stamp object
        var starSize = this.starSizeSlider.value();
        var starX = mouseX - starSize/2;
        var starY = mouseY - starSize/2;

        for(var i = 0; i < flags.length; i++){
            if(this.selectionToolForOptions.selected()== flags[i]){
                image(flags[i], starX, starY, starSize, starSize);
               
            }
            else if (this.selectionToolForOptions.selected()=='cloud'){
                image(this.flag, starX, starY, starSize, starSize);
            }
        }
       
    }
}

//when the tool is deselected just show the drawing and and clear the options
this.unselectedTool = function() {
    select("#sizeOfControl").html("");
}

//add options to select type of object to be selected and size the objects
this.populateOptions = function() {   
    this.textProperty = createDiv('Size: ');    
    this.textProperty.parent('#sizeOfControl');
    this.starSizeSlider = createSlider(5,80,10);
    this.starSizeSlider.parent("#sizeOfControl");
    this.optionTextProperty = createDiv('Options: ');
    this.optionTextProperty.parent("#sizeOfControl");
    this.selectCountryFlag = createSelect('Star: ');
    this.selectionToolForOptions = createSelect();
    this.selectionToolForOptions.parent("#sizeOfControl");

    for(var i = 0; i < flags.length; i++){
        this.selectionToolForOptions.option(flags[i]);
    }
}

Answer 1

问题似乎是您指定一个对象（p5.Image 实例）作为您正在创建的选项的名称。选择选项的名称和值都必须是字符串。因为当 p5.Image 转换为字符串时，它是 "[object Object]" 所有选择选项都是相同的。

这是一个简单的工作示例。

let imgs;

function preload() {
  imgs = {
    "option A": loadImage("https://www.paulwheeler.us/files/existing-content.png"),
    "option B": loadImage("https://www.paulwheeler.us/files/new-content.png")
  };
}

let imgSelect;
function setup() {
  createCanvas(400, 400);
  imgSelect = createSelect();
  for (const key in imgs) {
    imgSelect.option(key);
  }
  
  imgSelect.position(10, 10);
  background(220);
}

function draw() {
  if (mouseIsPressed) {
    image(imgs[imgSelect.value()], mouseX, mouseY);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>