Question

我正在尝试制作一种在图像上绘制形状的工具，我需要将绘制状态以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角X, Y坐标的轨迹。但是我需要获取X, Y形状的所有4个角坐标line值和2个角坐标数据。

注意：形状可能与90的角度不同

Answer 1

您尝试过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

Answer 2

使用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>

如何获取FabricJS矩形的4个角的X，Y坐标值

2 个答案: