fabricjs 튜토리얼
fabricjs 시작하기
수색…
비고
fabric.js는 HTML5 캔버스 용 강력하고 간단한 자바 스크립트 라이브러리입니다. HTML5 캔버스로 작업 할 수있는 대화 형 플랫폼을 제공합니다. 패브릭을 사용하면 간단한 기하학적 모양에서 복잡한 모양에 이르기까지 캔버스에 객체 / 모양을 만들 수 있습니다. fabric.js를 사용하여 이미지 작업을 할 수도 있습니다. fabric.js는 애니메이션도 지원합니다. 이미지를 드래그하거나 회전하여 크기를 조정하는 등의 작업을 할 수있는 컨트롤을 제공합니다. 함께 조작 할 수있는 모양 / 오브젝트를 그룹화 할 수 있습니다. canvas 요소뿐만 아니라 객체도 포함하여 이벤트를 지원합니다. 또한 기능성을 제공하여 캔버스를 SVG 또는 JSON으로 직렬화하고 필요할 때 다시 사용할 수 있습니다. 또한 jsdom 및 노드 캔버스 라이브러리의 도움으로 Node.js에서 실행중인 패브릭을 지원합니다.
설치 또는 설정
Fabric.js는 캔버스에 특정한 JS 라이브러리와 같습니다. 설치가 쉽고 시작하기 쉽습니다. 여기 에서 fabric.js를 다운로드하고 다른 JS 라이브러리처럼 프로젝트에 포함 시키면됩니다. 예를 들어 jQuery에서 사용하는 방법과 같습니다. 그런 다음 html 파일을 만들고 index.html을 다음과 같이 만듭니다.
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>
스크립트의 src 속성은 같은 폴더에있는 fabric.js 파일을 참조합니다. 다른 폴더에 보관하고 상대 경로를 지정할 수 있습니다. 그리고 당신은 잘 가게됩니다. 패브릭에 관한 더 많은 정보는 Offcial 페이지를 방문하십시오. 매우 기본적인 데모가 있습니다.
안녕하세요 세계
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)
이 예제는 fabricj를 사용하여 'Hello world From Fabric JS' 텍스트를 작성합니다. 데모