[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js

사용자-1 2017. 7. 17. 00:00

자바스크립트로 되어있는 HTML5 Canvas 라이브러리

사용 준비

다음 홈페이지에서 Fabric.js 최신 버전들 다운받아 압축을 푼다.
- http://fabricjs.com/

dist/ 디렉토리 밑의 fabric.min.js(배포용) 혹은 fabric.js(개발용) 파일을 포함하여 아래와 같이 뼈대 코드를 작성한다.

index.html

<html>
<head>
    <script src="fabric.min.js"></script>
    <meta charset="utf-8">
</head>

<body>
    <canvas id="c" width="400" height="400" style="border:1px solid #000000"></canvas>
    <script>
        // 이 부분에 fabric js 코드가 들어간다.
    </script>
</body>
</html>

사용 예제

다음은 작은 사각형을 그리는 예제이다.

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

다음은 간단히 이미지 파일을 표시하는 예제이다. (같은 경로에 my_image.png 파일이 필요하다.)

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('my_image.png', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(0.5).setFlipX(true);
  canvas.add(oImg);
});

Canvas vs. StaticCanvas

Fabric.js는 기본적으로 각 오브젝트에 아래와 같이 크기 변경, 이동 및 회전이 가능한 핸들이 붙어서 출력되게 된다.

이를 원하지 않을 경우는 Canvas 대신에 StaticCanvas를 사용하여 Canvas를 생성하면 된다.

var canvas = new fabric.StaticCanvas('c');

참고 사이트

http://fabricjs.com/articles/ - tutorial

<테스트 환경>
- OS : Windows 7
- Fabric.js 버전 : 1.7.16

저작자표시 비영리 동일조건 (새창열림)