Question

如果我的画布反映了一些现实生活中的测量结果，比如8米乘6米，我画了一条线，我该如何计算画布上该线的测量值。即如果我从位置x1，y1到位置x2，y2绘制，我测量它并确定它大约是x长度。也可以在运行时在线下方显示测量值，就像我完成线后一样，它的长度自动显示在它的底部。我使用简单的画布只有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

您必须将线条分割为水平和垂直分量，就像它是矢量一样。

如果画布尺寸的比例与它应该表示的区域的尺寸（以米为单位）的比例相匹配，则只需计算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
}

如何将像素转换为measurement-html5画布

1 个答案: