在画布上使用铅笔绘制的像素不居中

Question

我正在使用 p5.js 用铅笔在画布上绘制像素。 问题是，在这种情况下，当铅笔尺寸为 1 或更小时，其位置不居中。 它向左向右不居中。

这里是代码。 这里是已部署的应用程序。

生成问题的步骤：-

1. 打开链接
2. 缩放（鼠标+滚轮）
3. 选择铅笔
4. 鼠标在画布上按下

提前致谢。 如果有任何疑问评论，我会补充得更清楚。

下面是我们在for循环中设置像素值的mousepressed方法的代码

mousePressed(mouseX, mouseY) {
      if (this.menuSelection === 'drawPencil') {
        this.mapImage.loadPixels()
        let size = 1
        let y = mouseY
        for (let i = mouseX - size / 2; i < mouseX + size / 2; i++) {
          for (let j = y - size / 2; j < y + size / 2; j++) {
            this.mapImage.set(i, j, this.p5.color(255))
            //console.log('i,j', i, j)
          }
        }
        this.mapImage.updatePixels()
        return
      }
    },

Answer 1

发生的事情是，当单击绘图时，用户需要滚动，它会在屏幕上而不是画布上的鼠标位置上获得位置。

p5.mousePressed = () => {
        ;(this.x_value = p5.mouseX), (this.y_value = p5.mouseY)
        // if (this.firstTime) {
        this.mx = p5.mouseX
        this.my = p5.mouseY
        this.firstTime = false
        // }

        this.mousePressedFlag = true
        this.mousePressed(p5.mouseX, p5.mouseY)
      }

mousePressed(mouseX, mouseY) {
      if (this.menuSelection === 'drawPencil') {
        
        this.mapImage.set(mouseX, mouseY, this.p5.color(255))
        this.mapImage.updatePixels()
        return
      }
    },

更新这些功能并检查它是否能按您的要求工作。