Question

我有一个水平可滚动的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/

看到小提琴

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

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

1 个答案: