2

我正在使用具有预定义宽度和高度的画布，这些是我必须渲染的可用资源的结果。
资源大小并不总是与屏幕（移动设备）大小相同，因此我使用“视口”“拉伸”文档以获得最佳的全屏外观和填充外观。这个效果很好，应用程序运行正常（基于 PlayN）。

当我被要求使用 iFrame 在应用程序中打开“外部”页面时，问题出现了。iFrame 似乎继承了父文档的“视口”，并且网站的内容被破坏（放大或缩小）。

我检查了一个解决方案，我们保留“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