fabric.js는 무엇인가?

2023년 07월 21일 in Canvas

HTML Canvas Library

1. fabric.js?
2. 이벤트 핸들링

제가 프로젝트에서 사용하고 있는 라이브러리를 기록할까 합니다. 구글링해도 한글로 된 자료가 많이 없어
맨땅에 헤딩을 많이 하다 보니 기록을 남겨놓으려고 합니다.

fabric.js?

HTML Canvas Library 종류가 다양하다 pixi.js, Paper.js, EaselJS 등 그 중에 하나의 라이브러리입니다.
이 라이브러리를 쓰는 이유는 간단하다. 프로젝트에 투입되었는데 이미 fabric.js로 구축이 되어있었다. 사용해보니 굉장히 흥미롭고 재밌었습니다. 그래서 오늘 글을 쓰고 있죠ㅎㅎ

fabric.js

기본적으로 fabric.js는 요소 하나하나 객체로 만들어져있다.

제공하는 도형 객체 유형들

• fabric.Circle
• fabric.Ellipse
• fabric.Line
• fabric.Polygon
• fabric.Polyline
• fabric.Rect
• fabric.Triangle

이외에 많은 객체 유형들을 지원하고 있습니다. 그중 제가 많이 쓰는 객체 유형은 i-text, path, image, circle, rect 정도 인거 같습니다.
종류를 알아봤으니 사용법 예제를 작성해 보겠습니다.

캔버스에 텍스트를 추가하는 방법

const canvas = new fabric.Canvas('canvas')

const text = new fabric.IText('텍스트를 입력해주세요', {
  top: 150,
  left: 150
})

canvas.add(text).renderAll()

캔버스에 이미지를 불러오는 방법

fabric.Image.fromURL('test.png', (img) => {
  canvas.add(img).renderAll()
}, {
  top: 150,
  left: 150,
  crossOrigin: 'anonymous'
})

이벤트 핸들링

fabric 이벤트 문서

fabric.js는 캔버스, 오브젝트에서 처리하는 이벤트를 등록할 수 있습니다.

캔버스에서 처리하는 이벤트

// 캔버스 마우스 클릭시
canvas.on('mouse:down', (e: fabric.IEvent) => {
  const target = e.target // 마우스 클릭한 곳에 오브젝트
})

// 캔버스 객체 이동시
canvas.on('object:moving', (e: fabric.IEvent) => {
  const target = e.target // 이동중인 객체
})

// 캔버스 객체 선택시
canvas.on('selection:created', (e: fabric.IEvent) => {
  const target = e.target // 선택한 객체
})

// 캔버스 텍스트 객체 내용 수정시
canvas.on('text:editing:exited', (e: fabric.IEvent) => {
  const target = e.target // 텍스트 내용 수정한 객체
})

위 이벤트를 활용하여 여러가지 응용이 가능합니다. 예시로 object:modified를 사용해서 캔버스 수정 시에 히스토리를 남기고 실행 취소, 되돌리기 기능을 예시로 만들어 보겠습니다.

canvas.on('object:modified', saveSnapShot)

let index = 0
const history = []
const undo = () => {
  index --
  const canvasData = history[index]
  renderCanvas(canvasData)
}

const redo = () => {
  index ++
  const canvasData = history[index]
  renderCanvas(canvasData)
}

const renderCanvas = (canvasData) => {
  canvas.loadFromJSON(canvasData, () => {
    canvas.renderAll()
  })
}

const saveSnapShot = () => {
  history.push(JSON.stringify(canvas.toObject()))
  index = history.length - 1
}

오브젝트에서 처리하는 이벤트

const canvas = new fabric.Canvas('canvas')

const text = new fabric.IText('텍스트를 입력해주세요', {
  top: 150,
  left: 150
})

// 텍스트 오브젝트 수정된 후 실행
text.on('modified', (e: fabric.IEvent) => {
  const target = e.target // 수정한 오브젝트
})

canvas.add(text).renderAll()

이렇게 특정 오브젝트에만 이벤트를 등록할 수도 있습니다.

fabric 이벤트 데모