Class: Layer

collie. Layer

new collie.Layer(htOption)

A Layer contains many displayObjects. In Canvas mode, one layer is one canvas element. If you have been using just one canvas element, try to have a few layers. But not too many.

Name Type Description

htOption

Object

optional

Name	Type	Default	Description
`width`	Number	320	optional (px) It only works when initialize this class. It's different from a set method in displayObject.
`height`	Number	480	optional (px)
`x`	Number	0	optional (px)
`y`	Number	0	optional (px)
`useEvent`	Boolean	true	optional Use event on this layer. If you want to improve performance of event, you can set this option as false.
`visible`	Boolean	true	optional Visibility
`freeze`	Boolean	false	optional A Layer will not updated more.
`renderingMode`	Boolean	inherit	optional You can use DOM mixed with Canvas to each layers. [inherit\|dom\|canvas]

Extends

collie.Component

Members

typeString

Class name

Methods

addChild(oDisplayObject) layer/Layer.js, line 191

Add a displayObject on this layer

Name	Type	Description
`oDisplayObject`	collie.DisplayObject

addChildren(aList) layer/Layer.js, line 202

Add many displayObjects in one time

Name	Type	Description
`aList`	Array	An Array to contain DisplayObjects

addTo(oRenderer){collie.Layer} layer/Layer.js, line 257

Add layer to a Renderer(like a addTo method in DisplayObject)

Name	Type	Description
`oRenderer`	collie.Renderer	optional A Renderer that will add a this layer. Default value is a collie.Rencerer.

Returns:

method chaining

Example

before

var layer = new collie.Layer();
collie.Renderer.addLayer(layer);

after

var layer = new collie.Layer().addTo();

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

이벤트 핸들러 추가

Name	Type	Description
`vEvent`	Object \| String
`fHandler`	Function

Returns:

체이닝 지원

clear() layer/Layer.js, line 358

Clear a display. It only works with Canvas mode. 화면을 지운다. Canvas일 때만 작동

clone(bRecursive){collie.Layer} layer/Layer.js, line 489

Clone a layer

Name	Type	Description
`bRecursive`	Boolean	Whether clone a layer with displayObjects that added this layer or not

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(sName){Variables} Component.js, line 65

DisplayObject와 Layer의 서로 다른 인터페이스를 맞추기 위한 임시 메서드

Name	Type	Description
`sName`	String

See:

collie.Component#option

getChildren(){Array} layer/Layer.js, line 277

Return children that added to this layer

getContext(){Boolean|Object} layer/Layer.js, line 317

Return a Context2D instance

getDrawing(){collie.LayerCanvas|collie.LayerDOM} layer/Layer.js, line 83

Return a drawing instance.

getElement(){HTMLElement} layer/Layer.js, line 325

Return a HTMLElement of this layer

getEvent(){collie.LayerEvent} layer/Layer.js, line 99

Return a event instance

getParent(){HTMLElement} layer/Layer.js, line 107

Return a HTMLElement of a parent

getRenderingMode(){String} layer/Layer.js, line 91

Return a rendering mode of a current layer

hasChild(){Boolean} layer/Layer.js, line 285

Return a boolean value that is whether this layer has a child or not

isChanged(){Boolean} layer/Layer.js, line 301

If this layer needs to update display, It'll return value as true

Returns:

변경된 점 있음

offset(nX, nY, bSkipResetInitAlign) layer/Layer.js, line 401

Change a coordinate of this layer. 레이어의 부모의 크기는 등록된 레이어 중 가장 큰 레이어의 크기에 맞게 변경된다.

Name	Type	Description
`nX`	Number \| String	optional x좌표(px), left, right, center를 입력하면 Renderer의 크기 기준으로 정렬된다. 렌더러의 크기가 변하더라도 자동으로 움직이지 않는다.
`nY`	Number \| String	optional y좌표(px), top, bottom, center를 입력하면 Renderer의 크기 기준으로 정렬된다. 렌더러의 크기가 변하더라도 자동으로 움직이지 않는다.
`bSkipResetInitAlign`	Boolean	optional private용 변수, 직접 쓰지 않는다.

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) layer/Layer.js, line 213

Remove a displayObject from this layer

Name	Type	Description
`oDisplayObject`	collie.DisplayObject
`nIdx`	Number	If you know an index of the displayObject, you can improve performance a little.

removeChildren(aList) layer/Layer.js, line 234

Remove displayObjects from this layer

Name	Type	Description
`aList`	Array	An Array to contain DisplayObjects

resize(nWidth, nHeight, bExpand) layer/Layer.js, line 370

Resize this layer If you want to resize all of layers, you can use the resize method in Renderer.

Name	Type	Description
`nWidth`	Number
`nHeight`	Number
`bExpand`	Boolean	If you want to resize contents in the layer, you should set this value as true

See:

collie.Renderer#resize

inherited set(sName, vValue, bNotOverwrite){Object} Component.js, line 78

DisplayObject와 Layer의 서로 다른 인터페이스를 맞추기 위한 임시 메서드

Name	Type	Description
`sName`	String
`vValue`	Variables
`bNotOverwrite`	Boolean	optional

See:

collie.Component#option

Returns:

method chaining

setParent(elParent) layer/Layer.js, line 456

고민 중... 부모를 렌더러가 아닌 다른 엘리먼트에 붙이는 행위

Name	Type	Description
`elParent`	HTMLElement \| String

inherited unset(sKey) Component.js, line 88

옵션을 제거한다

Name	Type	Description
`sKey`	String

Events

click layer/LayerEvent.js, line 187

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 188

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 189

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

Name Type Description

htEvent

Object

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

mouseup layer/LayerEvent.js, line 190

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

Name Type Description

htEvent

Object

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

resize layer/Layer.js, line 385

Occur when this layer resized

Jaguar.js

Class: Layer

new collie.Layer(htOption)

Extends

Members

typeString

Methods

addChild(oDisplayObject)

addChildren(aList)

addTo(oRenderer){collie.Layer}

Returns:

Example

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

Returns:

clear()

clone(bRecursive){collie.Layer}

inherited detach(vEvent, fHandler)

inherited detachAll(sName)

inherited fireEvent(sName, oEvent){Boolean}

Returns:

inherited get(sName){Variables}

getChildren(){Array}

getContext(){Boolean|Object}

getDrawing(){collie.LayerCanvas|collie.LayerDOM}

getElement(){HTMLElement}

getEvent(){collie.LayerEvent}

getParent(){HTMLElement}

getRenderingMode(){String}

hasChild(){Boolean}

isChanged(){Boolean}

Returns:

offset(nX, nY, bSkipResetInitAlign)

inherited option(vName, vValue, bNotOverwrite)

Example

inherited optionSetter(sName, fSetter)

removeChild(oDisplayObject, nIdx)

removeChildren(aList)

resize(nWidth, nHeight, bExpand)

inherited set(sName, vValue, bNotOverwrite){Object}

Returns:

setParent(elParent)

inherited unset(sKey)

Events

click

mousedown

mouseup

mouseup

resize