0
349
Views¿Cómo selecciono una imagen de una matriz de imágenes y dibujo la imagen en el lienzo?
He encontrado un problema con este proyecto en el que estoy trabajando. El código aquí es para dibujar una imagen cada vez que se hace clic con el mouse en el lienzo. Tengo una serie de banderas de países y quiero que el usuario seleccione cualquier bandera de su elección y la dibuje en el lienzo. Cuando hago clic en la opción para seleccionar cualquier bandera de mi elección del lienzo, solo dibuja una bandera en particular. Quiero que alguien me ayude a encontrar una manera de seleccionar diferentes banderas de la matriz y dibujarlas en el lienzo.
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]); } }1 answers
Answer question0
El problema parece ser que está especificando un objeto (una instancia de p5.Image ) como el nombre de las opciones que está creando. Tanto el nombre como el valor de las opciones de selección deben ser cadenas. Porque cuando p5.Image se convierte en una cadena, es "[object Object]" todas sus opciones de selección son las mismas.
Aquí hay un ejemplo de trabajo simple.
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>