Create Guides and Grids ruler with fabric.js

Question

Is there a way to create Guides and grids ruler with fabric.js like photoshop? I know a library for this purpose: http://mark-rolich.github.io/RulersGuides.js/

But I want to apply rulers and guides to a Div. So is there any other library or some fabricJs code snippet to achieve this?

Thanks.

Answer 1

Here there is a demo of rulers in fabricjs: https://jsfiddle.net/grqorhqw/1/. Main part of it is adding lines and text markers in a loop:

 window.canvas.add(new fabric.Line([measurementThickness - tickSize, location1, measurementThickness, location1], { stroke: '#888', selectable: false }));
    window.canvas.add(new fabric.Text(count + "\"", {
        left: measurementThickness - (tickSize * 2) - 7,
        top: location1,
        fontSize: 12,
        fontFamily: 'san-serif'
    }));