fabricjs
Fabricjs 캔버스 이벤트

통사론

1. on (eventName, handler) - 객체에 대한 콜백과 함께 이벤트 리스너를 부착합니다.

2. off (eventName, handler) - 객체에서 이벤트 리스너를 제거합니다. 이 함수를 호출하면 모든 객체의 이벤트 리스너가 제거됩니다.

3. trigger (eventName, optionsopt) - 이벤트 및 선택적 옵션 객체를 시작합니다.

매개 변수

비고

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가 작동하는 방법을 표시합니다. Canvas 인스턴스를 호출하거나 Rect 인스턴스와 같은 Fabric.js 다른 객체를 호출 on 이벤트를 수신 할 수 있으며 리스너가 트리거되면 전달 된 콜백도 트리거됩니다.