Question

我正在使用HTML5 canvas元素：

<style>
    #myCanvas {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

 <canvas id="myCanvas" ontouchstart="..." />

我知道有一个基础位图，然后有一个DOM元素被装在该位图中，并且2个对象具有不同的尺寸，例如缩放/压缩位图以适合DOM元素。如果位图尺寸始终等于DOM元素尺寸，对我来说更容易理解，但这不是它的工作原理。

如何查询各个尺寸？如何设置各自的尺寸？如何在Chrome开发者工具中查看两组尺寸？如何保持两组尺寸同步？

这很重要，因为鼠标单击和手指触摸是在DOM坐标中实现的，但是我们通常需要在画布坐标中对其进行解释。

（还有一个相关的问题：我是否正确完成了将DOM元素设置为扩展到父级允许的最大尺寸的操作？）

Answer 1

要获取画布基础位图的尺寸，请执行以下操作：

var w = canvas.width;
var h = canvas.height;

要获取DOM元素的尺寸：

var w = canvas.clientWidth;
var h = canvas.clientHeight;

要设置画布的基础位图：

canvas.width = 900;
canvas.height = 400;

要设置DOM元素的尺寸，这取决于CSS样式以及屏幕上的其他内容，这是一个更复杂的问题。

在Chrome的“开发人员工具”中，Chrome显示DOM元素尺寸，除了在命令行中键入“ canvas.width”和“ canvas.height”外，我找不到任何方法来获取画布底层位图尺寸

关于尝试安排height == clientHeight和width = clientWidth，我想这是有可能的，但这可能也很困难，而且可能是不可取的。

因此，要将触摸动作或鼠标单击从DOM元素坐标映射到画布位图坐标，似乎只需一个简单的缩放操作即可：

function elementCoordsToCanvasCoords(X,Y)
{
    X = X * canvas.clientWidth / canvas.width;
    Y = Y * canvas.clientHeight / canvas.height;
    return [X,Y];
}

function onTouchStart(event)
{
    fingerStart(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
}

function fingerStart(X, Y)
{
    [X,Y] = elementCoordsToCanvasCoords(X,Y);
    ...
}

HTML5 canvas：如何查询或修改底层位图尺寸而不是DOM元素尺寸？

1 个答案: