使用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 
    }));