2

事前定義された幅と高さのキャンバスを使用しています。これらは、レンダリングする必要のある利用可能なリソースの結果です。
リソースのサイズは常に画面 (モバイル デバイス) と同じサイズであるとは限らないため、「ビューポート」を使用してドキュメントを「引き延ばし」、最適な全画面の外観と塗りつぶしの外観を取得します。これはうまく機能し、アプリケーションは正しく動作しています (PlayN に基づく)。

この問題は、iFrame を使用してアプリケーションで「外部」ページを開くように要求されたときに発生しました。iFrame が親ドキュメントから「ビューポート」を継承し、Web サイトのコンテンツが壊れている (ズームインまたはズームアウト) ようです。

「viewport = 1」を保持するソリューションを確認しましたが、キャンバスを引き伸ばすために CSS で遊んでいます。アプリケーションは見栄えがしますが、すべてのマウス/タッチ イベントが壊れており、実際の (ズームされた) 位置を受け取りますが、アプリケーションは位置を期待しています。これは元のキャンバス サイズに基づいています。

例はこちら。

キャンバスを引き伸ばしながら、元の寸法に対して座標を正しく保つ方法はありますか?

<body>
    <canvas id="canvas" width="100px" height="100px" style="border: 1px solid black"></canvas>
</body>

var can = document.getElementsByTagName("canvas")[0];
can.style.width = "300px";
can.style.height = "300px";

can.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'x: ' + mousePos.x + ', y:' + mousePos.y;
    writeMessage(canvas, message);
}, false);

function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '8pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
  }

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
4

0 に答える 0