0

我正在使用 HTML5 画布元素:

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

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

我知道有一个底层位图,然后有一个 DOM 元素,该位图被装箱,并且 2 个对象具有不同的尺寸,因此例如位图被缩放/挤压以适应 DOM 元素。如果位图尺寸总是等于 DOM 元素尺寸,我会更容易理解,但这不是它的工作原理。

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

这很重要,因为鼠标点击和手指触摸是在 DOM 坐标中传递的,但我们通常需要在画布坐标中解释它们。

(还有一个相关的问题:我做对了吗,将 DOM 元素设置为扩展到父级允许的最大尺寸?)。

4

1 回答 1

0

要获取画布底层位图的尺寸:

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);
    ...
}
于 2018-08-15T23:44:56.713 回答