0

我使用来自 Konva.js 的组件构建了一个小的 HTML5 Canvas 动画。一切都很好,除了 Canvas 元素的大小是我期望的 2 倍——我想是因为我有一个 HiDPI/Retina 显示器。具体来说,元素看起来像

<canvas width="2048" height="1000" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1024px; height: 500px;"></canvas>

样式大小是我所期望的,但顶级宽度/高度属性值是双倍的。

我在https://github.com/jondavidjohn/hidpi-canvas-polyfill尝试了 HiDPI polyfill ,但是虽然这使我的 Canvas 元素达到了预期的大小,但 Konva.js 元素似乎没有调整大小,并且所有的布局这些形状完全搞砸了。

所以我想知道是否有人使用 Konva.js 获得了良好的 HiDPI 行为 - 如果是,如何,如果没有,关于我如何能够使其工作的任何提示?(对于我的动画来说,在尽可能多的设备上进行类似的渲染很重要。)

4

1 回答 1

1

Konva.js自动处理视网膜显示。Konva使所有画布尺寸扩大两倍,以自动在 HDPI 设备上获得清晰的结果。所以你不必担心它。

于 2017-11-24T00:33:32.810 回答