Class: ImageNumber

var number = new collie.ImageNumber({
 textAlign: "center",
 letterSpacing: -5,
 width: 300,
 height: 100
}).number({
 width: 90,
 height: 100,
 backgroundImage: "number" // This Image should be contained numbers from 0 to 9.
}).comma({
 width: 45, // comma method requires a width option
 height: 100,
 backgroundImage: "comma"
});
number.setValue(999000); // 'number' object would be shown by "999,000"
number.comma(false); // It would be shown by "999000"

Extends

• collie.DisplayObject

Requires

• module:collie.addon.js

Members

onCanvasDraw

If you define this method in your class, A DisplayObject will run this method when drawing an object with canvas rendering mode.

onDOMDraw

If you define this method in your class, A DisplayObject will run this method when drawing an object with DOM rendering mode.

typeString

클래스 타입

Methods

inherited addChild(oDisplayObject)

display/DisplayObject.js, line 351

DisplayObject의 자식을 추가 한다 - 자식으로 들어간 DisplayObject는 현재 DisplayObject의 zIndex 영향을 받게 된다

Name	Type	Description
oDisplayObject	collie.DisplayObject

inherited addMatrix(vMatrix)

display/DisplayObject.js, line 736

다양한 속성을 변경하며 사용할 경우 addMatrix를 이용해 설정을 미리 만들고 changeMatrix로 변경해 사용할 수 있다.

Name	Type	Description
vMatrix	Array | Object	배열로 여러개를 한번에 넣을 수 있음 Name Type Description name String Matrix 이름 property Number 변경할 설정을 입력한다

Example

oDisplayObject.addMatrix({
    name : "test"
    offsetX : 0,
    offsetY : 100
});
oDisplayObject.addMatrix([
    { name : "test2", offsetX : 100, offsetY : 100, width : 50, height : 50 },
    { name : "test3", offsetX : 200, offsetY : 100, width : 80, height : 80 }
]);
oDisplayObject.changeMatrix("test2");
oDisplayObject.changeMatrix("test3");

inherited addTo(oTarget){collie.DisplayObject}

display/DisplayObject.js, line 403

레이어나 DisplayObject 객체에 현재 객체를 추가 한다.

Name	Type	Description
oTarget	collie.Layer | collie.DisplayObject

inherited align(sHorizontal, sVertical, oBaseObject)

display/DisplayObject.js, line 1144

객체의 위치를 정렬한다.

Name	Type	Default	Description
sHorizontal	String | Boolean	center	optional 수평 정렬 [left|right|center], false면 정렬하지 않음
sVertical	String | Boolean	center	optional 수직 정렬 [top|bottom|center], false면 정렬하지 않음
oBaseObject	collie.DisplayObject		optional 기준 객체, 값이 없을 경우 부모, 부모가 없을 경우 레이어를 기준으로 정렬 한다.

inherited attach(vEvent, fHandler){collie.Component}

Component.js, line 142

이벤트 핸들러 추가

Name	Type	Description
vEvent	Object | String
fHandler	Function

Returns:

체이닝 지원

inherited bottom(nPosition){collie.DisplayObject}

display/DisplayObject.js, line 1211

객체의 위치를 하단 기준으로 좌표만큼 이동한다 만일 Layer에 붙은 상태가 아니라면 붙은 후에 이동할 수 있도록 해 준다

Name	Type	Description
nPosition	Number	하단 기준 x좌표

Returns:

자신을 반환

inherited changeMatrix(sName)

display/DisplayObject.js, line 753

해당 Matrix로 변경한다

Name	Type	Description
sName	String	매트릭스 이름

inherited clone(bRecursive){collie.DisplayObject}

display/DisplayObject.js, line 1441

객체 복사 이벤트는 복사되지 않는다.

Name	Type	Description
bRecursive	Boolean	자식까지 모두 복사하는지 여부

Example

var box = new collie.DisplayObject({
    width: 100,
    height: 100,
    backgroundColor: "blue"
}).addTo(layer);
var box2 = box.clone().addTo(layer);

