使用Fabric.js绘制符合标尺的一致线长度

我有一个水平可滚动的div，它包含另一个div（id标尺）和一个canvas。

在canvas上，我画的是一条水平线，它的长度不同。

我需要绘制线条，以便长度始终可以衡量使用标尺div中使用javascript和css渲染的标尺：

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