CODEWITHSUNDEEP
javascriptcanvashtml5-canvasfabricjs
Adnan Ali
Adnan Ali

Reputation: 2960

Create Guides and Grids ruler with fabric.js

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.

Upvotes: 4

Views: 4512

Answers (1)

shershen
shershen

Reputation: 9993

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

Upvotes: 2

Related Questions