在画布中找到线的长度

Question

我想要找到我在画布中画的一条线的长度。我已经能够在画布中画出这条线，但是非常需要知道它的长度。

我找到了这个链接，但我想知道需要哪些东西才能得到精确的测量结果。谢谢。

我找到的链接

目前这是我的代码：

$("#myCanvas").bind('mousemove', function(e){   
                    var totalOffsetX = 0;
                    var totalOffsetY = 0;       
                    var currentElement = this;

                    do{
                        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
                        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
                    }
                    while(currentElement = currentElement.offsetParent)

                    endX= e.pageX - totalOffsetX;
                    endY = e.pageY - totalOffsetY;

                    drawLine(startX, startY, endX, endY);
                });             
            }).mouseup(function(data){
                if(trigger = "1"){
                    $('.draggable').draggable( "disable" );
                }else{
                    $('.draggable').draggable("enable");
                }   
                $(this).unbind('mousemove');
            });

Thanks in advance..

- user3651476

Answer 1

自ECMA-262以来，有一个Math.hypot方法，它返回其参数平方和的平方根。

Math.hypot(v1, v2) === Math.sqrt(v1*v1 + v2*v2)

您可以创建一个简单的帮助函数：

function lineDistance(p1, p2) {
  return Math.hypot(p2.x - p1.x, p2.y - p1.y)
}

- yckart

Answer 2

您可以使用该公式来计算从 startX, startY 到 endX, endY 之间的距离。

function lineDistance( point1, point2 ){
    var xs = 0;
    var ys = 0;

    xs = point2.x - point1.x;
    xs = xs * xs;

    ys = point2.y - point1.y;
    ys = ys * ys;

    return Math.sqrt( xs + ys );
}

- Otto Mao

---

我怎样才能知道它是以毫米、厘米、英寸还是像素为单位的？ - user3651476

@user3651476 上面计算的长度始终以像素为单位。 - markE

顺便问一下，在将像素转换为厘米时，DPI有什么用途？谢谢提前回答。 - user3651476

@user3651476 DPI是指每英寸的点数。像素长度除以DPI等于物理长度（英寸），然后转换为厘米。这里有一个在线计算器https://www.sven.de/dpi/。 - Otto Mao

Answer 3

使用距离公式计算距离，公式为 distance= √((x2– x1)2+ (y2– y1)2)

例如，在JS中：

distance: function (x1, y1, x2, y2) {
  let dx = x2 - x1;
  let dy = y2 - y1;

  dx = dx * dx;
  dy = dy * dy;

  return Math.sqrt( dx + dy );
},

- Simon