使用Fabric.js绘制一致的线长对尺子长度答案

【问题标题】：Drawing consistant line length against ruler using Fabric.js使用Fabric.js绘制一致的线长对尺子长度
【发布时间】：2014-01-24 15:23:39
【问题描述】：

我有一个可水平滚动的 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/看到小提琴

【问题讨论】：

标签： javascript jquery css html5-canvas fabricjs

【解决方案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
    }));

【讨论】：