Tengo el siguiente código p5.js:
let minScale = 1 let maxScale = 5 let targetScale = minScale let currentScale = targetScale let idx = 0 function setup() { pixelDensity(1) createCanvas(windowWidth, windowHeight) preload(IMG_PATHS, IMGS) frameRate(12) } function draw() { if (currentScale < targetScale) { currentScale += 0.01 } else if (currentScale > targetScale) { currentScale -= 0.01 } scale(currentScale) image(IMGS[idx], 0, 0) idx++ if (idx === IMGS.length) { idx = 0 } } window.addEventListener('click', function() { targetScale = targetScale === maxScale ? minScale : maxScale })Tema
Parece que scale() vuelve a dibujar el lienzo sin eliminar los anteriores. El problema es visible al alejar el zoom. Notará que varias copias de la imagen permanecen en el lienzo mientras se aleja.
Gracias de antemano por su ayuda.
Puedes ver el problema aquí
Las funciones de dibujo en p5.js generalmente no borran el contenido existente. Puede borrar deliberadamente todo el lienzo usando clear() o sobrescribir todo con background(color) . También puede borrar partes selectivas del lienzo con erase() /draw some Shapes/ noErase() .
En cuanto a acercar y alejar el zoom centrado en un punto determinado, esa es una pregunta más complicada y debe hacerla por separado.