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

您可以使用此公式计算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 );
}

Answer 2

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

在画布中找到线条的长度

2 个答案: