Question

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

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

我检查了一个解决方案，我们保持“viewport = 1”但是使用CSS来拉伸画布，应用程序看起来很好但是所有的鼠标/触摸事件都被打破了，它们会收到真实（缩放）的位置但是我的应用程序需要基于原始画布大小的位置。

示例here。

知道如何拉伸画布并保持原始尺寸的坐标正确吗？

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

HTML画布调整大小和鼠标坐标

0 个答案: