如何使用fabric.js測量Polyline？

Question

我想用織物js（或常規js）來測量多段線。到目前爲止，我可以繪製多段線，但它只能測量從mousedown到mouseup的距離，而不是測量整個線距。例如，如果我要繪製一個圓，它將返回距離「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包含所有定義您的折線的點。

代替具有鼠標光標測量，添加新的點到折線，然後執行基於poins計算：

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

這應該正確地計算線距離。