TeraGo
583
2020-12-02 17:09:27
5
228

canvas 에서 그림판과 완전 똑같이 만들 수 있을까요 ?


예를들면 웹 포토샵처럼 HTML 에서도 그림판과 완전 똑같이 만들 수 있을까요 ?


구현해본건 ..


제 수준에서 지금까지 만들어본게.. 크기조정, 회전, 자르기, 연필, 텍스트, 지우개, 돋보기, 선긋기, 선 굵기


까지는 구현해봤습니다.


이제 남은건 색 채우기 정도인데.. 



( 방금 대충 그렸습니다 ㅋㅋ )


이제 저기 네모 영역에 색 채우기를 선택하고 클릭하면! 선택했던 색상이 깔끔하게 들어가도록 만들어야하는데..


그게 가능할까요 ? 


능력자들 천국 코드펜이나.. 아는 사이트들 다 찾아봤는데 해당 기능을 만든사람은 없더라구요.


SVG 로 그리면 해당 SVG 에 fill 처리해서 그 영역에 색을 채우는 방법은 가능하던데 선이 제대로 안그어져있어도 그 영역에만 채우는 방식이니.. 그림판처럼 실수로 연결 안하고 부었을때 그림이 망하는거처럼..


구현할 수 있을까요 ? 제 생각으로는 도저히 방법이 안나오네요..


긴 글 읽어주셔서 감사합니다.

0
  • 답변 5

  • 아마불편러
    2020-12-02 18:14:27

    가능합니다

    전에 캔버스로 지도툴도 만들어봤어요

    각 꼭지점 좌표 이어서 선그리고 채우시면 되요

  • TeraGo
    583
    2020-12-02 18:20:37

    아마불편러


    안타깝지만.. 해당 기능이 아닌 선을 하나하나 긋고 그리다가 나중에 페인트통을 선택해서 색을 채우는.. 방식이라 안될꺼같더라구여 ㅠㅠ

  • esrse
    1k
    2020-12-02 18:27:00 작성 2020-12-02 18:29:40 수정됨

    폐곡선이 아닐 때 모든 영역을 다 페인트칠해버리는 걸 어떻게 구현하면 좋을까 고민해봤습니다.

    저는 일단 SVG를 할 줄 모르기 때문에, 그냥 그림판을 유한한 개수의 x,y좌표의 집합이라고 생각해 보았어요. 2차원 배열이라고 가정했어요.


    그리고 n진 트리구조를 depth first search하는 걸 떠올려봤습니다.

    페인트를 찍은 좌표에 색깔을 입힌후, 그다음 좌표는 사방으로 진행할 수 있습니다.

    진행방향의 우선순위는 오른쪽, 아래, 왼쪽, 위 순서로 합니다.

    즉 페인트를 찍은 좌표에 색깔을 칠한 후, 사방에 있는 오른쪽(x1, y1), 아래(x2, y2), 왼쪽(x3, y3), 위(x4,y4) 좌표 중에서 모든 좌표에 색깔이 안 칠해져있다면 오른쪽을 먼저 간다는 거죠..

    다음좌표에 가서 색깔을 칠하고, 마찬가지로 사방에서 안칠해진 부분 중에 가장 우선순위가 높은 방향으로 진행합니다.

    그렇게 막 진행을 하다가, 어느순간에 사방이 다 막혀있는 좌표를 만나게 될거예요.

    그러면 이제 back 합니다. back 해서 다른 우선순위 방향대로 진행합니다.


    이걸 반복하다보면 안칠해진 부분이 없이 계속 back을 하게 될겁니다. back 하다가 더이상 back할 곳이 남아있지 않으면 종료합니다.


    각 좌표를 진행해 나갈 때마다 n진 트리 구조의 엘리먼트를 생성하고, 그것을 순회해나가는 방식의 설계를 생각해보았습니다.

    효율적인 방법은 아닐 거 같긴한데, 다른 방법이 안 떠오르네요~

  • 밋꾸
    474
    2020-12-02 18:45:15

    konva.js 라는 canvas 동작을 위한 프레임워크가 있습니다. 한번 참고해보심이 ㅎ..ㅎ

  • TeraGo
    583
    2020-12-03 01:56:41

    esrse


    제가 생각했던 방법과 가장 부합한 방법입니다..


    다만 초기에 그린게 많이 없다면 문제없으나.. 점차 x,y 좌표가 많아질수록 계산량이 너무 방대해질꺼같아서 패스했습니다.. 그걸 다 계산하자니 너무 머리가 못따라가겠더라구요 ㅠㅠ 저도 다른방법이 도저히 안나옵니다.. 


    밋꾸


    예전에 들어본적 있는 canvas 프레임워크인데 다시 한번 참고해봐야겠습니다.


    감사합니다 !

  • 로그인을 하시면 답변을 등록할 수 있습니다.