Fabric.js Rect 类完整参考

简介

Fabric.js是一个纯JavaScript的图形库，提供强大的绘图功能和交互性，可以在浏览器中创建高品质的图形。

Rect类是一个矩形对象的表示，可以设置矩形的位置，大小，样式和事件。

构造函数

new fabric.Rect([options])

参数

• options（可选）：一个包含矩形选项的配置对象，支持以下属性：

  • left: number - 矩形左侧的x坐标
  • top: number - 矩形上方的y坐标
  • width: number - 矩形的宽度
  • height: number - 矩形的高度
  • fill: string - 矩形的填充颜色
  • opacity: number - 矩形不透明度（0-1之间）
  • stroke: string - 矩形的描边颜色
  • strokeWidth: number - 矩形的描边宽度
  • strokeOpacity: number - 矩形描边的不透明度（0-1之间）
  • strokeLineCap: string - 矩形描边的端点类型（"butt", "round", "square"）
  • strokeLineJoin: string - 矩形描边的转角类型（"bevel", "miter", "round"）
  • strokeDashArray: Array - 矩形描边的虚线模式

方法

animate(options)

在给定的时间内以动画形式改变矩形的属性。

参数

• options：一个包含动画选项的配置对象，支持以下属性：

  • duration: number - 动画的持续时间（以毫秒为单位）
  • easing: function - 动画的时间函数
  • onChange: function - 动画中每个阶段的回调函数
  • onComplete: function - 动画完成时的回调函数
  • abort: function - 如果返回 true，则停止动画

set(options)

更改矩形的属性。

参数

• options：一个包含属性选项的配置对象，支持以下属性：

  • left: number - 矩形左侧的x坐标
  • top: number - 矩形上方的y坐标
  • width: number - 矩形的宽度
  • height: number - 矩形的高度
  • fill: string - 矩形的填充颜色
  • opacity: number - 矩形不透明度（0-1之间）
  • stroke: string - 矩形的描边颜色
  • strokeWidth: number - 矩形的描边宽度
  • strokeOpacity: number - 矩形描边的不透明度（0-1之间）
  • strokeLineCap: string - 矩形描边的端点类型（"butt", "round", "square"）
  • strokeLineJoin: string - 矩形描边的转角类型（"bevel", "miter", "round"）
  • strokeDashArray: Array - 矩形描边的虚线模式

toObject(propertiesToInclude)

将矩形转换为对应的JSON对象。

参数

• propertiesToInclude（可选）：包含矩形属性的字符串数组。如果未指定，则转换所有属性。

返回值

• 一个包含矩形属性的JSON对象。

事件

"added"

当矩形添加到画布上时触发。

"modified"

当矩形的属性被修改时触发。

"removed"

当从画布中移除矩形时触发。

示例

// 创建矩形并添加到画布上
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red'
});

canvas.add(rect);

// 修改矩形的宽度和高度
rect.set({
  'width': 100,
  'height': 100
});

// 动画修改矩形的位置和不透明度
rect.animate({
  'left': 200,
  'top': 200,
  'opacity': 0.5
}, {
  duration: 1000,
  onChange: canvas.renderAll.bind(canvas),
  onComplete: function() {
    console.log('动画完成');
  }
});

// 将矩形转换为JSON对象
var rectJSON = rect.toObject();