使用Fabric.js绘制统治线的长度 [英] Drawing consistant line length against ruler using 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; 
 .append（item.clone（）.text（1））; 
 for（i = 1; i< len; i ++）{
 ruler.append（item.clone * 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/ 工作小提琴， p>

此外，我绘制线时修正了坐标错误...所以现在：

  canvas.add（new fabric.Line（[0，0，adjusted_length，0]，{
 left：28，
 top：50，
 stroke：'＃d89300 '，
 strokeWidth：2 
}）））; 
  

I have a horizontally scrollable div which contains another div (id ruler) and a canvas.

On the canvas, I am drawing a horizontal line, which will have different lengths.

I need to draw the line so that the length is consistently measurable against the ruler rendered using javascript and css in the ruler 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));
    });
}

So, if the line length is 14000, I'm dividing that by 6.367 to get the length of the line reaching 14000 on the ruler.

But if the line length is 6600, I need to divide that by something like 6.1 to get the length reaching to 6600 on the ruler.

The question is how do I handle this so that different line lengths are properly measured against the ruler?

Best see the fiddle at http://jsfiddle.net/dH962/

解决方案

That wasn't too hard, all I had to do was work out what a line of 100 pixels measured out to on the ruler. The answer was 666 (yes, the number of the devil...). So then:

adjusted_length = (line_length / 666) * 100;

Gives the correct measure against the ruler for varying line lengths

Working Fiddle at http://jsfiddle.net/Uu4TD/1/

Also I fixed an error with the coordinates when drawing the line...so now:

canvas.add(new fabric.Line([0, 0, adjusted_length, 0], {
        left: 28,
        top: 50,
        stroke: '#d89300',
        strokeWidth: 2
    }));

这篇关于使用Fabric.js绘制统治线的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！