FabricJs

• 작성자: J201_최명성

---

• Init

Init

// npm install fabric @types/fabirc --save

import { fabric } from "fabric";

function FabricCanvas() {
	useEffect(() => {
    canvas.current = initCanvas();

    // destroy fabric on unmount
    return () => {
      canvas.current.dispose();
      canvas.current = null;
    };
  }, []);

  const initCanvas = () =>
    new fabric.Canvas("canvas", {
      height: 800,
      width: 800,
      backgroundColor: "pink",
    });
	return (<>
		<canvas id="canvas" />
		</>
	);
}

CRUD

CREATE

const rect = new fabric.Rect({
      height: 280,
      width: 200,
      top: 100,
      left: 100,
      fill: "yellow",
    });

canvas.currnet.add(rect)

READ

const rect = new fabric.Rect({
      height: 280,
      width: 200,
      top: 100,
      left: 100,
      fill: "yellow",
    });

rect.get('속성') //ex) height, widht, top, left...

UPDATE

const rect = new fabric.Rect({
      height: 280,
      width: 200,
      top: 100,
      left: 100,
      fill: "yellow",
    });

rect.set('속성', value) 

DELETE

const rect = new fabric.Rect({
      height: 280,
      width: 200,
      top: 100,
      left: 100,
      fill: "yellow",
    });

canvas.currnet.remove(rect)

Event

Canvas

canvas.current.on("eventname", callback);

• Canvas Event 종류
  • object:modified at the end of a transform or any change when statefull is true
  • object:rotating while an object is being rotated from the control
  • object:scaling while an object is being scaled by controls
  • object:moving while an object is being dragged
  • object:skewing while an object is being skewed from the controls
  • before:transform before a transform is is started
  • before:selection:cleared
  • selection:cleared
  • selection:updated
  • selection:created
  • path:created after a drawing operation ends and the path is added
  • mouse:down
  • mouse:move
  • mouse:up
  • mouse:down:before on mouse down,event: before the inner fabric logic runs
  • mouse:move:before on mouse move,event: before the inner fabric logic runs
  • mouse:up:before on mouse up,event: before the inner fabric logic runs
  • mouse:over
  • mouse:out
  • mouse:dblclick whenever a native dbl click event fires on the canvas.
  • event:dragover
  • event:dragenter
  • event:dragleave
  • drop:before before drop event. same native event.event: This is added to handle edge cases
  • event:drop
  • after:render at the end of the render process,event: receives the context in the callback
  • before:render at start the render process,event: receives the context in the callback

Object

const rect = new fabric.Rect({
      height: 280,
      width: 200,
      top: 100,
      left: 100,
      fill: "yellow",
    });

rect.on("eventname", callback);

• Object Event 종류
  • event:added
  • event:removed
  • event:selected
  • event:deselected
  • event:modified
  • event:modified
  • event:moved
  • event:scaled
  • event:rotated
  • event:skewed
  • event:rotating
  • event:scaling
  • event:moving
  • event:skewing
  • event:mousedown
  • event:mouseup
  • event:mouseover
  • event:mouseout
  • event:mousewheel
  • event:mousedblclick
  • event:dragover
  • event:dragenter
  • event:dragleave
  • event:drop

참고 :

[Working with events · fabricjs/fabric.js Wiki](https://github.com/fabricjs/fabric.js/wiki/Working-with-events)

Interactive Object

그 외의 기능

Customization

object.set({
	borderColor: 'red',
	cornerColor: 'black'
});

Free Drawing

new fabric.Canvas("canvas", {
      height: 800,
      width: 800,
      backgroundColor: "pink",
      isDrawingMode: true,
    });