Class: DisplayObject

new collie.DisplayObject(htOption)

A DisplayObject is basic class for display object.
A DisplayObject can have one or many displayObject like a DOM Element.
A offset values changed by when you set a spriteX and spriteY options, but there is no change when you set offsetX and offsetY values.
You can use the addTo method with the method chaining
A DisplayObject should be set useCache option as true if it doesn't change frequently.

Name Type Description

htOption

Object

optional

Options

Name	Type	Default	Description
`name`	String		optional 객체 이름, 중복 가능
`width`	Number \| String	"auto"	optional 너비, auto 값일 경우 backgroundImage가 설정되면 해당 이미지 너비 만큼 자동으로 변경 된다
`height`	Number \| String	"auto"	optional 높이, auto 값일 경우 backgroundImage가 설정되면 해당 이미지 높이 만큼 자동으로 변경 된다
`x`	Number \| String	0	optional x축 위치, left, right, center 값을 사용하면 부모를 기준으로 정렬
`y`	Number \| String	0	optional y축 위치, top, bottom, center 값을 사용하면 부모를 기준으로 정렬
`zIndex`	Number	0	optional 표시 순서. 높을 수록 위에 있음. 같으면 추가한 순서대로
`opacity`	Number	1	optional 투명도(0~1)
`angle`	Number	0	optional 회전각(0~360 deg)
`scaleX`	Number	1	optional x축 비율
`scaleY`	Number	1	optional y축 비율
`originX`	Number	center	optional scale, angle 적용 가로 기준 [left, right, center, 숫자]
`originY`	Number	center	optional scale, angle 적용 세로 기준 [top, bottom, center, 숫자]
`offsetX`	Number	0	optional 배경 이미지 시작 x좌표
`offsetY`	Number	0	optional 배경 이미지 시작 y좌표
`spriteX`	Number	null	optional 배경 가로 스프라이트 index, 너비 * index 값으로 offsetX가 설정된다
`spriteY`	Number	null	optional 배경 세로 스프라이트 index, 높이 * index 값으로 offsetY가 설정된다
`spriteLength`	Number	0	optional 배경 스프라이트 frame수, 가로폭 제한 스프라이트일 경우에 전체 프레임 수를 지정한다. 높이가 height보다 크지 않은 경우 적용되지 않는다
`spriteSheet`	Number	null	optional 배경 스프라이트 시트 이름, ImageManager에서 addSprite로 정보를 넣었을 경우 사용할 수 있다
`rangeX`	Array	null	optional X좌표 가용 범위. 배열로 최소, 최대값을 설정 [min, max], 상대 좌표임(현재 객체의 x, y좌표와 동일)
`rangeY`	Array	null	optional Y좌표 가용 범위. 배열로 최소, 최대값을 설정 [min, max], 상대 좌표임(현재 객체의 x, y좌표와 동일)
`positionRepeat`	Boolean	false	optional x,y 좌표의 범위 설정(rangeX, rangeY)이 되어 있는 경우 범위를 벗어나면 원점으로 돌아오는지 여부를 설정. fasle면 경계값까지만 움직이고 멈춤
`backgroundColor`	String		optional 배경색
`backgroundImage`	String		optional 배경이미지, 이미지매니져 리소스 이름이나 엘리먼트
`backgroundRepeat`	String	'no-repeat'	optional 배경 이미지 반복 방법 repeat, repeat-x, repeat-y, no-repeat, no-repeat이 아니라면 useCache가 자동으로 true로 변함
`fitImage`	Boolean	false	optional 이미지를 객체 크기에 맞추기
`hitArea`	collie.DisplayObject \| Array		optional 이벤트 영역으로 사용될 다른 객체나 Polyline Path를 배열로 설정한다. 이 때 좌표는 상대 좌표 [[x1, y1], [x2, y2], ...]
`debugHitArea`	Boolean	false	optional 이벤트 영역으로 사용된 hitArea를 화면에서 직접 확인할 수 있다. 성능에 좋지 않기 때문에 디버깅할 때만 사용해야 한다.
`velocityX`	Number	0	optional x축 속도(초당 px)
`velocityY`	Number	0	optional y축 속도(초당 px)
`velocityRotate`	Number	0	optional 회전 속도(초당 1도)
`forceX`	Number	0	optional x축 힘(초당 px)
`forceY`	Number	0	optional y축 힘(초당 px)
`forceRotate`	Number	0	optional 회전 힘(초당 1도)
`mass`	Number	1	optional 질량
`friction`	Number	0	optional 마찰력
`useRealTime`	Boolean	true	optional SkippedFrame을 적용해서 싸이클을 현재 시간과 일치
`useCache`	Boolean	false	optional 타일 캐시 사용 여부. 자식 객체를 모두 자신의 Context에 그려 놓는다.
`useEvent`	String \| Boolean	"auto"	optional 이벤트 사용 여부, Layer옵션과 DisplayObject 옵션 중에 하나라도 false라면 동작하지 않는다. auto면 attach된 이벤트가 있을 경우에만 동작한다
`visible`	Boolean	true	optional 화면 표시 여부. false면 자식 객체도 보이지 않는다. "hidden" 값으로 설정하면 자식 객체는 표시하고 자신만 보이지 않게 한다

