Как получить значение координат 4, X, Y прямоугольника FabricJS - PullRequest
Новая
       11

Как получить значение координат 4, X, Y прямоугольника FabricJS

0 голосов
/ 16 января 2019

Я пытаюсь создать инструмент для рисования фигур поверх изображения, и мне нужно сохранить состояние рисования в моей базе данных в формате JSON. Я могу легко создать фигуру, используя приведенную ниже форму, и использовать экспортер FabricJS JSON: 

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'rgba(51, 152, 219, 0.3)',
  width: 20,
  height: 20
});

Но проблема в данных JSON. FabricJS отслеживает только координаты top-left corner X, Y. Но мне нужно получить все координаты 4 углов X, Y значение и координаты 2 углов для формы line.

Примечание: форма может иметь угол, отличный от 90

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Используйте toJSON для сериализации и loadFromJSON для загрузки данных json на холст. 

var canvas = new fabric.Canvas('c');
var json;
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'rgba(51, 152, 219, 0.3)',
  width: 50,
  height: 50
});
canvas.add(rect);

function onSave(){
  json = canvas.toJSON();
}

function onLoad(){
 if(!json) return
 canvas.loadFromJSON(json,function(){
   canvas.requestRenderAll();
 })
}
canvas{
 border:1px solid;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas>
<button onclick='onSave()'>save</button>
<button onclick='onLoad()'>load</button>
0 голосов
/ 16 января 2019

Вы пробовали oCoords / aCoords?

Это свойство должно возвращать все углы с применением поворота

http://fabricjs.com/docs/fabric.Rect.html#oCoords

http://fabricjs.com/docs/fabric.Rect.html#aCoords

Обновление

Поскольку вы хотите сохранить координаты для извлечения и отрисовки прямоугольника обратно из данных в БД, тогда я думаю, что лучше хранить не 4 угловые координаты, а слева, сверху, ширину, высоту, угол, масштаб? Так что вы можете создать прямоугольник в зависимости от этих свойств. Если вам это не нужно для использования в Fabricjs, вы можете использовать oCoords, о котором я упоминал ранее.

getCoords Метод также можно использовать

http://fabricjs.com/docs/fabric.Rect.html#getCoords

...