p5.js : 图片在缩小时多次添加

Question

我有以下 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
})

当我点击时我想放大。
当我再次点击时我想缩小

问题

看起来 scale() 重绘了 canvas 而没有删除之前的那些。缩小时可以看到该问题。您会注意到在缩小时图像的多个副本保留在 canvas 上。

预先感谢您的帮助。

可以看到问题here

Answer 1

p5.js中的绘图函数一般不会清除已有的内容。您可以使用 clear() or overwrite the entire thing with background(color). You can also clear selective portions of the canvas with erase()/draw some shapes/noErase().

故意清除整个 canvas

至于以某点为中心进行放大缩小，这个问题比较复杂，应该分开问。

p5.js : 图片在缩小时多次添加

p5.js : Image added multiple times while scaling down

javascript

p5.js