javascript - 如何将像素转换为measurement-html5 Canvas

Question

如果我的 Canvas 反射(reflect)了一些现实生活中的尺寸，例如 8 米 x 6 米，并且我在上面画了一条线，我如何计算 Canvas 上该线的尺寸。即，如果我从位置 x1,y1 绘制到位置 x2,y2，我会测量它并确定它的长度约为 x 长度。另外，是否可以在运行时显示在线下方的测量值，就像我完成该线后一样，它的长度会自动显示在其底部。我正在使用简单的 Canvas ，只有 1 个带有 javascript atm 的画线函数。

Answer 1

var linePixelsX = x2-x1;
var linePixelsY = y2-y1;
// horizontal/vertical components of line in pixels

var horizontalMPP = ( m / p );
var verticalMPP = ( m / p );
// horizontal/vertical meters per pixel, p being according canvas measurement in pixels and m being the measurement (in meters) of the area it should represent

var lineMetersX = linePixelsX * horizontalMPP;
var lineMetersY = linePixelsY * verticalMPP;
// calculate horizontal/vertical line components in meters

var lineMetersTotal = Math.SQRT2(lineMetersX*lineMetersX + lineMetersY*lineMetersY);
// Calculate total line length in meters with some Pythagoras

您必须将线条分成水平和垂直分量，就像它是一个向量一样。

如果 Canvas 尺寸的比例与其应代表的区域的测量值(以米为单位)的比例相匹配，则只需计算一次 MPP(宽度或高度)即可计算总和不含组件的线路长度。

这里有一些简单的缩放数学和向量:)

要在屏幕上显示长度:只需添加“div”或“span”或其他内容，然后在其中写入如下行:

HTML:

<canvas>
</canvas>
<div id="lengthDiv"></div>

Javascript:

function drawLine(){
// All other stuff + what I showed above

document.getElementById('lengthDiv').innerHTML = lineMetersTotal;
// get 'div' by ID and assign your length to innerHTML
}