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/