Class: Circle

collie. Circle

new collie.Circle(htOption)

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)

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

Name Type Description
oDisplayObject collie.DisplayObject

다양한 속성을 변경하며 사용할 경우 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");

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

Name Type Description
oTarget collie.Layer | collie.DisplayObject

inherited align(sHorizontal, sVertical, oBaseObject)

객체의 위치를 정렬한다.

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}

이벤트 핸들러 추가

Name Type Description
vEvent Object | String
fHandler Function
Returns:
체이닝 지원

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

Name Type Description
nPosition Number

하단 기준 x좌표

Returns:
자신을 반환

center(nCenterX, nCenterY){collie.Circle}

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

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

해당 Matrix로 변경한다

Name Type Description
sName String

매트릭스 이름

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

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)

이벤트 핸들러를 해제한다

Name Type Description
vEvent Object | String
fHandler Function

값이 없을 경우 이 이벤트에 할당된 전체 핸들러를 해제한다

inherited detachAll(sName)

모든 이벤트 핸들러를 해제

Name Type Description
sName String

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

inherited fireEvent(sName, oEvent){Boolean}

이벤트 발생

Name Type Description
sName String
oEvent Object
Returns:
발생 중 collie.ComponentEvent의 stop 메소드가 실행될 경우 false를 반환한다

inherited get(sKey){Variable|Object}

설정 값을 가져온다

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}

현재 표시 객체의 사각형 영역을 반환 한다 - 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 getDirty(sKey){Boolean}

값이 변경된 것을 알림

Name Type Description
sKey String

키 이름

Returns:
값이 변경 됐음

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

드로잉 객체를 반환

inherited getHitAreaBoundary(){Object}

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

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

아이디를 반환 한다

inherited getImage(){HTMLElement}

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

inherited getImageSize(){Boolean|Object}

이미지 크기를 반환, 레티나일 경우 보정된 값을 반환 한다 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 getRelatedPosition(){Object}

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

TODO
  • 메소드 명이 직관적이지 못하다
Returns:
Name Type Description
htPos Object
Name Type Description
htPos.x Number
htPos.y Number

inherited hasAttachedHandler(){Boolean}

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

자식이 있는지 반환

Returns:
있다면 true

inherited isChanged(bChangedOnlyTranforms){Boolean}

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

Name Type Description
bChangedOnlyTranforms Boolean

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

Returns:
반환

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

Name Type Description
nX Number

가고자 하는 곳의 x 좌표

nY Number

가고자 하는 곳의 y 좌표

nVelocity Number

초당 이동 거리(px), 속도가 0 이면 바로 이동한다.

fCallback Function

이동이 끝난 후 실행될 콜백

Name Type Description
displayobject collie.DisplayObject

현재 객체가 인자로 넘어감=

Returns:
사용되는 타이머를 반환

상대 경로로 이동

Name Type Description
nX Number

가고자 하는 곳의 x 좌표

nY Number

가고자 하는 곳의 y 좌표

nVelocity Number

초당 이동 거리(px), 속도가 0 이면 바로 이동한다.

fCallback Function

이동이 끝난 후 실행될 콜백

Returns:
사용되는 타이머를 반환

inherited option(vName, vValue, bNotOverwrite)

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

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)

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

Name Type Description
sName String
fSetter Function

inherited removeChild(oDisplayObject, nIdx)

자식을 제거 한다

Name Type Description
oDisplayObject collie.DisplayObject
nIdx Number

인덱스 번호를 알고 있다면 인덱스 번호를 지정

inherited resizeFixedRatio(nWidth, nHeight)

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

Name Type Description
nWidth Number optional

너비

nHeight Number optional

높이

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

Name Type Description
nPosition Number

우측 기준 x좌표

Returns:
자신을 반환

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

설정 값을 변경한다

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

값이 변경된 것으로 설정

Name Type Description
sKey String

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

toString(){String}

Returns information on the Class as String

옵션을 제거한다

Name Type Description
sKey String

Events

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 이벤트, 모바일 환경일 때는 touchstart 이벤트도 해당 된다.

Name Type Description
htEvent Object
Name Type Description
displayObject collie.DisplayObject

대상 객체

event HTMLEvent

이벤트 객체

x Number

이벤트 상대 x 좌표

y Number

이벤트 상대 y 좌표

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