가능합니다

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

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

아마불편러

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

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

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

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

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

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

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

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

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

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

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

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

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

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

esrse

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

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

밋꾸

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

감사합니다 !