javascript - 在 Canvas 中查找线的长度

Question

我想找到我在 Canvas 中绘制的一条线的长度。我已经可以在 Canvas 内画线，但急需找到它的长度。

找到此链接，但我想知道进行精确测量需要哪些东西。谢谢。

Link i found

到目前为止，这是我的代码:

$("#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');
            });

提前致谢..

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)
}