자바스크립트로 되어있는 HTML5 Canvas 라이브러리
사용 준비
- 다음 홈페이지에서 Fabric.js 최신 버전들 다운받아 압축을 푼다.
- 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);
// 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는 기본적으로 각 오브젝트에 아래와 같이 크기 변경, 이동 및 회전이 가능한 핸들이 붙어서 출력되게 된다.
var canvas = new fabric.StaticCanvas('c');
참고 사이트
- http://fabricjs.com/articles/ - tutorial
<테스트 환경> - OS : Windows 7 - Fabric.js 버전 : 1.7.16
'1. 연구 모듈 > 비분류' 카테고리의 다른 글
| [React Native] react-native init시 Unexpected token ... 에러가 발생하는 경우 (0) | 2017.08.06 |
|---|---|
| [겉핥기 프로젝트] React Native 설치 및 샘플 코드 실행 (안드로이드) (0) | 2017.08.03 |
| 라즈베리파이 제로 TRAVELShooting (0) | 2017.06.28 |
| 테스트용 웹 서버 간단히 구동하기 (Node.js 사용) (0) | 2017.06.09 |
| Atom 에디터에서 Markdown -> 마인드맵 변환하기 (0) | 2017.02.12 |
