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

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 坐标。但我需要获取所有 4 个角坐标 X, Y 值和 line 形状的 2 个角坐标数据。

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

不同

Answer 1

你试过了吗oCoords/aCoords？

这个属性应该return应用旋转的所有角

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 to serialize and loadFromJSON加载json数据到canvas。

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 坐标值

How to get the 4 corners X, Y coordinates value of a FabricJS rectangle

javascript

math

jquery

fabricjs