도구
툴바 왼쪽부터 도구 10가지. ToolName 타입의 값과 같다. 팝업을 열면 화살표(arrow) 가 선택돼 있다.
도구 목록
| 도구 | ToolName | 단축키 | 조작 | 만드는 Shape |
|---|---|---|---|---|
| 선택·이동 | select | V | 클릭·Shift 클릭·러버밴드로 고르고, 끌어 옮기고, 손잡이로 고친다 | — |
| 펜 | pen | P | 끌기 | { type: "pen", points } — 끝나면 이웃 평균으로 살짝 부드럽게 |
| 형광펜 | highlighter | H | 끌기 | { type: "highlighter", points } — 굵기 stroke × 4, 불투명도 0.35, 끝 모양 butt |
| 직선 | line | L | 끌기 | { type: "line", x1, y1, x2, y2 } |
| 화살표 | arrow | A | 끌기 | { type: "arrow", x1, y1, x2, y2 } — 끝점(x2,y2)에 화살촉 |
| 양쪽 화살표 | arrow2 | 없음 | 끌기 | { type: "arrow2", x1, y1, x2, y2 } — 양 끝에 화살촉 |
| 사각형 | rect | R | 끌기 | { type: "rect", x1, y1, x2, y2, fill } — radius 는 데이터에만 있고 UI 로는 못 바꾼다 |
| 타원 | ellipse | E | 끌기 | { type: "ellipse", x1, y1, x2, y2, fill } |
| 글자 | text | T | 클릭 → 판 위에서 바로 입력 | { type: "text", x, y, text, size } — size = 14 + stroke × 4 |
| 번호 배지 | badge | B | 클릭 | { type: "badge", x, y, n, size } — n 은 현재 배지 수 + 1, size = 8 + stroke × 2 |
모든 도형은 공통으로 id·color·stroke 를 갖고, 툴바 상태에 따라 dashed·opacity 가 붙는다. 필드 의미는 데이터 형식 참고.
끌어서 그리는 도구의 규칙
Shift를 누른 채 끌면 정사각형·정원·45° 선이 된다(가로·세로 변위를 큰 쪽에 맞춘다).- 클릭만 하고 끝낸 도형(상자 2px 미만, 점 2개 미만)은 남지 않는다.
- 좌표는 판 크기(
width × height) 기준이다. 화면 확대·축소는 표시일 뿐이라 결과에 영향이 없다.
글자
- 글자 도구로 판을 클릭하면 그 자리에 입력창(textarea)이 겹쳐 뜬다.
Enter로 확정,Shift+Enter로 줄바꿈,Esc로 취소. 빈 글자는 남지 않는다.- 확정하면 도구가 선택 으로 바뀌고 그 글자가 선택된다.
- 선택 도구에서 같은 글자를 350ms 안에 두 번 클릭하면 다시 고친다. 비워서 확정하면 지워진다.
- 결과 PNG 에서 글자는 흰 테두리를 두르고 색을 채운다(캡처 위 글자의 관례). 굵기·크기는
stroke에 따라size로 바뀐다.
툴바 스타일
| 항목 | 값 | 적용 대상 |
|---|---|---|
| 색 | 기본 8색 + 색 고르기(<input type="color">) | 모든 도형 color |
| 선 굵기 | 1~12 | stroke. 글자는 size, 배지는 size 도 함께 바뀐다 |
| 채우기 | 없음 · 반투명(0.25) · 채우기 | fill — 사각형·타원에만 |
| 점선 | 켜기/끄기 | dashed — 점선 무늬는 [stroke × 3, stroke × 2] |
| 투명도 | 10~100%, 5% 단위 | opacity (0.1~1) |
- 도형을 고른 채 바꾸면 고른 도형들 이 바뀐다(되돌리기 단계로 남는다).
- 고른 게 없으면 다음에 그릴 도형의 기본값만 바뀐다.
- 도형 하나를 고르면 툴바가 그 도형의 값을 비춘다.
선택·이동·손잡이
선택 도구(V)에서:
| 동작 | 결과 |
|---|---|
| 도형 클릭 | 그 도형만 선택. 선 도형은 선 위(굵기와 별개로 최소 14px 폭)를 누르면 잡힌다 |
Shift + 클릭 | 선택에 더하기/빼기 |
| 빈 곳에서 끌기 | 러버밴드 — 상자와 겹치는 도형을 모두 선택(Shift 면 기존 선택에 더한다) |
| 고른 도형 끌기 | 고른 도형들을 함께 옮긴다 |
⌘A / Ctrl+A | 선택 도구로 바꾸고 전체 선택 |
| 방향키 | 1px 이동, Shift 면 10px |
Esc | 선택 해제(선택이 없으면 취소) |
손잡이 는 도형을 하나만 골랐을 때 나온다.
- 사각형·타원: 상자 8개(
nw n ne e se s sw w) — 모서리·변을 끌어 크기를 바꾼다. - 직선·화살표·양쪽 화살표: 양 끝 2개(
p1·p2). - 펜·형광펜·글자·배지: 손잡이 없음(옮기기만).
편집 동작
| 동작 | 단축키 | 설명 |
|---|---|---|
| 되돌리기 | ⌘Z / Ctrl+Z | 최대 200단계 |
| 다시 실행 | ⇧⌘Z / Ctrl+Shift+Z | |
| 지우기 | Delete / Backspace | 고른 도형 삭제 |
| 복제 | ⌘D / Ctrl+D | 고른 도형을 (16, 16) 만큼 비켜 복사하고 복사본을 선택 |
| 앞으로 | ] | 고른 도형의 그리는 순서를 한 칸 뒤로(위로) |
| 뒤로 | [ | 한 칸 앞으로(아래로) |
그리는 순서는 shapes 배열 순서와 같다. 뒤에 있을수록 위에 그려진다.
배경
- 발 영역의 배경 이미지… 버튼으로 파일을 고르거나, 팝업에 포커스가 있을 때 캡처를 붙여넣기(⌘V / Ctrl+V) 하면 배경이 된다.
- 배경을 넣으면 판 크기가 그 이미지 크기가 된다(긴 변 최대 1600px). 되돌리기 단계로 남는다.
- 이미지가 아닌 파일은 무시된다.
- 판은 화면에 맞게 자동으로 축소되며(확대는 안 함), 발 영역 상태 표시에
가로×세로 · 배율% · 선택 수가 보인다.
단축키 모음
V 선택 · P 펜 · H 형광펜 · L 직선 · A 화살표 · R 사각형 · E 타원 · T 글자 · B 번호 배지 · ⌘Z/⇧⌘Z 되돌리기·다시 실행 · ⌘D 복제 · ⌘A 전체 선택 · Delete 지우기 · 방향키 이동(Shift 10px) · [ ] 순서 · Shift+끌기 정사각형/정원 · Esc 선택 해제/취소
⌘ 는 Windows·Linux 에서 Ctrl. 단축키는 팝업 안에서만 듣고, 호스트 페이지로 전파되지 않는다.