求画布中线条的长度

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

提前致谢..

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