Konva getContext('2d').getImageData().data 在不同的分辨率和缩放下给出错误的数据

Question

我最近开始使用 Konva，一切正常。我在 1920x1080 的显示器上以 150% 的缩放比例打开同一个 HTML 页面，发现数据点数组在此分辨率下出现错误。

layer.getContext('2d').getImageData(mousePos.x, mousePos.y, 1, 1).data;

在特定点，它在普通屏幕上给出一个数组

242, 174, 165, 255

，而在这个特定分辨率下，值是错误的

238, 255, 0, 255

.

我该如何解决这个问题，有什么办法可以解决吗？ 任何帮助表示赞赏。

Answer 1

Konva 会根据当前屏幕的像素比例自动调整画布大小。

比如在HDPI屏幕上，像视网膜显示器，

window.devicePixelRatio = 2

。在这种情况下，Konva 将创建一个 4 倍大的画布。如果您的舞台是 500x500px，Konva 将创建 1000x1000px 的画布。需要清晰的显示。

如果要获取某个点下的像素数据，需要根据像素比例调整位置。你可以使用这个：

const layer = stage.children[0];
const canvas = layer.getNativeCanvasElement();

const pixelRatio = layer.getCanvas().getPixelRatio();
const { data } = canvas
  .getContext('2d')
  .getImageData(pos.x * pixelRatio, pos.y * pixelRatio, 1, 1);