如果我的画布反映了一些现实生活中的测量值，例如8米乘6米，并且我在上面画了一条线，那么我该如何在画布上计算该线的测量值。也就是说，如果我从位置x1，y1绘制到位置x2，y2，我会对其进行测量并确定它大约x长度长。我也可以在运行时在行的正下方显示测量结果，就像我完成该行一样，它的长度也会自动显示在其底部。我正在使用带有javascript atm的仅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
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句