comma(htOption){collie.ImageNumber}

extension/ImageNumber.js, line 120

세 자리 콤마를 사용할 경우 콤마를 생성할 때 사용할 옵션을 설정한다

Name	Type	Description
htOption	Object | Boolean	콤마를 만들 때 사용할 옵션, 반드시 width를 입력해야 한다, false를 입력하면 콤마를 제거한다

See:

• {collie.DisplayObject}

inherited detach(vEvent, fHandler)

Component.js, line 176

이벤트 핸들러를 해제한다

Name	Type	Description
vEvent	Object | String
fHandler	Function	값이 없을 경우 이 이벤트에 할당된 전체 핸들러를 해제한다

inherited detachAll(sName)

Component.js, line 208

모든 이벤트 핸들러를 해제

Name	Type	Description
sName	String	이벤트 이름, 값이 없으면 이 컴포넌트에 할당된 모든 이벤트를 해제한다

inherited fireEvent(sName, oEvent){Boolean}

Component.js, line 111

이벤트 발생

Name	Type	Description
sName	String
oEvent	Object

Returns:

발생 중 collie.ComponentEvent의 stop 메소드가 실행될 경우 false를 반환한다

inherited get(sKey){Variable|Object}

display/DisplayObject.js, line 296

설정 값을 가져온다

Name	Type	Description
sKey	String	값이 없으면 전체 값을 반환

Returns:

값

Examples

var htData = oDisplayObject.get();
var bVisible = oDisplayObject.get("visible");

<caption>성능을 올리기 위해서는 메서드 호출을 최소한으로 줄이는 것이 좋다
If you want to improve performance to your service, you should use less method call.</caption>
// before
var x = oDisplayObject.get("x");
var y = oDisplayObject.get("y");
var width = oDisplayObject.get("width");
var height = oDisplayObject.get("height");
// after
var htInfo = oDisplayObject.get();
htInfo.x;
htInfo.y;
htInfo.width;
htInfo.height;
// or you can access a htOption object directly. It's not recommend but It's better than frequently method call.
oDisplayObject._htOption.x;
oDisplayObject._htOption.y;
oDisplayObject._htOption.width;
oDisplayObject._htOption.height;

inherited getBoundary(bWithRelatedPosition, bWithPoints){Object}

display/DisplayObject.js, line 937

현재 표시 객체의 사각형 영역을 반환 한다 - transform된 영역을 반환 TODO Transform Matrix의 origin에 상대좌표를 적용해야 하기 때문에 캐시를 적용할 수 없음 TODO Transform 안 된지도 부모를 타고 가봐야 알 수 있음!

Name	Type	Description
bWithRelatedPosition	Boolean	절대좌표로 변경해서 반환하는지 여부
bWithPoints	Boolean	좌표를 반환하는지 여부, Sensor의 box hittest에서 쓰임

Returns:

Name	Type	Description
oBoundary	Object	Name Type Description oBoundary.left Number oBoundary.right Number oBoundary.top Number oBoundary.bottom Number isTransform Number 트랜스폼 사용 여부 points Array bWithPoints를 true로 하면 좌표 배열이 넘어옴, [[x, y], [x, y], ...]

inherited getChildren(){Array}

display/DisplayObject.js, line 432

자식을 반환

inherited getDirty(sKey){Boolean}

display/DisplayObject.js, line 329

값이 변경된 것을 알림

Name	Type	Description
sKey	String	키 이름

Returns:

값이 변경 됐음

inherited getDrawing(){collie.DisplayObjectCanvas|collie.DisplayObjectDOM}

display/DisplayObject.js, line 581

드로잉 객체를 반환

inherited getHitAreaBoundary(){Object}

display/DisplayObject.js, line 994

이벤트와 관련된 영역을 반환 한다 - transform된 영역을 반환 - 절대 좌표로 변환해서 반환한다

Returns:

Name	Type	Description
htReturn	Object	Name Type Description left Number minX right Number maxX top Number minY bottom Number maxY

