[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에 이미지 불러오는 방법

   fabric.Image.fromURL

 

 - ajax로 서버에 이미지 전송하는 방법

$.ajax({
    url: '경로',
    type: 'POST',
    data: new FormData($('폼').get(0)),
    cache: false,
    processData: false,
    contentType: false,
    success: function (result) {
       //
    }
})