时间戳

首页 > 解决方案 > HTML5 画布：如何查询或修改底层位图尺寸而不是 DOM 元素尺寸？

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

问题描述

我正在使用 HTML5 画布元素：

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

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

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

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

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

（还有一个相关的问题：我做对了吗，将 DOM 元素设置为扩展到父级允许的最大尺寸？）。

标签： htmlcanvascoords

解决方案

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

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

推荐阅读