이미지 요소 추가할 수 있게 하기

[remonpie1814]

선이 아닌 요소를 추가하고, 이 요소를 표시한 채 드래그로 이동이 가능하게 하려면 레이어 기능이 있어야함 지금 있는 canvas에서 레이어 구현은 어려움 다른 canvas에 그리거나 div 요소로 빼서 canvas 위에 표시한 다음, 확정시키면 canvas에 해당 내용을 넣는 식으로 하려고 함.

• 전자의 장단점
  • 장점 : 원래 canvas와 똑같이 canvas로 하기 때문에 코드의 이해에 어려움이 없음
  • 단점 : 이동이나 회전 때마다 지웠다가 다시 그려야 함. 무거울 거 같음. 텍스트의 경우 input 구현을 따로 해야 함.
• 후자의 장단점
  • 장점 : css를 사용할 수 있음.
  • 단점 : 라이브러리를 설치해야 함.

이렇게 생각했는데 좋은 생각 있나요? @juyayeah

[remonpie1814]

현재 캔버스에 그리기 시도 중

[juyayeah]

헉 후자로 하는 게 좋을 거 같다고 생각했는데 뭔갈 하고 있어 화이팅 !!

[remonpie1814]

메모입니다 아무 생각 없이 치다 보니 코드가 점점 꼬이고 있어서 정리를 생각 중 1 각 컴포넌트에 걸린 mouse 이벤트들을 document 수준에서 처리 2 캔버스의 정보를 context로 관리 3 현재 CanvasPage 내부에 있는 컴포넌트들을 외부 파일로 분리 4 툴 이름 등의 상수 또한 외부 파일로 분리

[remonpie1814]

이미지 툴 중의 ctrl+z 처리를 고민 중 지금 처리 : 이미 있는 그림에 이미지를 div 태그로 보이도록 해놓음. 이미지를 옮긴 후 마우스를 뗄 때마다 history에 원래 있던 그림+이전 좌표에 이미지를 그린 png파일을 저장. ctrl+z를 누르면 history에서 그 png 파일을 가져와서 캔버스에 보여줌 문제 : div 태그는 그냥 두기 때문에 이렇게 보임 div태그 요소는 div태그 요소대로 보이고, 캔버스는 캔버스 대로 보임...

해결법 1 ctrl+z를 누르면 그냥 div 태그 요소를 없앤다. 2 hitory에 저장하는 방식을 바꾼다. 이미지를 이동하거나 확대축소한 이력으로 가도록 ctrl+z를 누르면 div 태그를 다시 그린다.

1은 그 시점부터 더이상 이미지를 옮길 수 없어짐. 2로 가야 할 거 같음...

[juyayeah]

omg... 복잡하다!!!