使用Fabric.js繪製符合標尺長度的線條長度

Question

我有一個水平滾動的div包含另一個div（id標尺）和一個畫布。

在畫布上，我畫了一條水平線，它的長度不同。

我要劃清界線，這樣的長度是針對統治者始終衡量使用JavaScript和CSS的統治者DIV呈現：

var canvas = new fabric.Canvas('canvas'); 

line_length = 14000; 

adjusted_length = line_length/6.367; 

canvas.add(new fabric.Line([100, 100, adjusted_length, 100], { 
     left: 30, 
     top: 50, 
     stroke: '#d89300', 
     strokeWidth: 2 
    })); 

    $('#canvas_container').css('overflow-x', 'scroll'); 
    $('#canvas_container').css('overflow-y', 'hidden'); 

    drawRuler(); 


function drawRuler(){ 
    $("#ruler[data-items]").val(line_length/200); 

    $("#ruler[data-items]").each(function() { 
     var ruler = $(this).empty(), 
      len = Number($("#ruler[data-items]").val()) || 0, 
      item = $(document.createElement("li")), 
      i; 
      ruler.append(item.clone().text(1)); 
     for (i = 1; i < len; i++) { 
      ruler.append(item.clone().text(i * 200)); 
     } 
     ruler.append(item.clone().text(i * 200)); 
    }); 
} 

因此，如果線路長度爲14000，我將通過6.367得到直線長度達到14000的尺子。

但是，如果行長度是6600，我需要將它除以6.1之類的東西，以使標尺上的長度達到6600。

問題是我該如何處理這個問題，以便不同的線長度可以正確測量尺子？

最佳看到http://jsfiddle.net/dH962/

Answer 1

這是不是太硬小提琴，所有我要做的就是制定出什麼100個像素的線測量出來的統治者。答案是666（是的，魔鬼的數量......）。所以後來：

adjusted_length = (line_length/666) * 100; 

給出對統治者的正確度量不同的數據線長度

工作小提琴在http://jsfiddle.net/Uu4TD/1/

而且畫線，當我固定座標的錯誤...所以現在：

canvas.add(new fabric.Line([0, 0, adjusted_length, 0], { 
     left: 28, 
     top: 50, 
     stroke: '#d89300', 
     strokeWidth: 2 
    }));