10주차 : Camera&Share + WebViewer

이번 시간에는 앱인벤터를 활용하여 사진메모를 공유하는 것을 배웠다.

●Canvas 1개
●HorizontalArrangement1에 넣은 Button 4개
●HorizontalArrangement1에 넣은 Button 2개와 Label 1개, Slider 1개
●Camera 1개
●Sharing 1개


- 아이콘 업로드
- Title 변경: CameraNSharing
- AppName 변경 : CameraNSharing

- Height와 Width를 Fill parent로
- BackgroundImage 업로드

- Width를 Fill parent로

- Text 변경 : Red, Green, Blue, 지우기
- TextColor을 각각 바꿔주기 : 빨간색, 초록색, 파란색 *지우기는 그대로 두기
- FontBold 선택
- Width를 Fill parent로

- Width를 Fill parent로
- AlignVertical을 center로

- 이름 변경 : btnCamera, btnSNS
- Text 변경 : 사진찍기, SNS
- FontBold 선택
- Width를 Fill parent로

- Text 변경 : 선 두께 :
- Width를 Fill parent로
- 이름 변경 : lblThickness

- Width를 Fill parent로
- MinValue를 1로
- MaxValue를 20으로
- ThumbPosition을 3으로

 

보이지않는 컴포넌트 : Camera, Sharing

최종 디자인

코딩(Coding)하기

dotSize 변수를 3으로 지정함

Screen1이 시작되면,
Canvas의 LineWidth를 dotSize로 지정한다.
Lable의 Text를 "선 두께 : dotSize"로 지정한다.

사진찍기 버튼을 누르면,
TakePicture을 불러온다.

사진을 찍고나면,
Canvas의 배경화면을 찍은 이미지로 변경한다.

지우기 버튼을 누르면,
Canvas를 clear하게 해준다. (사진은 그대로 두고 메모만 지우기)

btnRed를 누르면,
Canvas의 PaintColor를 Red로 해준다.

btnGreen를 누르면,
Canvas의 PaintColor를 Green로 해준다.

btnBlue를 누르면,
Canvas의 PaintColor를 Blue로 해준다

Slider의 위치가 바뀌었을 때,
dotSize를 thimbPosition으로 바꿔준다.
lblThickness의 Text를 "선 두께 : thimbPosition(=dotSize)"으로 바꿔준다.
Canvas의 LineWidth를 thimbPosition(=dotSize)으로 바꿔준다.

Canvas가 터치되면,
dotSize로 원이 그려지도록 한다.

Canvas를 드래그하면,
DrawLine으로 처리되도록 한다.

btnSNS가 클릭되면,
파일 이름을 지정한 후, Canvas을 Sharing 할 수 있도록 한다

 

WebViewer

 

사용 컴포넌트는 
-Spinner

- Webviewer

- textbox , button.