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

【问题标题】：How to get the 4 corners X, Y coordinates value of a FabricJS rectangle如何获取 FabricJS 矩形的 4 个角 X、Y 坐标值
【发布时间】：2019-06-10 18:54:04
【问题描述】：

我正在尝试制作一个在图像上绘制形状的工具，我需要将绘制状态以 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

【问题讨论】：

右上 = x + 宽度，左下 = y + 高度
FabricJs 会跟踪宽度和高度吗？
@RoryMcCrossan 此方法不适用于角度不同于 90 度的形状。
@trixo 是的 FabricJS 会跟踪宽度和高度，但由于形状的角度可以不同于 90 度，因此简单地添加 x+width 和 y+height 将不起作用。虽然可以使用数学，但我想知道 FabricJS 是否提供了开箱即用的功能。
@MDRobinIslam 是正确的。

标签： javascript jquery math fabricjs

【解决方案1】：

你试过oCoords/aCoords吗？

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

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

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

更新

由于您想存储坐标以从 db 数据中检索和绘制矩形，所以我认为最好不要存储 4 个角坐标而是左、顶、宽、高、角度、？比例。这样您就可以根据此属性创建矩形。如果你不需要它来使用 Fabricjs，那么你可以使用我之前提到的oCoords。

getCoords 方法也是可以使用的选项

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

【讨论】：

非常感谢！ getCoords 正是我想要的。

【解决方案2】：

使用toJSON进行序列化，使用loadFromJSON在canvas中加载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>

【讨论】：