5. 구성요소에 활력 불어넣기
1. 블록에디터를 오픈하고, 좌측에 위치한 사용자블록(My Blocks)탭을 선택하면, 상기 디자이너 창에서 작업한 컬러버튼, 드로잉캔버스, 수평배열1, 수평배열2, PartEraser, ReturnButton, 스크린, SpotButton, WholeEraser 등에 각각 대응하는 복수의 드로워(Drawer)가 나타난다. 이외에도, 나중에 설명하는 바와 같이 변수블록 등을 정의할 때에 자동생성되는 블록을 저장하는 사용자정의(My Definitions)드로워가 나타난다.
2. 우선, 캔버스의 페인트색을 임시 저장하는 변수블록으로서 컬러리스트블록에 대해 설명한다.
2-1. 블록에디터의 좌측에 위치한 내장블록(Built-In)탭을 선택하고, 정의(Definition)드로워를 열고, 변수블록(def variable)을 선택하여 작업영역으로 드래그한다. 이 변수블록(def variable)에서 variable을 더블클릭하여 ColorList로 정정하여 기재한다.
2-2. 또한, 내장블록(Built-In)탭을 선택하고, 리스트(Lists)드로워를 열고, 리스트만들기(call make a list item)블록을 선택하여 작업 영역에 드래그한다.
2-3. 또한, 내장블록(Built-In)탭을 선택하고, 컬러(colors)드로워를 열면, 아래의 스크린샷과 같이 다양한 컬러블록이 나타난다. 이들 컬러블록중에서, 무색블록(None)을 제외한 컬러블록 전체를 1개씩 개별적으로 선택하여 작업 영역에 각각 드래그한다.
2-4. 컬러리스트(def ColorList)에 리스트만들기(call make a list item)를 플러그인하고, 리스트만들기(call make a list item)의 소켓(item)에 복수의 컬러블록을 1개씩 플러그인한다. 그 결과, 블록조합의 스크린샷은 다음과 같다.
3. 다음에, 외부에 드러나지 않는 히든 인덱스 변수(Hidden Index Variable)를 정의한다.
3-1. 이 변수는 컬러리스트의 컬러블록의 순서를 나타낸다. 예를 들면, 다음에 설명하는 색변경버튼을 터치할 때마다 상기 컬러리스트에 플러그인한 컬러블록의 순서로 컬러버튼의 배경색이 변경된다. 이와 같이 변경된 배경색은 캔버스에 그릴 수 있는 페인트색이다. 캔버스에 그리는 페인트색이 어느 색을 나타내는 지를 기억할 필요가 있다. 이와 같이 프로그램에서 기억할 필요가 있는 경우에는 사용자가 변수를 직접 정의하여야 한다. 이 경우에 현재 그리기위해 사용하는 페인트색의 순차번호(즉, 컬러리스트의 인덱스)를 기억할 필요가 있다.
3-2. 컬러리스트블록과 마찬가지로, 내장블록(Built-In)탭의 정의(Definition)드로워를 열고 변수블록(def variable)을 선택하여 작업영역으로 드래그한다. 이 변수블록(def variable)에서variable을 더블클릭하여 currentColorIndex로 정정한다.
또한 내장블록(Built-In)탭의 수학(Math)드로워를 열고 숫자블록(number 123)을 선택하여 작업영역으로 드래그한다. 숫자블록(number 123)의 123을 더블클릭하여 1로 정정한다. 현재컬러인덱스에 숫자블록을 플러그인하여 현재컬러인덱스를 1로 초기화한다. 그 결과, 블록조합의 스크린샷은 다음과 같다.
3-3. 마찬가지로, 나중에 설명하는 토글버튼인 스팟버튼(SpotButton)을 이용하여 도트크기(2픽셀 또는 8픽셀)를 변경하기 위해 기억할 필요가 있는 변수블록을 3개 사용하기 위해,내장블록(Built-In)탭의 정의(Definition)드로워를 열고 변수블록(def variable)을 3회 선택하여 작업영역으로 드래그한다. 이 3개의 변수블록(def variable)의 variable을 각각 더블클릭하여 dotsize, small, big로 정정한다.
도트크기블록(dotsize)의 디폴트값을 2픽셀(또는 8픽셀)로 하고, 소형도트크기블록(small)의 디폴트값을 2픽셀로 하고, 대형도트크기블록(big)의 디폴트값을 8픽셀로 하기 위해, 내장블록탭의 수학(Math)드로워를 열고 숫자블록(number 123)을 3회 작업영역으로 드래그하고, 3개의 숫자블록(number 123)의 123을 더블클릭하여 2, 2, 8로 각각 정정한다.
상기 설명한 3개의 변수블록(dotsize, small, big)에 각각 숫자블록(number 2, number 2, number 8)을 플러그인하여 3개의 변수블록의 디폴트값을 모두 규정한다. 그 결과, 블록조합의 스크린샷은 다음과 같다.
4. 그림 그리기의 앱을 시작할 때 스크린을 초기화하는 이벤트에 의해 스크린초기화이벤트핸들러(Screen1.initialize)를 트리거한다. 이에 대한 상세설명은 다음과 같다.
4-1. 사용자블록(My Blocks)탭의 스크린(Screen1)드로워를 열고 스크린초기화이벤트핸들러(Screen1.Initialize)블록을 선택하여 작업영역으로 드래그한다.
4-2. 도트크기설정블록(set global dotsize to)의 소켓(to)에 변수블록(global big)을 플러그인한다. 변수블록(global big)의 디폴트값은 8픽셀로 이미 규정되어 있기 때문에, 도트크기는 8픽셀로 초기설정된다.
참고 사항: 이전에 설명한 바와 같이, 상기 변수블록(big)의 형성시에 사용자블록(My Blocks)탭의 사용자정의(My Definitions)드로워안에 전역변수블록(global big)과 전역 도트크기 설정블록(set global dotsize to)이 자동생성된다.
4-3. 앱을 실행할 때에, 컬러버튼의 배경색을 캔버스의 페인트색으로 설정한다.
4-3-1. 사용자블록(My Blocks)탭의 드로잉캔버스(DrawingCanvas)드로워를 열고 드로잉캔버스의 페인트컬러설정블록(set DrawingCanvas.PaintColor to)을 선택하여 작업영역으로 드래그한다.
4-3-2. 또한, 컬러버튼(ColorButton)드로워를 열고 컬러버튼의 배경색(ColoButton.BackgroundColor)를 선택하여 작업영역으로 드래그한다.
4-3-3. 드로잉캔버스의 페인트컬러설정블록(set DrawingCanvas.PaintColor to)의 소켓(to)에 컬러버튼의 배경색(ColorButton.BackgroundColor)를 플러그인한다. 즉, 아래 스크린샷과 같이 플러그인함으로써, 컬러버튼의 배경색을 캔버스에 페인트색으로 사용(설정)한다.
4-4. 이와 같이 설명한 조합블록을 스크린초기화블록에 조합한다. 구체적으로는, 스크린의 초기화면에서 캔버스의 터치시에 드로잉의 도트크기는 8픽셀이고 컬러버튼의 배경색을 캔버스의 페인트색으로 사용한다.
5. 캔버스에서 사용되는 페인트색은 상기 설명한 바와 같이 버튼의 배경색을 사용한다. 이 페인트색을 변경하는 컬러버튼(색변경 버튼)의 이벤트핸들러의 블록조합에 대해 이하 설명한다.
5-1. 사용자블록(My Blocks)탭의 컬러버튼(ColorButon)드로워를 열고 컬러버튼의 클릭이벤트핸들러(ColorButton.Click)를 선택하여 작업영역으로 드래그한다. 컬러버튼의 클릭이벤트핸들러는 컬러버튼의 배경색을 변경하는 기능을 담당한다.
5-2. 컬러버튼을 클릭할 때마다 페인트색을 변경하기 위해 현재컬러인덱스를 증가시킨다. 이에 대해 이하 상세하게 설명한다.
5-2-1. 현재의 컬러리스트의 인덱스를 설정하기 위해, 사용자블록(My Blocks)탭의 사용자정의(My Defintions)드로워를 열고, 자동생성된 전역 현재컬러인덱스 설정블록(set global currentColorIndex to)을 선택하여 작업영역으로 드래그한다.
참고사항: 변수블록(currentColorIndex)의 형성시에 사용자블록(My Blocks)탭의 사용자정의(My Definitions)드로워에 전역현재컬러인덱스블록(global currentColorIndex)과 전역 현재컬러인덱스 설정블록(set global currentColorIndex to)이 자동생성된다.
5-2-2. 또한, 내장블록(Built-In)탭의 수학(Math)드로워를 열고 숫자블록(number 123)을 선택하여 작업영역으로 드래그하고 숫자블록의 123을 더블클릭하여 1로 정정한다.
5-2-3. 수학(Math)드로워를 클릭하여 열고 플러스블록(+)을 선택하여 작업영역으로 드래그한다.
5-2-4. 또한 사용자블록(My Blocks)컬럼의 사용자정의(My Definitions)드로워를 열고 전역현재컬러인덱스블록(global currentColorIndex)를 선택하여 작업영역으로 드래그한다.
5-2-5. 플러스블록을 사용하여 전역현재컬러이미지인덱스값에 1을 가산하는 블록을 만든다.
5-2-6. 전역현재컬러인덱스설정블록(set global currentColorIndex to)의 소켓(to)에 상기 전역현재컬러인덱스값의 가산블록을 플러그인한다
5-3. 상기한 바와 같이, 컬러를 변경하기 위해 컬러인덱스가 계속 증가하면, 컬러리스트에 저장된 인덱스의 개수보다 증가하는 경우 버그가 발생하므로, 이를 방지하기 위해 인덱스의 개수보다 큰 경우에는 인덱스를 1로 설정하면 버그를 방지할 수 있다. 이에 대해 이하 설명한다.
5-3-1. 내장블록(Built-In)탭의 제어(Control)드로워를 열고 조건블록(if)을 선택하여 작업영역으로 드래그한다.
5-3-2. 사용자블록(My Blocks)탭의 사용자정의(My Defintions)드로워를 열고, 전역 현재컬러인덱스블록(global currentColorIndex)을 선택하여 작업영역으로 드래그한다. 또는, 상기한 바와 같이 작업영역으로 이미 드래한 해당 블록을 복사하여 붙여넣기를 하여도 된다.
5-3-3. 내장블록(Built-In)탭의 리스트(lists)드로워를 열고 리스트 아이템의 전체 개수 블록(call length of list list)을 선택하여 작업영역으로 드래그한다.
5-3-4. 사용자블록(My Blocks)탭의 사용자정의(My Defintions)드로워를 열고, 전역 컬러리스트(global ColorList)을 선택하여 작업영역으로 드래그한다.
5-3-5. 내장블록(Built-In)탭의 수학(Math)드로워를 열고 부등호블록(>)을 선택하여 작업영역으로 드래그한다.
5-3-6. 컬러리스트(global ColorList)를 리스트 아이템의 전체 개수 블록(call length of list list)의 소켓(list)에 플러그인한다.
5-3-7. 컬러리스트의 아이템의 전체 개수를 나타내는 상기 조합블록을 부등호블록의 우측에 플러그인하고, 현재컬러인덱스블록(global currentColorIndex)을 부등호블록의 좌측에 배치한다. 구체적으로는, 이것은 현재에 표시하는 페인트색의 컬러인덱스가, 컬러리스트에 저장된 아이템의 전체개수보다 큰 것을 표시하는 블록이다.
5-3-8. 내장블록(Built-In)탭의 수학(Math)드로워를 열고 숫자블록(number 123)을 선택하여 작업영역으로 드래그하고 숫자블록의 123을 더블클릭하여 1로 정정한 숫자블록(number 1)을 현재컬러인덱스설정블록의 소켓(to)에 플러그인한다.
5-3-9. 상기 조합블록을 조건블록에 조합한다. 구체적으로는, 현재의 컬러인덱스가 컬러리스트의 컬러개수보다 큰 경우, 컬러컬러인덱스를 1로 설정한다.
5-4. 상기한 바와 같이 인덱스의 증가에 의한 버그가 발생하지 않도록 한 다음, 컬러리스트(global ColorList)에서 전역현재인덱스(global currentColorIndex)에 대응하는 컬러(select list item)를 컬러버튼의 배경색(set ColorButton.BackGroundColor to)으로 설정한다. 이에 대해 이하 상세하게 설명한다.
5-4-1. 사용자블록(My Blocks)탭의 사용자정의(My Defintions)드로워를 클릭하여 열고, 전역 컬러리스트(global ColorList)을 선택하여 작업영역으로 드래그한다.
5-4-2. 또한, 사용자블록(My Blocks)컬럼의 정의(My Definitions)드로워를 열고 전역이미지인덱스블록(global currentColorIndex)를 선택하여 작업영역으로 드래그한다.
5-4-3. 내장블록(Built-In)탭의 리스트(Lists)드로워를 열고 리스트 아이템선택 호출블록(call select list item to)을 선택하여 작업영역으로 드래그한다.
5-4-4. 사용자블록(My Blocks)탭의 컬러버튼(ColorButton)드로워를 열고, 컬러버튼의 배경색설정블록(set ColorButton.BackgroundColor to)을 선택하여 작업영역으로 드래그한다.
5-4-5. 컬러버튼의 배경색(set ColorButton.BackgroundColor to)의 소켓(to)에 리스트의 아이템선택 호출블록(call select list item to)을 플러그인하고, 리스트의 아이템선택 호출블록(call select list item list index)의 소켓(list, index)에 각각 컬러리스트블록(global ColorList)과 현재컬러인덱스블록(global currentColorIndex)을 플러그인한다.
구체적으로는, 현재의 컬러인덱스에 의거하여 컬러리스트로부터 컬러를 선택하여 컬러버튼의 배경색으로 설정한다.
5-5. 컬러버튼을 클릭할 때에 컬러버튼의 배경색을 캔버스의 페인트컬러으로 설정하는 것에 대해 설명한다.
5-5-1. 사용자블록(My Blocks)탭의 드로잉캔버스(DrawingCanvas)드로워를 열고 드로잉캔버스의 페인트색설정블록(set DrawingCanvas.PaintColor to)을 선택하여 작업영역으로 드래그한다.
5-5-2. 컬러버튼(ColorButton)드로워를 열고 컬러버튼의 배경색(ColoButton.BackgroundColor)를 선택하여 작업영역으로 드래그한다.
5-5-3. 드로잉캔버스의 페인트색설정블록(set DrawingCanvas.PaintColor to)의 소켓(to)에컬러버튼의 배경색(ColorButton.BackgroundColor)을 플러그인한다. 즉, 아래 스크린샷과 같이 플러그인함으로써, 컬러버튼의 배경색을 캔버스의 페인트색으로 설정한다.
참고 사항: 상기 조합블록은 초기화시의 조합블록과 동일하므로, 드로잉캔버스의 페인트블록(set DrawingCanvas.Paintcolor to)에 마우스커서를 놓고, 콘트롤키와 문자(C, V)를 사용하여 블록조합을 복사하여, 작업영역에서 붙여넣기를 하면 작업시간을 단축할 수 있다.
5-6. 이상 설명한 복수의 조합블록을 컬러버튼(색변경 버튼)의 클릭이벤트핸들러에 조합한 스크린샷은 다음과 같다.
참고사항: 이전에 설명한 바와 같이, 조합블록의 모든 기능은 스크린샷의 우측에서 시작하여 좌측에서 끝나는 순서로 해석한다. 즉, 상기 블록조합을 설명하면,컬러버튼을 터치하여 클릭이벤트가 발생할 때에, 현재의 컬러인덱스는 1만큼 증가하고 증가한 컬러인덱스가 컬러리스트의 컬러의 개수보다 큰 경우에는 현재인덱스를 1로 설정하여 버그를 방지한다. 또한, 컬러리스트에서 현재의 컬러인덱스에 대응하는 컬러를 선택하여 컬러버튼의 배경색으로 설정하고 이 배경색을 캔버스의 페인트색으로 한다.
6. 이와 같이 캔버스의 페인트색을 변경하면서 선택할 때에 금방 지나친 페인트색을 선택하고자 하는 경우가 있다. 이 경우에는 페인트색을 앞으로만 전진하여 선택한다면 시간이 낭비된다. 따라서 뒤로 후진하여 페인트색을 선택하는 것이 효과적이다. 이와 같은 효율적인 점을 고려하여, 이전의 색으로 되돌아가는 리턴버튼(변경전 색버튼)을 사용한다. 이에 대한 설명은 컬러버튼(색변경버튼)과 마찬가지의 원리가 적용되므로 상세한 설명은 생략한다.
6-1. 사용자블록(My Blocks)탭의 리턴버튼(ReturnButon)드로워를 열고 리턴버튼의 클릭이벤트핸들러(ReturnButton.Click)을 선택하여 작업영역으로 드래그한다.
리턴버튼의 클릭이벤트핸들러는, 버튼의 터치시에 컬러버튼의 클릭이벤트핸들러와 마찬가지로 컬러버튼의 배경색을 변경하는 기능을 담당하지만, 컬러버튼과의 차이점은 현재 컬러의 인덱스가 직전의 컬러를 선택하는 방향으로 변경한다.
6-2. 따라서, 현재컬러인덱스(global currentColorIndex)에 1을 감산한 인덱스값을 현재 버튼의 배경색의 인덱스로 설정한다.
6-3. 다음에, 이와 같이 설정된 현재컬러인덱스값이 1보다 적은 경우에는 현재컬러인덱스값에컬러리스트의 아이템전체의 개수를 가산한 값을 가진 현재컬러인덱스를 현재컬러인덱스값으로 재설정한다. 그 이유는, 컬러리스트에 없는 값을 설정하여 사용할 수 없기 때문이다.
6-4. 이와 같이 포괄적인 방식으로 설정된 현재 컬러 인덱스를 가진 컬러아이템을, 컬러리스트에서 선택하여, 컬러버튼의 배경색으로 설정한다.
6-5. 이와 같이 설정된 컬러버튼의 배경색을 캔버스의 페인트색으로 설정한다.
6-6. 이상 설명한 복수의 조합블록을 리턴버튼(변경전 색버튼)의 클릭이벤트핸들러에 조합한 스크린샷은 다음과 같다.
참고사항: 색변경버튼(컬러버튼)을 터치하면 색변경버튼의 배경색이 변한다. 이에 반해서, 변경전 색버튼(리턴버튼)을 터치하면 색변경버튼의 배경색만 변하는 것은 변경전 색버튼(리턴버튼)에서도 색변경버튼(컬러버튼)의 배경색만 변하도록 블록을 조합하였기 때문이다.
7. 이번에는 캔버스를 터치할 때의 이벤트발생에 의해 트리거되는 이벤트핸들러에 대해 설명한다.
드로잉캔버스의 터치이벤트핸들러는 캔버스를 터치하는 지점의 위치를 원점으로하고 이전에 설명한 도트크기의 픽셀을 직경으로 하는 원을 그리는 기능블록을 가지도록 함으로써 캔버스를 터치할 때마다 소정의 도트사이즈를 가진 원을 그릴수 있다. 구체적으로는 다음과 같이 블록을 조합한다.
7-1. 사용자블록(My Blocks)컬럼의 드로잉캔버스(DrawingCanvas)드로워를 열고 드로잉캔버스의 터치블록(DrawingCanvas.Touched)을 선택하여 작업영역으로 드래그한다.
7-2. 다음에, 사용자블록(My Blocks)컬럼의 드로잉캔버스(DrawingCanvas)드로워를 다시 열고 드로잉캔버스의 원그림블록(call DrawingCanvas.DrawCircle x y z)을 선택하여 작업영역으로 드래그한다. 또한, 사용자블록(My Blocks)컬럼의 사용자정의(My Definitions)드로워를 열고 변수값의 블록(value x, value y, global dotsize)을 각각 순차적으로 선택하여 작업영역으로 드래그하고, 캔버스의 원그림 호출블록(call DrawingCanvas.DrawCircle x y r)의 소켓(x y r)에 해당 변수값 블록(value x, value y, global dotsize)을 각각 플러그인한다. 즉, 캔버스를 터치할 때마다, 캔버스의 좌표(value x, value y)를 중심점으로 하고 반지름을 도트사이즈(global dotsize)로 하는 원을 그리도록 호출하는 블록이다.
7-3. 드로잉캔버스터치이벤트핸들러에 원그림블록을 조합한 블록의 스크린샷은 다음과 같다.
8. 캔버스위를 드래그할 때 발생하는 이벤트에 의해 트리거되는 이벤트핸들러에 대해 설명한다.
드로잉캔버스의 드래그이벤트핸들러는 사용자가 캔버스의 이전 지점(prevX, prevY)에서 현재 지점(currentX, currentY)까지 드래그하는 선을 그리도록 함으로써 캔버스를 드래그할 때마다 선을 그릴수 있다. 구체적으로는 다음의 설명과 같다.
8-1. 사용자블록(My Blocks)컬럼의 드로잉캔버스(DrawingCanvas)드로워를 클릭하여 열고 드로잉캔버스의 드래그블록(DrawingCanvas.Dragged)을 선택하여 작업영역으로 드래그한다.
8-2. 다음에, 사용자블록(My Blocks)컬럼의 드로잉캔버스(DrawingCanvas)드로워를 다시 열고 드로잉캔버스의 직선그림블록(call DrawingCanvas.DrawLine x1 y1 x2 y2)을 선택하여 작업영역으로 드래그한다. 또한, 사용자블록(My Blocks)컬럼의 사용자정의(My Definitions)드로워를 열고 변수값의 블록(value prevX, value prevY, value currentX, value curretnY)을 각각 순차적으로 선택하여 작업영역으로 드래그하고, 드로잉캔버스의 직선그림블록(call DrawingCanvas.DrawLine x1 y1 x2 y2)의 소켓(x1 y1 x2 y2)에 해당 변수값 블록(value prevX, value prevY, value currentX, value curretnY)을 각각 플러그인한다. 즉, 캔버스를 드래그할 때에, 캔버스의 이전좌표((value prevX, value prevY)에서 현재좌표(value currentX, value curretnY))까지 직선을 그리도록 호출하는 블록이다.
8-3. 드로잉캔버스드래그이벤트핸들러에 직선그림블록을 조합한 블록의 스크린샷은 다음과 같다.
9. 캔버스에서 사용되는 페인트색의 크기는 이전에 설명한 히든인덱스변수인 블록(dotsize, small, big)을 사용한다. 페인트색의 크기를 변경하는 토글버튼인 스팟버튼의 이벤트핸들러의 블록조합에 대해 설명한다.
9-1. 사용자블록(My Blocks)탭의 스팟버튼(SpotButton)드로워를 열고 스팟버튼(작은 점버튼,큰 점버튼)의 클릭이벤트핸들러(SpotButton.Click)을 선택하여 작업영역으로 드래그한다.
9-2. 캔버스의 페인트색의 크기를 나타내는 도트사이즈(global dotsize)가 8 픽셀(global big)인지 또는 2 픽셀(global small)인지의 여부를 판정하는 조건블록(ifelse test then-do else-do)을 사용한다. 설명의 편의상, 드로워에서 블록을 선택하여 작업영역으로 드래그하는 구체적인 설명은 생략한다.
참고 사항: 캔버스에서 사용되는 페인트색의 크기는 이전에 설명한 히든인덱스변수인 블록(dotsize, small, big)을 사용한다.
9-2-1. 캔버스의 페인트색의 크기인 도트사이즈(global dotsize)가 8픽셀(global big)인 경우에는, 2픽셀(global small)을 도트사이즈(set global dotsize to)로 설정하고,
컬러버튼의 배경색(ColorButton.BackgroundColor)을 드로잉캔버스의 페인트색(set DrawingCanvas.PaintColor to)으로 설정하고,
큰 점을 스팟버튼의 텍스트(set SpotButton.Text to)로 설정한다.
참고사항: 텍스트블록의 사각형은 한글의 큰 점을 나타낸다. 텍스트블록에 직접 타이핑하거나 복사해서 붙여 넣기를 하여도 된다.
9-2-2. 캔버스의 페인트색의 크기인 도트사이즈(global dotsize)가 8픽셀(global big)아닌 경우에는, 즉 2픽셀(global small)인 경우에는, 8픽셀(global small)을 도트사이즈(set global dotsize to)로 설정하고,
컬러버튼의 배경색(ColorButton.BackgroundColor)을 드로잉캔버스의 페인트색(set DrawingCanvas.PaintColor to)으로 설정하고,
작은 점을 스팟버튼의 텍스트(set SpotButton.Text to)로 설정한다.
참고사항: 텍스트블록의 사각형은 한글의 작은 점을 나타낸다. 텍스트블록에 직접 타이핑하거나 복사해서 붙여 넣기를 하여도 된다.
9-3. 이상 설명한 두그룹의 블록조합을 조건블록(ifelse test then-do else-do)의 해당 플러그(then-do else-do)에 각각 조합한다.
9-4. 상기 조건블록(ifelse)을 스팟버튼클릭이벤트핸들러에 조합한 스크린샷은 다음과 같다.
9-5. 이전에 설명한 바와 같이, 블록조합의 모든 기능은 작업영역의 왼쪽에서 시작하여 왼쪽에서 끝나는 방식으로 해석하는 원칙에 대해 항상 염두 두어야 한다.
또한, 이 버튼은 도클버튼이므로, 스팟버튼의 텍스트를 큰 점과 작은 점을로 교대로 설정한다.
상기 블록조합에서는 네모로만 표시되어 있고 한글은 외부에 드러나지 않고 있다. 실제로 확인 해보려면, 이 표시를 복사에서 MS Word 등에 붙여 넣으면, 큰 점과 작은 점이 나타남을 알 수 있다.
참고 사항: 한글 등의 외국어 지원은 2011년 1월말부터 하고 있다. 이 점은 상당히 다행스러운 일이라고 생각한다. 그렇치 않았다면, 영어로만 사용할 수 밖에 없었던 점도 아울러서 알아두기 바란다.
10. 그린 그림의 일부를 수정하기 위해 부분 지우기버튼의 클릭이벤트핸들러(PartEraser.Click)의 기능블록조합에 대해 설명한다.
10-1. 사용자블록(My Blocks)탭의 부분지우기버튼(PartEraser)드로워를 열고 부분지우기버튼의 클릭이벤트핸들러(PartEraser.Click)를 선택하여 작업영역으로 드래그한다.
10-2. 클릭이벤트핸들러는 무색(백색이 아님)을 캔버스의 페인트색으로 사용하여 지우개의 효과를 얻는다.
10-3. 캔버스의 페인트색의 크기인 도트사이즈(global dotsize)가 8픽셀(global big)인지 또는2픽셀(global small)인지의 여부를 판정하는 조건블록(ifelse)을 사용한다.
10-3-1. 캔버스의 페인트색의 크기를 나타내는 도트사이즈(global dotsize)가 8픽셀(global big)인 경우에는, 8픽셀(global big)을 도트사이즈(set global dotsize to)로 설정하고,
작은 점을 스팟버튼의 텍스트(set SpotButton.Text to)로 설정한다.
참고사항: 텍스트블록의 사각형은 한글의 작은 점을 나타낸다. 텍스트블록에 직접 타이핑하거나 복사해서 붙여 넣기를 하여도 된다.
10-3-2. 캔버스의 페인트색의 크기를 나타내는 도트사이즈(global dotsize)가 8픽셀(global big)아닌 경우에는, 즉 2픽셀(global small)인 경우에는, 2픽셀(global small)을 도트사이즈(set global dotsize to)로 설정하고,
큰 점을 스팟버튼의 텍스트(set SpotButton.Text to)로 설정한다.
참고사항: 마찬가지로 텍스트블록의 사각형은 한글의 큰 점을 나타낸다. 텍스트블록에 직접 타이핑하거나 복사해서 붙여 넣기를 하여도 된다.
10-3-3. 이상 설명한 두그룹의 블록조합을 조건블록(ifelse test then-do else do)의 해당 섹션(then-do else-do)에 각각 조합한다.
10-4. 상기 조건블록(ifelse)을 부분지우기버튼클릭이벤트핸들러에 조합한 스크린샷은 다음과 같다.
10-5. 조건블록(ifelse)에서 도트크기 8픽셀인 경우에는 8픽셀을 사용하고 스팟버튼의 텍스트를 작은 점으로 설정하고, 도트크기가 2픽셀인 경우에는 2픽셀을 사용하고 스팟버튼의 텍스트를 작은 점으로 설정한다. 이 조건블록을 사용하지 않아도 부분 지우기 버튼을 사용할 수 있다.
그럼에도 불구하고, 이 조건블록을 사용하는 이유는 미소한 버그를 제거하기 위해 사용한다. 구체적으로는, 다음에 설명하는 전체지우기 버튼의 사용시에 일반적인 사용에 지장이 없는 듯 하지만 부분 지우기 버튼을 사용한 다음 사용하는 경우에는 전체 지우기 버튼을 사용하면 스팟버튼의 클릭이벤트에 관계없이 스팟크기를 임의로 변경시키는 버그가 발생한다. 따라서, 부분 지우기 버튼의 클릭시에 스팟버튼의 환경을 그대로 유지시키면 이러한 버그를 제거할 수 있다. 이러한 점을 고려하면, 조건블록(ifelse)을 사용하는 것은 필수적이다.
참고 사항: 여기서 사용하는 부분 지우기 버튼은 일종의 지우게와 비슷하지만, 캔버스를 터치할 때에는 원형지우게로 되고 캔버스를 드래그할 때에는 선형지우게로 사용된다. 실제로, 나중에 검토한 바에 의하면, 부분지우게의 상기 기능은 지우기의 응답속도가 느리다. 따라서, 본예제의 제 2 단계이후에서는 이러한 불편한 점을 고려하여 블록을 전체적으로 정정한다.
11. 그린 그림의 전부를 수정하기 위해 전체지우기버튼의 클릭이벤트핸들러(WholeEraser.Click)의 기능블록조합에 대해 설명한다.
11-1. 사용자블록(My Blocks)탭의 전체지우기버튼(WholeEraser)드로워를 열고 전체지우기버튼의 클릭이벤트핸들러(WholeEraser.Click)을 선택하여 작업영역으로 드래그한다.
이하에서는, 설명의 편의상, 드로워에서 블록을 선택하여 작업영역으로 드래그하는 구체적인 설명은 생략한다.
11-2. 앱인벤터 디자이너창에서 캔버스를 사용하여 디자인할 때에 사용자블록(My Blocks)탭의 캔버스(DrawingCanvas)드로워에는 드로잉캔버스지우기블록(DrawingCanvas.Clear)이 자동형성된다.
이 블록을 이벤트핸들러에서 사용하면, 그린 그림전체가 한꺼번에 지워진다. 이 블록만으로 모든 것이 해결되는 것으로 생각하여도 된다.
그러나, 부분 지우기버튼에서 설명한 바와 같이 부분지우기버튼을 사용한 후에 전체지우기버튼을 사용하는 경우에는 도트의 크기를 변경하거나 또는 그림을 다시 그릴 수 없게 되어 색변경버튼 등을 다시 터치하여야만 그림을 그릴 수 있는 불편함이 따른다. 이와 같은 불편한 점(버그)을 없애기 위해 다음과 같은 별도의 블록을 조합한다.
11-3. 우선, 컬러리스트에서 현재 컬러 인덱스(currentColorIndex)에 의거하여 선택한 컬러버튼의 배경색으로 설정한다.
11-4. 컬러버튼의 배경색을 캔버스의 페인트색으로 설정한다.
11-5. 캔버스의 페인트색의 크기를 나타내는 도트사이즈(global dotsize)가 8픽셀(global big)인지 또는 2픽셀(global small)인지의 여부를 판정하는 조건블록(ifelse)을 사용한다
참고 사항: 캔버스에서 사용되는 페인트색의 크기는 이전에 설명한 히든인덱스변수인 블록(dotsize, small, big)을 사용한다.
11-5-1. 캔버스의 페인트색의 크기인 도트사이즈(global dotsize)가 8픽셀(global big)인 경우에는, 8픽셀(global big)을 도트사이즈(set global dotsize to)로 설정하고,
컬러버튼의 배경색(ColorButton.BackgroundColor)을 드로잉캔버스의 페인트색(set DrawingCanvas.PaintColor to)으로 설정하고,
작은 점을 스팟버튼의 텍스트(set SpotButton.Text to)로 설정한다.
11-5-2. 캔버스의 페인트색의 크기인 도트사이즈(global dotsize)가 8픽셀(global big)아닌 경우에는, 즉 2픽셀(global small)인 경우에는, 2픽셀(global small)을 도트사이즈(set global dotsize to)로 설정하고,
컬러버튼의 배경색(ColorButton.BackgroundColor)을 드로잉캔버스의 페인트색(set DrawingCanvas.PaintColor to)으로 설정하고,
큰 점을 스팟버튼의 텍스트(set SpotButton.Text to)로 설정한다.
11-5-3. 이상 설명한 두 그룹의 블록조합을 조건블록(ifelse test then-do else-do)의 해당 섹션(then-do else-do)에 각각 조합한다.
참고 사항: 부분지우기버튼과 동일한 조건문(ifelse)을 사용한다. 차이점이 있다면, 전체지우기버튼의 클릭이벤트발생후에도 캔버스에 그림을 그릴수 있도록 각 조건에서 모두 컬러버튼의 배경색을 캔버스의 페인트으로 설정하는 블록조합을 추가한 점이다.
11-6. 상기 조건블록(ifelse) 등을 전체지우기버튼 클릭이벤트핸들러에 조합한 스크린샷은 다음과 같다.
12. 지금까지 설명한 블록을 종합하여 나타내면, 이하의 3 개의 스크린샷과 같다.
