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

Question

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

我在我们的代码中注意到一个有趣的现象。看起来，当鼠标的 x 和 y 位置接近 0.5 时，绘制的像素显示为居中；然而，在其他情况下，像素似乎稍微偏离中心。为了解决这个问题，我正在考虑改进我们的渲染逻辑。我将确保将像素密度设置为 1 以防止任何自动缩放问题。此外，我可能会尝试通过合并校正因子来调整像素位置，也许从 x 和 y 坐标中减去 0.5。仔细检查代码中可能影响像素精确位置的任何转换或缩放操作至关重要。

我注意到 P5.image.set 方法似乎不接受浮点数；它四舍五入到最接近的整数。有没有人找到此问题的解决方法，或者我在文档中遗漏了某些内容？

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

生成问题的步骤：-

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.image.set 方法似乎不接受浮点数；它四舍五入到最接近的整数。有没有人找到此问题的解决方法，或者我在文档中遗漏了某些内容？

因此，您需要始终降低数值，

因此 0.9 必须设置为 0，即使它更接近 1。因此，在将任何浮点数传递给 P5.image.set 方法之前，您应该将其取整。

例如：此处的图像放大以适合屏幕，因此在此图像中，如果您单击绿色区域，您将选择像素 A 而不是 B（这是由舍入浮点值引起的），如果您自己对值进行取整，它将选择像素 A乙