Extends

collie.Component

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

addChild(oDisplayObject) display/DisplayObject.js, line 351

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

Name	Type	Description
`oDisplayObject`	collie.DisplayObject

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");

addTo(oTarget){collie.DisplayObject} display/DisplayObject.js, line 403

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

Name	Type	Description
`oTarget`	collie.Layer \| collie.DisplayObject

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:

체이닝 지원

bottom(nPosition){collie.DisplayObject} display/DisplayObject.js, line 1211

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

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

Returns:

자신을 반환

changeMatrix(sName) display/DisplayObject.js, line 753

해당 Matrix로 변경한다

Name	Type	Description
`sName`	String	매트릭스 이름

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);

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를 반환한다

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;

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], ...]

getChildren(){Array} display/DisplayObject.js, line 432

자식을 반환

getDirty(sKey){Boolean} display/DisplayObject.js, line 329

값이 변경된 것을 알림

Name	Type	Description
`sKey`	String	키 이름

Returns:

값이 변경 됐음

getDrawing(){collie.DisplayObjectCanvas|collie.DisplayObjectDOM} display/DisplayObject.js, line 581

드로잉 객체를 반환

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

getId(){String} display/DisplayObject.js, line 488

아이디를 반환 한다

getImage(){HTMLElement} display/DisplayObject.js, line 497

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

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

getLayer(){collie.Layer|Boolean} display/DisplayObject.js, line 712

레이어 반환

getParent(){collie.DisplayObject} display/DisplayObject.js, line 441

부모를 반환

getRelatedPosition(){Object} display/DisplayObject.js, line 906

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

TODO

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

Returns:

Name Type Description

htPos

Object

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

hasAttachedHandler(){Boolean} display/DisplayObject.js, line 1340

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

hasChild(){Boolean} display/DisplayObject.js, line 423

자식이 있는지 반환

Returns:

있다면 true

isChanged(bChangedOnlyTranforms){Boolean} display/DisplayObject.js, line 633

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

Name	Type	Description
`bChangedOnlyTranforms`	Boolean

leave(){collie.DisplayObject} display/DisplayObject.js, line 467

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

Returns:

반환

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:

사용되는 타이머를 반환

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:

사용되는 타이머를 반환

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

removeChild(oDisplayObject, nIdx) display/DisplayObject.js, line 367

자식을 제거 한다

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

resizeFixedRatio(nWidth, nHeight) display/DisplayObject.js, line 1240

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

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

right(nPosition){collie.DisplayObject} display/DisplayObject.js, line 1182

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

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

Returns:

자신을 반환

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);

setDirty(sKey) display/DisplayObject.js, line 309

값이 변경된 것으로 설정

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

toString(){String} display/DisplayObject.js, line 1423

문자열로 클래스 정보 반환

inherited unset(sKey) Component.js, line 88

옵션을 제거한다

Name	Type	Description
`sKey`	String

Events

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 좌표

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 좌표

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 좌표

Jaguar.js

Class: DisplayObject

new collie.DisplayObject(htOption)

Extends

Members

onCanvasDraw

onDOMDraw

typeString

Methods

addChild(oDisplayObject)

addMatrix(vMatrix)

Example

addTo(oTarget){collie.DisplayObject}

align(sHorizontal, sVertical, oBaseObject)

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

Returns:

bottom(nPosition){collie.DisplayObject}

Returns:

changeMatrix(sName)

clone(bRecursive){collie.DisplayObject}

Example

inherited detach(vEvent, fHandler)

inherited detachAll(sName)

inherited fireEvent(sName, oEvent){Boolean}

Returns:

get(sKey){Variable|Object}

Returns:

Examples

getBoundary(bWithRelatedPosition, bWithPoints){Object}

Returns:

getChildren(){Array}

getDirty(sKey){Boolean}

Returns:

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

getHitAreaBoundary(){Object}

Returns:

getId(){String}

getImage(){HTMLElement}

getImageSize(){Boolean|Object}

Returns:

getLayer(){collie.Layer|Boolean}

getParent(){collie.DisplayObject}

getRelatedPosition(){Object}

Returns:

hasAttachedHandler(){Boolean}

hasChild(){Boolean}

Returns:

isChanged(bChangedOnlyTranforms){Boolean}

leave(){collie.DisplayObject}

Returns:

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

Returns:

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

Returns:

inherited option(vName, vValue, bNotOverwrite)

Example

inherited optionSetter(sName, fSetter)

removeChild(oDisplayObject, nIdx)

resizeFixedRatio(nWidth, nHeight)

right(nPosition){collie.DisplayObject}

Returns:

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

Returns:

Example

setDirty(sKey)

toString(){String}

inherited unset(sKey)

Events

click

mousedown

mouseup