Sketch 소개

Sketch 컴포넌트는 이름 그대로 백지에 무언가 그리는 기능을 제공하는 컴포넌트입니다. 전문적으로 그림을 그리기 위한 도구는 아니고 간단한 서명하기 등의 기능이 필요할 때 사용할 수 있습니다.

사용 예

일반 소매점에서 카드 결제 후 서명을 하는 단말기에 사용되는 컴포넌트도 Sketch 컴포넌트와 비슷한 기능을 처리합니다. 서명을 받고 이를 이미지로 저장해 카드 회사로 결제 정보와 함께 전송하는 것입니다.

Sketch 만들기

기본 TypeDefinition에는 Sketch 컴포넌트가 등록되어 있지 않습니다. Project Explorer에서 [TypeDefinition > Objects] 항목을 선택하고 에디터를 실행하면 Modules 항목에서 추가되지 않은 오브젝트 목록을 확인할 수 있습니다. 목록에서 "nexacro.Sketch" 항목 옆에 [+] 버튼을 클릭해 오브젝트를 추가합니다.

툴바에서 Sketch를 선택한 후, Form 위에 드래그 앤 드롭해 생성합니다.

QuickView(Ctrl + F6)로 실행합니다. default 설정값이 바로 Sketch 컴포넌트 위에 그림을 그릴 수 있는 것이어서 해당 영역 위에 마우스 왼쪽 버튼 클릭 후 드래그를 하면 그림이 그려집니다.

Sketch 옵션 추가하기

그리기와 지우기 두 가지 기본 기능을 제공하며 Text를 추가할 수 있습니다. 그리기 작업 시에는 브러시의 색상, 크기, 모양 등을 설정할 수 있습니다. 이번 예제에서는 간단한 옵션을 추가해봅니다.

예제

Sketch 컴포넌트 영역이 표시되고 Color, Size 옵션을 선택할 수 있습니다. 그리고 Radio 버튼을 선택하면 편집 시 텍스트를 추가하거나 그려진 이미지를 지울 수 있습니다.

웹브라우저에서 실행한 경우에는 작성된 이미지를 파일로 저장할 수 있습니다. 웹브라우저 외 런타임 브라우저를 사용하는 경우에는 별도 메소드를 사용해 저장 기능을 구현할 수 있습니다.

sample_sketch_01.xfdl

예제에서 사용한 핵심 기능

setBrushColor, setBrushSize

Sketch 영역에 그려지는 선의 색상이나 크기를 지정합니다.

editmode

네 가지 옵션 중 하나를 선택할 수 있습니다. default 값은 "stroke"입니다. "text"를 선택한 경우에는 선택한 지점에 문자열을 추가할 수 있습니다. 문자열은 입력이 완료되면 이미지로 변환되며 수정할 수 없습니다.

예제 구현 방법

Sketch 컴포넌트를 배치하고 옵션 설정을 위해 Staitc 컴포넌트와 Combo, Spin, Radio 컴포넌트를 배치합니다. Combo 컴포넌트의 innerdataset은 "Black, Blue, Red, Yellow" 4가지 색상을 지정하고 Radio 컴포넌트의 innerdataset은 "none, stroke, text, erase" 4가지 옵션을 지정합니다.

Sketch 컴포넌트에서 사용하는 브러시 크기는 0보다 큰 값으로 지정해주어야 합니다. Spin 컴포넌트의 min 속성값을 1로 지정합니다.

옵션값을 수정할 때 수정된 값을 Sketch 컴포넌트에 반영할 수 있도록 해당하는 이벤트를 추가합니다.

this.cmbColor_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.sketchMain.setBrushColor(obj.value);
};

this.spinSize_onchanged = function(obj:nexacro.Spin,e:nexacro.ChangeEventInfo)
{
	this.sketchMain.setBrushSize(obj.value);
};

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.sketchMain.set_editmode(obj.value);
};

QuickView(Ctrl + F6)로 실행한 후 옵션값을 변경하면서 Sketch 컴포넌트에 그림을 그리거나 문자열을 추가합니다.