inherited getId(){String}

display/DisplayObject.js, line 488

아이디를 반환 한다

inherited getImage(){HTMLElement}

display/DisplayObject.js, line 497

현재 객체의 배경 이미지를 가져온다

inherited getImageSize(){Boolean|Object}

display/DisplayObject.js, line 511

이미지 크기를 반환, 레티나일 경우 보정된 값을 반환 한다 Return a size of the image set to backgroundImage property. If The User has a retina display, this method would return a half of size. ex) 640940 -> 320480

Returns:

Name	Type	Description
htSize	Boolean | Object	이미지가 로드되지 않았으면 false를 반환. It would return as false when it has not loaded the image yet. Name Type Description htSize.width Number htSize.height Number

inherited getLayer(){collie.Layer|Boolean}

display/DisplayObject.js, line 712

레이어 반환

inherited getParent(){collie.DisplayObject}

display/DisplayObject.js, line 441

부모를 반환

inherited getRelatedPosition(){Object}

display/DisplayObject.js, line 906

부모와 연관된 전체 좌표를 구한다(절대좌표)

TODO

• 메소드 명이 직관적이지 못하다

Returns:

Name	Type	Description
htPos	Object	Name Type Description htPos.x Number htPos.y Number

getValue(){Number}

extension/ImageNumber.js, line 97

설정된 값을 반환한다.

inherited hasAttachedHandler(){Boolean}

display/DisplayObject.js, line 1340

attach된 이벤트 핸들러가 있는지 여부를 반환

inherited hasChild(){Boolean}

display/DisplayObject.js, line 423

자식이 있는지 반환

Returns:

있다면 true

inherited isChanged(bChangedOnlyTranforms){Boolean}

display/DisplayObject.js, line 633

현재 객체에 변경된 내용 여부를 반환 DOM일 경우 변경된게 없으면 다시 안그림

Name	Type	Description
bChangedOnlyTranforms	Boolean

inherited leave(){collie.DisplayObject}

display/DisplayObject.js, line 467

부모가 있을 경우 부모에서 자신을 뺀다

Returns:

반환

inherited move(nX, nY, nVelocity, fCallback){collie.AnimationTransition}

display/DisplayObject.js, line 1363

특정 속도로 해당 지점까지 이동

Name	Type	Description
nX	Number	가고자 하는 곳의 x 좌표
nY	Number	가고자 하는 곳의 y 좌표
nVelocity	Number	초당 이동 거리(px), 속도가 0 이면 바로 이동한다.
fCallback	Function	이동이 끝난 후 실행될 콜백 Name Type Description displayobject collie.DisplayObject 현재 객체가 인자로 넘어감=

Returns:

사용되는 타이머를 반환

inherited moveBy(nX, nY, nVelocity, fCallback){collie.AnimationTransition}

display/DisplayObject.js, line 1412

상대 경로로 이동

Name	Type	Description
nX	Number	가고자 하는 곳의 x 좌표
nY	Number	가고자 하는 곳의 y 좌표
nVelocity	Number	초당 이동 거리(px), 속도가 0 이면 바로 이동한다.
fCallback	Function	이동이 끝난 후 실행될 콜백

Returns:

사용되는 타이머를 반환

number(htOption){collie.ImageNumber}

extension/ImageNumber.js, line 108

숫자를 만들 때 사용할 옵션을 설정한다

Name	Type	Description
htOption	Object

See:

• {collie.DisplayObject}

inherited option(vName, vValue, bNotOverwrite)

Component.js, line 27

컴포넌트의 옵션을 설정한다.

Name	Type	Description
vName	Object | String	옵션 이름이나 여러 옵션을 설정할 수 있는 객체를 넣을 수 있다.
vValue	Variables	optional 옵션 값, 값이 없다면 해당 옵션 값을 반환한다.
bNotOverwrite	Boolean	optional 이 값이 true면 기존에 값이 있을 경우 덮이 씌우지 않는다

Example

component.option({
 a : 1,
 b : true
});
component.option("a", 1);
component.option("a"); // return 1

