绘图交互，全方位驾驭画布

前端

2023-10-08 15:37:42

Fabric.js交互简介
Fabric.js提供了一套丰富的交互操作事件，可以使用户与画布上的对象进行交互。

对画布的交互操作

以下是Fabric.js为对画布的交互操作提供的常见监听事件：

mouse:down：鼠标按下时触发。
mouse:move：鼠标移动时触发。
mouse:up：鼠标抬起时触发。

对画布上对象的操作

以下是Fabric.js为对画布上对象的交互操作提供的常见监听事件：

after:render：对象渲染完成后触发。
before:render：对象渲染之前触发。
mousedown：鼠标在对象上按下时触发。
mousemove：鼠标在对象上移动时触发。
mouseup：鼠标在对象上抬起时触发。
moving：对象移动时触发。
scaling：对象缩放时触发。
rotating：对象旋转时触发。

Fabric.js交互操作示例

实时预览文本

const canvas = new fabric.Canvas('canvas');
const text = new fabric.Text('Hello, world!', {
  left: 100,
  top: 100
});

text.on('change', function() {
  const newText = this.getText();
  // 在此处更新文本预览
});

canvas.add(text);

对象拖放

const canvas = new fabric.Canvas('canvas');
const circle = new fabric.Circle({
  radius: 50,
  left: 100,
  top: 100
});

circle.on('mousedown', function(e) {
  // 设置拖放模式
  this.set('draggable', true);
});

circle.on('mouseup', function(e) {
  // 取消拖放模式
  this.set('draggable', false);
});

canvas.add(circle);

对象缩放

const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
  width: 100,
  height: 100,
  left: 100,
  top: 100
});

rect.on('scaling', function(e) {
  const scaleX = this.scaleX;
  const scaleY = this.scaleY;
  // 在此处更新缩放预览
});

canvas.add(rect);