javascript - 使用Fabric.js针对标尺绘制一致的线长

我有一个水平滚动的div，其中包含另一个div（id标尺）和一个画布。

在画布上，我正在画一条水平线，它将具有不同的长度。

我需要画线，以便可以在标尺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/看到小提琴

最佳答案

那不是太难，我要做的就是算出在标尺上测出的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
    }));