如何将像素转换为测量html5画布

how to convert pixels into measurement-html5 canvas

本文关键字：测量 html5 画布 转换 像素      更新时间：2023-09-26

如果我的画布反映了一些现实生活中的尺寸，比如8米乘6米，我在它上面画了一条线，我怎么计算这条线在画布上的尺寸呢?也就是说，如果我从位置(x1,y1)画到位置(x2,y2)我测量它并确定它的长度大约是x。也将有可能在运行时显示线下方的测量值，就像我完成线一样，它的长度自动显示在它的底部。我使用简单的画布，只有1绘制线函数与javascript atm。

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
}
相关文章：