Fabricjs: показывать горизонтальную и вертикальную линию при перетаскивании - PullRequest
Новая
       8

Fabricjs: показывать горизонтальную и вертикальную линию при перетаскивании

0 голосов
/ 05 июля 2018

Я использую fabricjs 1.5, и я застрял на чем-то. Я хочу показывать пунктирные линии по горизонтали и вертикали всякий раз, когда начинаю перетаскивать свой объект. Цель этих строк - дать пользователю некоторое представление о том, где находится объект относительно холста и других объектов. Я искал на многих веб-сайтах и ​​не мог найти какое-либо решение или даже ссылку, связанную с этой проблемой, и, следовательно, я не мог ничего начать.

Было бы здорово помочь, если бы кто-то мог направить меня в правильном направлении. Спасибо.

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Я нашел библиотеку, которая указывает нам правильное направление. Вы можете настроить код, чтобы получить именно то, что вы ищете здесь. Это помогло мне и исправило почти то, что я искал.

Я выкладываю ответ, если кто-то еще ответит на мой вопрос.

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

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 05 июля 2018

centering_guidelines , вы можете использовать эту библиотеку для рисования центральных линий. aligning_guidelines это для рисования линий между объектами.

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>
...