Fabric.js API

2,073 阅读1分钟

下面的列表包含了 Fabric.js 的一些常用对象及属性方法。

对象

  • fabric.Circle 圆
  • fabric.Ellipse 椭圆
  • fabric.Line 直线
  • fabric.Polygon
  • fabric.Polyline
  • fabric.Rect 矩形
  • fabric.Triangle 三角形

方法

  • add(object) 添加
  • insertAt(object,index) 添加
  • remove(object) 移除
  • forEachObject 循环遍历
  • getObjects() 获取所有对象
  • item(int) 获取子项
  • isEmpty() 判断是否空画板
  • size() 画板元素个数
  • contains(object) 查询是否包含某个元素
  • fabric.util.cos
  • fabric.util.sin
  • fabric.util.drawDashedLine 绘制虚线
  • getWidth()
  • setWidth()
  • getHeight()
  • clear() 清空
  • renderAll() 重绘
  • requestRenderAll() 请求重新渲染
  • rendercanvas() 重绘画板
  • getCenter().top/left 获取中心坐标
  • toDatalessJSON() 画板信息序列化成最小的
  • json toJSON() 画板信息序列化成
  • json moveTo(object,index) 移动
  • dispose() 释放
  • setCursor() 设置手势图标
  • getSelectionContext()获取选中的context
  • getSelectionElement()获取选中的元素
  • getActiveObject() 获取选中的对象
  • getActiveObjects() 获取选中的多个对象
  • discardActiveObject()取消当前选中对象
  • isType() 图片的类型
  • setColor(color) = canvas.set("full","")
  • rotate() 设置旋转角度
  • setCoords() 设置坐标

事件

  • object:added
  • object:removed
  • object:modified
  • object:rotating
  • object:scaling
  • object:moving
  • object:selected 这个方法v2已经废弃,使用selection:created替代,多选不会触发
  • before:selection:cleared
  • selection:cleared
  • selection:updated
  • selection:created
  • path:created
  • mouse:down
  • mouse:move
  • mouse:up
  • mouse:over
  • mouse:out
  • mouse:dblclick

常用属性

  • canvas.isDrawingMode = true; 可以自由绘制
  • canvas.selectable = false; 控件不能被选择,不会被操作
  • canvas.selection = true; 画板显示选中
  • canvas.skipTargetFind = true; 整个画板元素不能被选中
  • canvas.freeDrawingBrush.color = "#E34F51" 设置自由绘画笔的颜色
  • freeDrawingBrush.width 自由绘笔触宽度

IText的方法

  • selectAll() 选择全部
  • getSelectedText() 获取选中的文本
  • exitEditing() 退出编辑模式