转换
旋转角度 angle
let triangle = new fabric.Triangle({ top: 100, left: 100, width: 80, height: 100, fill: 'blue', angle: 30 // 旋转30度 })
缩放 scaleX 和 scaleY
let triangle = new fabric.Triangle({ top: 100, left: 100, width: 80, height: 100, fill: 'blue', scaleX: 2, // x轴方向放大2倍 scaleY: 2 // y轴方向放大2倍 })
反转 scaleX 和 scaleY
let triangle = new fabric.Triangle({ top: 100, left: 100, width: 80, height: 100, fill: 'blue', scaleY: -1 // scale是负数时，图形会反转 })
平移 top 和 left
let triangle = new fabric.Triangle({ top: 100, // 移动 left: 100, width: 80, height: 100, fill: 'blue', })
分组
建组
const canvas = new fabric.Canvas('canvas') // 椭圆 const ellipse = new fabric.Ellipse({ top: 20, left: 20, rx: 100, ry: 50, fill: '#ddd', originX: 'center', // 旋转x轴：left, right, center originY: 'center' // 旋转y轴：top, bottom, center }) // 文本 const text = new fabric.Text('Hello World', { top: 40, left: 20, fontSize: 20, originX: "center", originY: "center" }) // 建组 const group = new fabric.Group([ellipse, text], { top: 50, // 整组距离顶部100 left: 100, // 整组距离左侧100 angle: -10, // 整组旋转-10deg }) canvas.add(group)
操作组
常用组方法
getObjects() // 返回一组中所有对象的数组 size() // 所有对象的数量 contains() // 检查特定对象是否在 group 中 item() // 组中元素 forEachObject() // 遍历组中对象 add() // 添加元素对象 remove() // 删除元素对象 fabric.util.object.clone() // 克隆 // 控制第一个元素（椭圆） group.item(0).set('fill', '#ea5455') // 控制第二个元素（文本） group.item(1).set({ text: '雷猴，世界', fill: '#fff' })
打散分组
group.toActiveSelection() // 先获取当前选中的对象，然后打散 canvas.getActiveObject().toActiveSelection()
动画
绝对值动画
const rect = new fabric.Rect({ left: 100, top: 100, width: 100, height: 100, fill: 'red' }) // 设置矩形动画 // animate(动画属性, 动画的结束值, [画的详细信息]) rect.animate('angle', "-50", { // // 每次刷新的时候都会执行 onChange: canvas.renderAll.bind(canvas), }) // { // rom：允许指定可设置动画的属性的起始值（如果我们不希望使用当前值）。 // duration：默认为500（ms）。可用于更改动画的持续时间。 // onComplete：在动画结束时调用的回调。 // easing：缓动功能。 // }
相对值动画
// 请注意第二个参数：+=360 rect.animate('angle', '+=360', { onChange:canvas.renderAll.bind(canvas), // 每次刷新的时候都会执行 duration: 2000, // 执行时间 easing: fabric.util.ease.easeOutBounce, // 缓冲效果 })
事件
官方案例: http://fabricjs.com/events
const rect = new fabric.Rect({ top: 20, left: 20, width: 100, height: 50, fill: '#9896f1' }) // 给矩形添加一个选中事件 rect.on('selected', options => { console.log('选中矩形啦', options) }) // 添加画布点击事件 canvas.on('mouse:down', options => { console.log(`x轴坐标: ${options.e.clientX}; y轴坐标: ${options.e.clientY}`) }) // 移除画布点击事件 canvas.off('mouse:down')
自由绘画
const canvas = new fabric.Canvas('canvas', { isDrawingMode: true, // 开启绘图模式 }) // 设置画笔颜色 canvas.freeDrawingBrush.color = '#11999e' // 设置画笔粗细 canvas.freeDrawingBrush.width = 10 // 画笔投影 canvas.freeDrawingBrush.shadow = new fabric.Shadow({ blur: 10, offsetX: 10, offsetY: 10, affectStroke: true, color: '#30e3ca', })
禁止部分操作
const rect = new fabric.Rect({ top: 100, left: 100, width: 100, height: 50, fill: '#ffde7d' }) // 不允许水平移动 rect.lockMovementX = true // 不允许垂直移动 rect.lockMovementY = true // 禁止旋转 rect.lockRotation = true // 禁止水平缩放 rect.lockScalingX = true // 禁止垂直缩放 rect.lockScalingY = true // 不允许直接从画布框选 canvas.selection = false
