Quiero cargar una matriz de imágenes en el lienzo, pero no sé cómo lograrlo. Agradecería si pudiera obtener algunos consejos sobre cómo puedo lograrlo. Estoy usando un componente basado en clases en React.
Mi código:
drawCanvas(img, prevProps) { const node = this.canvasRef.current; const context = node.getContext("2d"); context.drawImage(img, 0, 0); }// imgArray = [imagen1, imagen2, imagen3]
componentDidUpdate(prevProps) { const imageArray = Array.from(imgArray).map((image) => image) console.log(imageArray) var img = new Image(); img.src = this.props.image; img.onload = () => this.drawCanvas(img, prevProps); }Nada de esto realmente involucra a React en absoluto, aparte de que necesita obtener la referencia del lienzo, lo cual está haciendo.
Si ya tiene la matriz de objetos de imagen, en realidad es bastante sencillo. Simplemente llame a drawImage() para cada imagen en la matriz. Probablemente querrá borrar antes de comenzar a dibujarlos, para que los últimos no se desangren y creen rarezas.
context.clearRect(0, 0, canvas.width, canvas.height); imageArray.forEach(image => { context.drawImage(image, 0, 0); });Y eso es. Muy claro.