Canvas要素の適切なHiDPIレンダリング（Konva.js付き）？

私はKonva.jsのコンポーネントを使用して小さなHTML5 Canvasアニメーションを作成しました。キャンバス要素が2倍の大きさであることを除いて、すべてがうまくいきます。私はHiDPI/Retinaディスプレイを持っていると思います。具体的には、要素は次のようになりますCanvas要素の適切なHiDPIレンダリング（Konva.js付き）？

<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>

スタイルのサイズは、私が期待しているものの、最上位の幅/高さのプロパティ値は倍です。

私はHiDPIポリフィルをhttps://github.com/jondavidjohn/hidpi-canvas-polyfillにしようとしましたが、これによってCanvas要素が予想されるサイズになりましたが、Konva.js要素のサイズが変更されていないように見えて、それらの図形のレイアウトが完全に乱れます。

誰かがKonva.jsで良いHiDPIの動作を得ているのかどうか、もしそうなら、どうすればいいのでしょうか？（できるだけ多くのデバイスでアニメーションを同様にレンダリングすることが重要です。）

出典

2017-11-23 davewy

私はこれをWindows上のChromeでのみテストしました。他のブラウザは異なる動作をするかもしれません... – davewy

Konva.jsは自動的に網膜表示を処理します。 Konvaは、すべてのキャンバスの寸法を2倍大きくして、HDPIデバイスで自動的にシャープな結果を得ます。だからあなたはそれについて心配する必要はありません。

出典

2017-11-24 00:33:32 lavrton

しかし、私のキャンバスは私のHiDPI画面上で2048x1000の画面全体を占めています。私の画面上では1024x500までしか使用できません。物事を鋭く保つためには2倍の大きさが必要ですが、それは私の画面の半分を占めるに過ぎません。私ができるスケーリングがありますか？ – davewy

@davewyあなたは2048x1000サイズがかかりますか？私が見ることができるように、キャンバスは正しいスタイルを持っています： 'width：1024px;高さ：500px; ' – lavrton

OSの設定にグローバルスケーリングファクタが適用されているため、すべてのコンテンツが2倍のサイズでレンダリングされました。だからKonvaは完璧に動作しているはずです。素晴らしい図書館に感謝します。 :) – davewy

Canvas要素の適切なHiDPIレンダリング（Konva.js付き）？

答えて

関連する問題