KonvaJS：放大/缩小时避免模糊

Question

我正在使用 KonvaJS 绘制一些图形并制作简单的动画。

有时用户放大页面，绘制的画布变得模糊。

我注意到如果页面开始放大，模糊度会大大降低。所以我认为一个解决方案是使用新的缩放值重新渲染舞台。但我不知道该怎么做。

我尝试设置

Konva.pixelRatio = window.devicePixelRatio

然后调用

stage.draw()

（如此处建议：https://stackoverflow.com/a/55524612/3290971），但重绘不足以消除模糊。我不知道什么会起作用。

我有 this JS Bin 将呈现文本和圆圈。圆圈每秒都会改变颜色，但这只是为了查看间隔是否有效。

每秒更新

Konva.pixelRatio

，然后调用

stage.draw()

。当你放大时，你会看到文本和圆圈都变得模糊，并且在每一步都保持模糊。

我还注意到，在调用

stage.toDataURL({ pixelRatio: window.devicePixelRatio })

时，生成的 URL 包含一个非模糊图像。这就是我想要得到的效果。我不知道怎么做。

这是 JS Bin 中问题的视频（当我刷新页面时模糊消失的那一刻）：

Answer 1

已经创建的图层不会自动更新它们的像素比例。所以你必须自己做：

// update global for new layers
Konva.pixelRatio = window.devicePixelRatio;
// update pixel ratio of existing canvas
layer.canvas.setPixelRatio(Konva.pixelRatio);