inherited optionSetter(sName, fSetter)

Component.js, line 100

옵션 값이 설정될 때 실행될 함수를 지정한다. Setter는 한 속성 당 한 개의 함수만 설정할 수 있다.

Name	Type	Description
sName	String
fSetter	Function

inherited removeChild(oDisplayObject, nIdx)

display/DisplayObject.js, line 367

자식을 제거 한다

Name	Type	Description
oDisplayObject	collie.DisplayObject
nIdx	Number	인덱스 번호를 알고 있다면 인덱스 번호를 지정

inherited resizeFixedRatio(nWidth, nHeight)

display/DisplayObject.js, line 1240

지정한 비율에 맞게 크기를 변경 한다. 리샘플링과는 다르다 인자 둘 중 하나를 설정하면 설정한 부분의 비율에 맞춰서 크기를 변경 한다

Name	Type	Description
nWidth	Number	optional 너비
nHeight	Number	optional 높이

inherited right(nPosition){collie.DisplayObject}

display/DisplayObject.js, line 1182

객체의 위치를 우측 기준으로 좌표만큼 이동한다 만일 Layer에 붙은 상태가 아니라면 붙은 후에 이동할 수 있도록 해 준다

Name	Type	Description
nPosition	Number	우측 기준 x좌표

Returns:

자신을 반환

inherited set(vKey, vValue, bSkipSetter, bSkipChanged){collie.DisplayObject}

display/DisplayObject.js, line 157

설정 값을 변경한다

Name	Type	Description
vKey	String | Object	설정 이름. 여러개의 값을 Object로 한번에 설정할 수 있다.
vValue	Variables	값
bSkipSetter	Boolean	optional setter를 수행하지 않음. 일반적으로 사용하는 것은 권장하지 않는다
bSkipChanged	Boolean	optional 상태 변경을 하지 않는다. 상태변경을 하지 않게 되면 다시 그리지 않는다

Returns:

Method Chaining

Example

oDisplayObject.set({
    visible : false,
 opacity : 1
});
oDisplayObject.set("visible", true);

inherited setDirty(sKey)

display/DisplayObject.js, line 309

값이 변경된 것으로 설정

Name	Type	Description
sKey	String	키 이름, 값이 없으면 모든 값을 다시 적용함

setValue(nNumber){collie.ImageNumber}

extension/ImageNumber.js, line 51

값을 설정

Name	Type	Description
nNumber	Number

toString(){String}

extension/ImageNumber.js, line 236

클래스 정보를 문자열로 반환 Returns to information of Class as string

inherited unset(sKey)

Component.js, line 88

옵션을 제거한다

Name	Type	Description
sKey	String

Events

inherited click

layer/LayerEvent.js, line 331

click 이벤트, 모바일 환경일 때는 touchstart, touchend를 비교해서 좌표가 일정 이내로 움직였을 경우 click 이벤트를 발생한다d

Name	Type	Description
htEvent	Object	Name Type Description displayObject collie.DisplayObject 대상 객체 event HTMLEvent 이벤트 객체 x Number 이벤트 상대 x 좌표 y Number 이벤트 상대 y 좌표

inherited mousedown

layer/LayerEvent.js, line 332

mousedown 이벤트, 모바일 환경일 때는 touchstart 이벤트도 해당 된다.

Name	Type	Description
htEvent	Object	Name Type Description displayObject collie.DisplayObject 대상 객체 event HTMLEvent 이벤트 객체 x Number 이벤트 상대 x 좌표 y Number 이벤트 상대 y 좌표

inherited mouseup

layer/LayerEvent.js, line 333

mouseup 이벤트, 모바일 환경일 때는 touchend 이벤트도 해당 된다.

Name	Type	Description
htEvent	Object	Name Type Description displayObject collie.DisplayObject 대상 객체 event Event 이벤트 객체 event HTMLEvent 이벤트 객체 x Number 이벤트 상대 x 좌표 y Number 이벤트 상대 y 좌표