Fabric.js Circle calcCoords() 方法

简介

calcCoords() 是 Fabric.js Circle 对象的方法，用于计算圆形的半径、中心点和顶点等信息。

语法

calcCoords()

返回值

calcCoords() 方法返回一个对象，包含以下属性：

• tl: 左上角点坐标
• tr: 右上角点坐标
• bl: 左下角点坐标
• br: 右下角点坐标
• mt: 顶部点坐标
• mb: 底部点坐标
• ml: 左侧点坐标
• mr: 右侧点坐标
• mtr: 可以用于重新调整元素大小的旋转控件坐标
• left: 左侧位置坐标
• top: 顶部位置坐标
• width: 圆形宽度
• height: 圆形高度
• scalingX: x 方向缩放比例
• scalingY: y 方向缩放比例
• skewX: x 方向的倾斜度
• skewY: y 方向的倾斜度

代码示例

var canvas = new fabric.Canvas('canvas');

var circle = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 50,
  top: 50
});

var coords = circle.calcCoords();
console.log(coords);

执行上述代码后，控制台打印出 calcCoords() 方法返回的对象。

{
  "tl": {"x": 0, "y": 0},
  "tr": {"x": 100, "y": 0},
  "bl": {"x": 0, "y": 100},
  "br": {"x": 100, "y": 100},
  "mt": {"x": 50, "y": 0},
  "mb": {"x": 50, "y": 100},
  "ml": {"x": 0, "y": 50},
  "mr": {"x": 100, "y": 50},
  "mtr": {"x": 50, "y": -25},
  "left": 50,
  "top": 50,
  "width": 100,
  "height": 100,
  "scalingX": 1,
  "scalingY": 1,
  "skewX": 0,
  "skewY": 0
}

注意事项

• calcCoords() 方法只能在渲染后调用。
• 对于正在编辑中的对象，calcCoords() 方法返回的坐标需要重新计算。