I have a div that scrolls horizontally and contains a ruler div and a canvas where I draw horizontal lines of varying lengths.
When drawing the lines, I want to ensure they are accurately measured against the ruler using JavaScript and 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));
});
}
To achieve this, when the line length is different such as 6600, I must adjust the division factor accordingly.
My concern is how to dynamically calculate the length of the line on the ruler based on different line lengths.
You can view the demo at http://jsfiddle.net/dH962/