버튼 transform 가이드

이 화면은 transform과 관련된 6가지 속성인 origin, rotate, scale, translate, skew, flip 속성 및 API에 대한 샘플 화면이다.

1. origin속성은 변형할때 중심점의 위치를 변경하는 속성이다. rotate, scale, flip 속성을 설정했을때 같이 적용된다.

중심점의 기본 위치는 컴포넌트의 0, 0(좌측위)이다.

2. rotate속성은 컴포넌트를 회전시킬 각도를 설정하는 속성이다

3. scale속성은 컴포넌트를 확대 또는 축소할 배율을 설정하는 속성이다.

확대/축소되서 표시되는것일뿐 실제 width나 height값이 변경되는것은 아니다.

4. translate속성은 컴포넌트를 지정한 좌표만큼 이동시키는 속성이다 (이동시킨 만큼 컴포넌트의 위치 좌표값(left, top값)이 변경된다).

5. skew속성은 컴포넌트를 기울이는 속성이다.

6. flip속성은 컴포넌트를 x축, y축 기준으로 반전시키는 속성이다 (0:none, 1: y축반전, 2: x축반전, 3: x,y축 반전).

※ 소수점은 scale속성에서만 입력 가능하다.

관련 API는 getorigin, setorigin, getrotate, setrotate, getscale, setscale, gettranslate, settranslate, getskew, setskew, getflip, setflip가 있다.

템플릿 위치: /HTML5/COMPONENT/BUTTON/button_transform

템플릿 파일

• button_transform.xml
• button_transform.js
• 새창으로 실행

function btn_getorigin_on_mouseup(objInst)
{
	var ret = btn_target.getorigin();
	screen.alert("getorigin = " + ret);
}

function btn_setorigin_on_mouseup(objInst)
{
	var ret = btn_target.setorigin(50,0);
	console.log("setorigin = " + ret);
}

function btn_getrotate_on_mouseup(objInst)
{
	var ret = btn_target.getrotate();
	screen.alert("getrotate = " + ret);
}

function btn_setrotate_on_mouseup(objInst)
{
	var ret = btn_target.setrotate(30);
	console.log("setrotate = " + ret);
}

function btn_getscale_on_mouseup(objInst)
{
	var ret = btn_target.getscale();
	screen.alert("getscale = " + ret);
}

function btn_setscale_on_mouseup(objInst)
{
	var ret = btn_target.setscale(1.2,1.5);
	console.log("setscale = " + ret);
}

function btn_gettranslate_on_mouseup(objInst)
{
	var ret = btn_target.gettranslate();
	screen.alert("gettranslate = " + ret);
}

function btn_settranslate_on_mouseup(objInst)
{
	var ret = btn_target.settranslate(50,0);
	console.log("settranslate = " + ret);
}

function btn_getskew_on_mouseup(objInst)
{
	var ret = btn_target.getskew();
	screen.alert("gettranslate = " + ret);
}

function btn_setskew_on_mouseup(objInst)
{
	var ret = btn_target.setskew(30,0);
	console.log("settranslate = " + ret);
}

function btn_getflip_on_mouseup(objInst)
{
	var ret = btn_target.getflip();
	screen.alert("getflip = " + ret);
}

function btn_setflip_on_mouseup(objInst)
{
	var ret = btn_target.setflip(1);
	console.log("setflip = " + ret);
}