Fabric js 帆布活动演示

<canvas id="c" width="400" height="400"></canvas>

var canvas = new fabric.Canvas("c");

canvas.on('mouse:up', function () {
  console.log('Event mouse:up Triggered');
});

canvas.on('mouse:down', function () {
  console.log('Event mouse:down Triggered');
});

canvas.on('after:render', function () {
  console.log('Event after:render Triggered');
});

canvas.on('object:moving', function () {
  console.log('Event object:moving Triggered');
});

canvas.on('object:modified', function () {
  console.log('Event object:modified Triggered');
});

var text = new fabric.Textbox('Hello world', {
  width:250,
  cursorColor :"blue"
});
canvas.add(text);

上面的代码显示了 Fabric.js 中的事件 API 的工作方式。通过在画布实例上调用 on，甚至在 Fabric.js 上调用其他对象（如 Rect 实例），你可以监听它们的事件，当触发侦听器时，也会触发传递给它们的回调。