Fabricjs：在拖动时显示水平和垂直位置线 [英] Fabricjs: Show horizontal and vertical position line on drag

问题描述

我正在使用fabricjs 1.5而且我被困在了东西上。每当我开始拖动对象时，我想水平和垂直显示虚线。这些行的目的是向用户提供关于画布和其他对象的对象在哪里的一些想法。
我在很多网站上搜索过，找不到任何解决方案，甚至找不到与此问题相关的任何参考文献，因此我无法启动任何内容。

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.

推荐答案

centering_guidelines ，您可以使用此库绘制中心线。 aligning_guidelines 这用于在对象之间绘制线条。

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

DEMO

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.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

这篇关于Fabricjs：在拖动时显示水平和垂直位置线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！