Fabric.js ActiveSelection getCoords() 方法介绍

1. 概述

getCoords() 方法是 Fabric.js 中提供给 ActiveSelection 类型对象使用的方法。该方法返回选中物体的四个角点坐标、中心点坐标和旋转角度。

2. 语法

activeObject.getCoords();

其中，activeObject 指代 ActiveSelection 对象。

3. 返回值

getCoords() 方法返回一个对象，其键值对如下:

• bl: 左下角 (bottom left) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• br: 右下角 (bottom right) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• tl: 左上角 (top left) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• tr: 右上角 (top right) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• mt: 上部中心点 (middle top) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• mb: 下部中心点 (middle bottom) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• ml: 左部中心点 (middle left) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• mr: 右部中心点 (middle right) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• mtr: 中心点 (middle top) 坐标，该值为一个数组，包含两个元素，分别表示该点的横坐标和纵坐标。
• angle: 选中物体的旋转角度，以弧度为单位。默认值为 0。

4. 示例

var activeObject = canvas.getActiveObject();
var coords = activeObject.getCoords();
console.log(coords);

输出结果（根据实际选中物体不同而会有不同结果）：

{
  "bl": [123, 456],
  "br": [456, 789],
  "tl": [123, 234],
  "tr": [456, 345],
  "mt": [289.5, 234],
  "mb": [289.5, 789],
  "ml": [123, 522],
  "mr": [456, 522],
  "mtr": [289.5, 234],
  "angle": 0
}

5. 注意事项

getCoords() 方法只能在 ActiveSelection 对象上调用，不能在其他对象上使用。否则会抛出 getCoords is not a function 错误。