[Javascript] HTML5 canvas & fabric.js
❓ fabric.js
- Javascript HTML5 canvas library
- HTML5 canvas를 쉽게 다룰수 있게한 라이브러리로 canvas위에 그린 그림들을 "객체(object)"로 관리 합니다.
- Demo : http://fabricjs.com/
- Documents : https://github.com/fabricjs/fabric.js/wiki
🌟 canvas 사이즈 변경 이벤트
- canvas는 width와 height를 100%로 설정하면 안된다(적용이 안됨).
- fabricjs를 이용하면 canvas의 사이즈를 변경시, canvas위에 그린 배경과 요소들이 자동으로 크기가 변경된다.
- window resize 이벤트 발생 시 처리 순서
1) 화면 변경 비율을 계산.
2) canvas 사이즈를 변경.
- canvas.setHeight(), canvas.setWidth()
3) background image 존재하는 경우 다시 그림.
- canvas.setBackgroundImage();
4) render all
- canvas.requestRenderAll();
5) freeDrawing모드인 경우 brush width를 재 설정해줘야 한다.
- canvas.freeDrawingBrush.width = 펜두께 * 캔버스 scale값;
🌟 도형(사각형/원) 그리기
- 이벤트 순서
1) mouse down: 도형 그릴 시작(x,y좌표)점 확인. 도형을 그림.
2) mouse move: 포인터 이동에 따라 좌표를 계산해서 도형의 크기를 변경해준다.
3) mouse up: 도형 저장.
- 사각형/원 : https://codepen.io/subhasishwebdev/pen/jyOeya
🌟 Eraser 기능을 사용할 수 없다.
- 지우개로 지우는 기능을 구현 할 수는 있지만, 객체들이 layer로 쌓이기 때문에 오류가 발생한다.
- 오류 : 지우개로 지운 부분도 객체로 층을 갖기 때문에 이전에 그린 객체들을 지우개 지운 영역 밖으로 움직이게 되면
지우개 효과가 없어진다.
- ex) 사각형 그린 후 지우개로 지운 다음 사각형을 움직이면 지우개 영역을 벗어난 사각형 일부분이 되살아난다.
🌟 undo/redo
- 기본적으로 제공하는 기능은 없다.
- mouse up 이벤트 발생 시 현재 상태를 stack에 쌓아서 관리하는 방식으로 구현.
- https://jsfiddle.net/tazehale/q2mz23xb/
- mouse up 이벤트 발생 시 처리 순서
1) undo 리스트에 현재 상태( JSON.stringify(canvas) )저장
- undo 이벤트 발생 시 처리 순서
1) redo 에 현재 상태 저장 ( redo일 경우 undo에 저장 )
2) undo 마지막 요소 pop ( redo일 경우 redo 마지막 요소 pop )
3) canvas 초기화
4) pop 한 요소 canvas에 그림.
🌟 Free Drawing (Pen) 모드인 경우 undo 가 정상적으로 작동되지 않는다.
- Free Drawing으로 그린 후 undo하면 마지막으로 그린 객체가 실제로 객체 리스트에서는 없지만, canvas에는 보이는 오류가 있다.
canvas.getObjects() 해보면 지운 객체는 없는데, canvas에는 보임.
- canvas.isDrawingMode 를 false해주면 정상적으로 사라진다.
🌟 Text 재수정 가능하도록 하는 방법
- canvas.getActiveObject().enterEditing()
- http://fabricjs.com/docs/fabric.IText.html#enterEditing
🌟 Canvas 위에 이미지 추가시 추가한 이미지는 local path를 갖는다.
- 즉, canvas위에 이미지 추가사, 내 PC 에 있는 이미지를 불러온 경우
해당 이미지는 서버에 존재하지 않고, 내 PC에 있기 때문에 다른 사람이 볼 수 없게 된다.
> 다른 사람도 해당 이미지를 보고 싶다면,
불러온 이미지를 서버에 이미지를 저장한 후 서버 이미지를 다시 불러와야 한다.
- canvas에 이미지 불러오는 방법
- ajax로 서버에 이미지 전송하는 방법
$.ajax({
url: '경로',
type: 'POST',
data: new FormData($('폼').get(0)),
cache: false,
processData: false,
contentType: false,
success: function (result) {
//
}
})