[英]how to convert pixels into measurement-html5 canvas
如果我的畫布反映了一些現實生活中的測量值,例如 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
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.