如何用 fabric.js 测量折线？

Question

我想用 fabric js（或常规 js）测量折线。到目前为止，我可以绘制折线，但它只测量从 mousedown 到 mouseup 的距离，而不是测量整条线的距离。例如，如果我要画一个圆，它的距离将为 return '0'，因为起点和终点顶点相同，而我想测量圆的周长。这是代码：

                    var Calculate = {
                        lineLength: function (x1, y1, x2, y2) {
                            return normalizedSize * (Math.sqrt(Math.pow(x2 * 1 - x1 * 1, 2) + Math.pow(y2 * 1 - y1 * 1, 2)));
                        }
                    }

Answer 1

Fabric.Polyline.points 包含定义折线的所有点。

代替鼠标光标测量，将新点添加到多段线，然后根据点进行计算：

var Calculate = {
    lineLength: function (line) {
        var distance = 0;
        for (var i=0; i < line.points.length - 1; i++) {
            var p1 = line.points[i];
            var p2 = line.points[i + 1];
            distance += normalizedSize * (Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)));
        }
        return distance;
    }
}

这应该可以正确计算线距。

如何用 fabric.js 测量折线？

How to measure Polyline with fabric.js?

javascript

fabricjs