이전에
itstudy-mary.tistory.com/365?category=900951
Javascript] 강력한 캔버스 라이브러리, fabric
웹에서 잠깐 좌표를 그리고, 그 좌표를 가지고 와야 할 일이 있어서 자바스크립트를 쓰기로 했다. 이쯤이면 슬슬 그래픽 엔지니어로 진화할 것 같다. 기존에도 자바스크립트에는 그래픽을 지원
itstudy-mary.tistory.com
이 포스팅에서, fabric.js의 큰 장점은 그려지는 개체들을 하나하나 객체화 시킨다는데에 장점을 둔다고 했다.
기존의 canvas 라이브러리로 이것을 만드려 하면, 마우스가 움직일 때 마다 만들어지는 선을 하나하나 지우고, 랜더링 하고, 다시 랜더링 된 선을 지우고 해야하지만, fabric.js는 랜더링을 선언허지 않으면 객체화 된 선이 결정되지 않는데다가, 객체 하나하나의 좌표 설정 등이 가능하다. 즉, 랜더링 - 삭제 - 랜더링 - 삭제의 복잡한 과정을 거치지 않아도 된다는 얘기이다.
앞서 포스팅처럼 fabric.js를 본인의 프로젝트에 부여했다면, 이제부터 간단하다.
먼저, html에 캔버스를 하나 그려두어야 한다.
<body>
<canvas id="c" width="2000" height="2000" style="border:1px solid #ccc"></canvas>
</body>
다음 js 파일을 작성한다.
//기본 랜더링 변수
var mCanvas;
var line;
var isDown;먼저 전역변수로 필요한 변수를 선언한다.
window.onload = function drawOneLine(){
initHTML();
setListener();
}
function initHTML(){
mCanvas = window._canvas = new fabric.Canvas('c');
mCanvas.selection = false;
}
기본적으로 해야 할 일은 canvas에 fabric을 부착하는 일이다. 이 때, 캔버스의 id를 찾아 부착하는 형태이기 때문에, html에서도 보이겠지만, 반드시 canvas에 id를 부여해두어야 한다.
fabric.js는 기본적으로 객체가 그려지면, 그 객체를 선택하여 이동시킬 수 있는데, selection=false를 해두면, 선택이 불가하게 된다.
다음 본격적으로 선을 랜더링한다.
function setListener(){
mCanvas.on('mouse:down', function(o){
isDown = true
var point = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(point, {
id : objectId,
strokeWidth : 2,
fill : 'rgba(0,0,0,128)',
stroke : 'rgba(0,0,0,0.5)',
originX : 'center',
originY : 'center'
});
mCanvas.add(line);
}); 먼저 마우스를 올렸을 때, 그 점을 선의 첫번째 좌표로써 취급한다.
이 때,
var point = [pointer.x, pointer.y, pointer.x, pointer.y];
의 첫번째와 두번째 변수는 선의 시작점을, 세번째와 네번째 변수는 선의 끝 점의 좌표를 의미하기 때문에 올바르게 시작점을 랜더링 하기 위해서, 세번째와 네번째 점을 시작점과 같게 두는 것이다.
선의 설정은 기본적으로 json과 유사한 형태를 가진다.
fill과 stroke의 색은 기본적으로 rgba, rgb, hex 모두 지원한다.
mCanvas.on('mouse:move', function(o){
if(!isDown) {
return;
}
line.set({x2 : firstVector[0], y2 : firstVector[1]});
mCanvas.renderAll();
});
이제 마우스를 움직이는 모션을 만드는데,
혹시라도, 리스너에서 마우스가 다운되지 않은 상태에서 move하는 일이 일어나지 않도록 사전에 변수를 만들어서 차단한다(isDown).
set함수를 이용해 x2와 y2(끝 점의 좌표)를 설정하고, 캔버스에 add된 요소들을 renderAll 해주기만 하면 선이 그려진다. 이 때, 전역변수로 선언한 line 객체가 하나이기 때문에, 랜더링이 되어 있어도 객체의 수정이 자유롭게 된다.
mCanvas.on('mouse:up', function(o){
isDown = false;
});마지막으로 마우스를 떼었을 때, isDown 변수를 false 로 초기화한다.
- 전체 js 코드
//기본 랜더링 변수
var mCanvas;
var line;
var isDown;
window.onload = function drawOneLine(){
initHTML();
setListener();
}
function initHTML(){
mCanvas = window._canvas = new fabric.Canvas('c');
mCanvas.selection = false;
}
function setListener(){
mCanvas.on('mouse:down', function(o){
isDown = true
var point = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(point, {
id : objectId,
strokeWidth : 2,
fill : 'rgba(0,0,0,128)',
stroke : 'rgba(0,0,0,0.5)',
originX : 'center',
originY : 'center'
});
mCanvas.add(line);
});
mCanvas.on('mouse:move', function(o){
if(!isDown) {
return;
}
line.set({x2 : firstVector[0], y2 : firstVector[1]});
mCanvas.renderAll();
});
mCanvas.on('mouse:up', function(o){
isDown = false;
});
}
'HTML+CSS+Javascript > Javascript' 카테고리의 다른 글
| [javascript] 스크롤마다 한 섹션씩 이동하는 모션 이벤트 만들기 (9) | 2021.07.08 |
|---|---|
| Javascript] 강력한 캔버스 라이브러리, fabric (0) | 2021.04.08 |
| 12. HTML 문서의 동적 구성 (0) | 2020.03.13 |
| 11. document (0) | 2020.03.13 |
| 10. DOM 객체 다루기 (0) | 2020.03.12 |
