croquis.js

croquis.js는 누구나 쉽게 자신만의 드로잉툴을 개발할 수 있도록 도와줍니다.

croquis.js croquis.js는 누구나 쉽게 자신만의 드로잉툴을 개발할 수 있도록 도와줍니다.

브러시 만들기

setTool 메서드로 그림을 그릴 도구를 지정합니다. Croquis.Brush는 croquis.js의 기본 브러시 구현입니다.

var brush = new Croquis.Brush();
croquis.setTool(brush);

croquis.js에서 페인팅 도구를 사용하려면 down, move, up 메서드를 순서대로 호출해야 합니다.

down으로 그림 그리기를 시작하고, move를 연달아 호출하여 원하는 위치까지 그려나가며, up으로 그림 그리기 명령을 종료합니다. 그림을 그리는 도중에는 down을 중복해서 호출할 수 없습니다.

선그리기

down, move, up 메서드는 인자로 x, y값을 받습니다. 그림판 상의 좌표를 픽셀사이즈 기준으로 지정해야 하며 좌상단을 0, 0으로 하여 화면의 오른쪽으로 갈 수록 x값이 증가하고 아래쪽으로 갈 수록 y값이 증가합니다.

croquis.down(0, 0);
croquis.move(100, 100);
croquis.move(200, 100);
croquis.move(200, 200);
croquis.move(300, 300);
croquis.up(300, 300);

댓글

댓글 본문
작성자
비밀번호
버전 관리
0xABCDEF
현재 버전
선택 버전
graphittie 자세히 보기