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 例項），你可以監聽它們的事件，當觸發偵聽器時，也會觸發傳遞給它們的回撥。