I am using fabricjs 1.5 and I am stuck on on thing. I want to show the dotted lines horizontally and vertically whenever I start to drag my object. Purpose of these lines is to give some idea to the user that where is the object with respect to the canvas and other objects. I have searched on many websites and could not find any solution or even any reference related to this problem and hence I could not start anything.

It would be great help if someone can put me in right direction. Thanks.

I am using fabricjs 1.5 and I am stuck on on thing. I want to show the dotted lines horizontally and vertically whenever I start to drag my object. Purpose of these lines is to give some idea to the user that where is the object with respect to the canvas and other objects. I have searched on many websites and could not find any solution or even any reference related to this problem and hence I could not start anything.

It would be great help if someone can put me in right direction. Thanks.

• javascript
• angularjs
• canvas
• fabricjs

Share Improve this question Follow edited Jul 6, 2018 at 11:32 Ashish asked Jul 5, 2018 at 6:07 AshishAshish 49822 gold badges88 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

centering_guidelines, you can use this library to draw center lines. aligning_guidelines this for drawing lines between objects.

DEMO

var canvas = new fabric.Canvas('canvas');
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'green',
  originX:'center',
  originY:'center',
  left:canvas.width/2,
  top:canvas.height/2,
});
var rect2 = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'green',
  originX:'center',
  originY:'center',
  left:canvas.width/2,
  top:canvas.height/2,
});
canvas.add(rect,rect2);

canvas {
  border: 1px solid #999;
  margin-top: 10px;
}

<script src="https://rawgit./kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://rawgit./fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit./fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

I found a library which points us to the right direction. You can tweak the code to get exactly what you looking for here. It helped me and fixed almost what I was looking for.

I am posting the answer if someone else ends up on my question.

https://github./fabricjs/fabric.js/blob/master/lib/aligning_guidelines.js

Hope it helps someone.