Jaguar.js

Class: MovableObject

collie. MovableObject

new collie.MovableObject(htOption)

display/MovableObject.js, line 18

속도, 가속도, 마찰력, 질량을 포함한 표시 객체 - rotate는 마찰력이 없다

Name Type Description
htOption Object optional

설정

Name Type Default Description
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을 적용해서 싸이클을 현재 시간과 일치
Deprecated
  • DisplayObject에 기능 추가

    Extends

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

    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

    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:
    사용되는 타이머를 반환

    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

    높이
    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

    키 이름, 값이 없으면 모든 값을 다시 적용함

    inherited toString(){String}

    display/DisplayObject.js, line 1423

    문자열로 클래스 정보 반환

    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 좌표
    comments powered by Disqus