Can we use Ruler with Fabric.js

[sandor]

Hey mate, this is a wonderful project! Very cool and in fact exactly what I would need for an OSX app (prototype) in HTML/Angular/electron. No problem to create a blank project and running as it should. My problem is that I have a quite complex prototype where I am using Fabric.js as a canvas. Also the whole layout is quite complex (with headers, footers and left/right sidebars). See the provided screenhot. The DIV where I would like to have your ruler is in the middle around my drawing canvas (the one with the dark grid inside).

I am having a really hard time implementing here your solution ;-)

Anyhow: I am but uncertain if it is possible to use your solution in my special case – would this ever work with Fabric.js?

1. Maybe you would have the time to have a look at a quick gist:

https://gist.github.com/sandor/f7802a91cb832d5d6768337ec53f5ddd

I know is hard to say something on this way – but maybe you have a quick idea?

2. Could I ecourage you to build something on top of this project that would be working nicely with Fabric.js and AngularJS? Also as a payed job or however...?

Thanks & Cheers!

[MrFrankel]

@sandor Hey, Im happy to hear you like the project. Havn't had much experience with Fabric.js, ill try and give the gist a try tomorrow see where I get.

[sandor]

@MrFrankel Hey, sounds good :-) The gist is only the index.html of the project. Should only give you an idea how the structure is built up (header/left/right/main panels)... Of course it will not be running – if you are curious, I can give you access to the complete thing. Just drop me a word :-)

[MrFrankel]

@sandor If you can provide a demo repo I can see If I can get it working.

[sandor]

@MrFrankel Hey, sure – the project is a mess (actually only some UI testings/mockups for my project) and actually built for electron, but running index.html in a local server with the newest chrome should work:

https://github.com/sandor/floido

[MrFrankel]

@sandor ive managed to get it working.

1. install latest version usingnpm install ruler.js@latest --save
2. add the source references in to your index.html:

   
   <link rel="stylesheet" href="node_modules/ruler.js/dist/ruler.min.css">
   <script src="node_modules/ruler.js/dist/ruler.min.js"></script>

3. run the initialisation code:

setTimeout(function () { var ruler1 = new ruler({ container: document.querySelector('.canvas-container'),// reference to DOM element to apply rulers on rulerHeight: 15, // thickness of ruler fontFamily: 'arial',// font for points fontSize: '7px', strokeStyle: 'black', lineWidth: 1, enableMouseTracking: true, enableToolTip: true }) }, 500)

Note I have wrapped it in a setTimeout, this is only because im not sure when the '.canvas-container' is created, you should probably add after you init fabric.

Let me know if you need anything else.

[sandor]

@MrFrankel WOW! Mate, this is sweeet ;-) Thanks a lot for this! I just made some little modifications in your CSS (really minor). Now I can attach the ruler also to the main DIV in my document – this is perfect for the mockup I am doing here and is looking cool (see screenshot). The little "x" icon is of course only a quickie ;-)

Here the Gist with comments:

https://gist.github.com/sandor/aabc19aa69f3d2d8c5dc549e85b2fe84

Would you be open for a little private chat? E-Mail? Whatever? You get my mail in my profile if yes...

[MrFrankel]

@sandor you can change the css as much as you like:) If you want to drop me an email feel free maorfrank@gmail.com.

Also if you can star this project and my latest project it would be appreciated https://github.com/MrFrankel/ngx-popper

[SudarshanGiri]

how can we change the units to inch