Jaguar.js

Class: Circle

collie. Circle

new collie.Circle(htOption)

display/Circle.js, line 38

Drawing Circle If you want to draw a circle using DOM rendering, you need the Raphael.js library, version 2.1.0 or newer.

Name Type Description
htOption Object optional

Options

Name Type Default Description
radius Number 0 optional

Radius (px)
strokeColor String optional

Stroke color
strokeWidth Number 0 optional

Border width. Set this option to 0 to disable the border.
fillColor String optional

Color to fill the circle with. The default value is transparent.
fillImage String optional

Image to fill the circle with.
startAngle Number 0 optional

Starting angle (degrees)
endAngle Number 360 optional

Ending angle (degrees). Set a starting angle of 0 and an ending angle of 360 to fully fill the Circle.
closePath Boolean false optional

Close the path (like a Pac-man).
autoExpand Boolean true optional

Set this option to true to expand the Circle object to fit its size to diameter.
anticlockwise Boolean false optional

Set this option to true to fill the Circle anticlockwise.
Example
// Draw a Circle
var circle = new collie.Circle({
 radius : 20 // The Circle object just expands to fit its size to diameter. (width:40, height:40)
}).addTo(layer);


// Arc
circle.set({
 startAngle : 0,
 endAngle : 270
});


// A Pac-man
circle.set({
 startAngle : 45,
 endAngle : 315,
 closePath : true
});

Extends

Requires

  • module:http://raphaeljs.com

Members

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:
자신을 반환

center(nCenterX, nCenterY){collie.Circle}

display/Circle.js, line 220

Move the position of the Circle, relatively to its center.

Name Type Description
nCenterX Number
nCenterY Number
Returns:
the method chaining

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

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

toString(){String}

display/Circle.js, line 231

Returns information on the 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 좌표
comments powered by Disqus