[Raphael JS] Raphael JS 번역 2 - Documents #1 (Animation ~ Element.dblclick 까지)

* 해당 글은 raphaeljs.com 의 글을 번역한 것이며, 어떠한 수익, 영리적 목적이 없습니다. 라파엘JS 측으로부터 공식적인 허가를 받았음을 알립니다.

* 라파엘의 공식 홈페이지는 http://raphaeljs.com/ 이곳이며, Raphael JS는 이하 '라파엘'로 통칭하겠으며, 특별히 영문 풀네임을 써야 하는 경우에만 이용하겠습니다.

 

* 개인 계정에 소스를 포킹해서 올릴까 했지만, 트래픽 용량이 걱정되어 그만두었습니다. 원 사이트와 양식이 다를테니, 원 사이트를 참조하시며 보는 것을 추천합니다.

 

* 이전 글 리스트

 

2012/08/06 - [My study/Web] - [Raphael JS] Raphael JS 번역 1 - 메인 페이지

 

Animation

 

Animation.delay(delay)

 기존에 생성된 애니메이션 객체에 다른 지연시간(delay)을 주어 생성한다.

 

인자

 

 

인자명	자료형	설명
delay	number	애니메이션의 시작으로부터 실제 애니메이션이 시작되기까지의 지연시간 설정. 단위는 ms(mili  second, 1/1000 초)로 설정한다.

 

반환형

 

 

반환형	설명
object	새로 생성된 애니메이션 객체를 반환한다.

 

예제 소스

 

var anim = Raphael.animation({cx: 10, cy: 20}, 2e3); circle1.animate(anim); // 애니메이션이 즉각 실행되도록 설정한다 circle2.animate(anim.delay(500)); // 애니메이션이 500ms 이후에 실행되도록 설정한다

 

Animation.repeat(repeat)

 

  기존에 생성된 애니메이션 객체에 반복 회수를 주어 생성한다.

 

인자

인자명	자료형	설명
repeat	number	애니메이션이 반복될 횟수를 지정한다. 무한 반복되게 설정하려는 경우 인자에 Infinity를 패스하도록 한다.

 

반환형

 

반환형	설명
object	새로 생성된 애니메이션 객체를 반환한다.

 

Element

Element.animate(...)

인자(속성)에 맞는 애니메이션을 생성하고, 시작하게 한다.

 

인자

 

인자명	자료형	설명
params	objects	넘어오는 Element(가 object로 넘어온다는 뜻)의 마지막 속성을 가져온다. Element.attr 참조
ms	number	애니메이션의 재생 시간 (단위: ms)
easing	string	완화되는 방식을 선택한다. Raphael.easing_formula 의 멤버 중 하나나, CSS 포맷인 cubic-bezier(xx, xx, xx, xx) 방식을 사용할 수 있다.
callback	function	애니메이션이 끝날 때 호출될 콜백 함수를 지정한다.
혹은
animation	object	애니메이션(Raphael.animation) 객체

 

반환형

 

반환형	설명
object	생성된 객체

 

Element.animateWith(...)

Element.animate 랑 비슷하게 작동하지만, 지정된 애니메이션들이 동시에 시작하는 것을 보장한다.

 

인자

인자명	자료형	설명
el	objects	동기화할 원소
anim	objects	동기화할 애니메이션
params	objects	넘어오는 Element(가 object로 넘어온다는 뜻)의 마지막 속성을 가져온다. Element.attr 참조
ms	number	애니메이션의 재생 시간 (단위: ms)
easing	string	완화되는 방식을 선택한다. Raphael.easing_formula 의 멤버 중 하나나, CSS 포맷인 cubic-bezier(xx, xx, xx, xx) 방식을 사용할 수 있다.
callback	function	애니메이션이 끝날 때 호출될 콜백 함수를 지정한다.
혹은
element	objects	동기화할 원소
anim	objects	동기화할 애니메이션
animation	object	애니메이션(Raphael.animation) 객체

반환형

반환형	설명
object	생성된 객체

 

Element.attr(...)

원소의 속성을 설정한다

 

인자명	자료형	설명
attrName	string	속성명
value	string	속성값
혹은
params	object	속성값을 K-V(key-value)형태로 객체로 전달. (attrName, value)
혹은
attrname	array	속성명
혹은
attrNames	array	속성명들, 이 경우에는 주어진 이름들에 대한 속성값들을 반환한다

 

반환형

반환형	설명
object	속성명과 속성값이 전달된 원소를 반환

 

반환형	설명
...	속성명(attrName)만 인자로 넘겼을 경우, 그 속성명(attrName)에 해당되는 속성값만 반환

 

반환형	설명
array	attrnames로 속성명들을 여러개 넘겼을 때, 그 속성명들에 대한 값을 반환

 

반환형	설명
object	아무 인자도 넣지 않았을 때, 속성 객체를 반환

 

가능한 인자들

* SVG 명세서를 참고하면 해당 인자들을 좀 더 쉽게 이해할 수 있다(http://www.w3.org/TR/SVG/styling.html)

 

 

인자명	자료형	설명
arrow-end	string	path의 마지막에 화살표 머리를 든다. 다음과 같은 형식으로 설정한다.  <타입>[ -<두께>[-<길이>]]] 타입: classic, block, open, oval, diamond, none 두께: wide, narrow, midium 길이: long, short, midium
clip-rect	string	콤마(,) 나 스페이스로 분류된다. x,y,가로,세로 와 같은 방식으로 정의.
cursor	string	css 의 커서 타입
cx	number	원이나 타원의 x축 중심 좌표
cy	number	원이나 타원의 y축 중심 좌표
fill	string	색이나, 그라디언트나 이미지
fill-opacity	number	fill의 농도
font	string
font-family	string
font-size	number	글씨 크기(단위: 픽셀)
font-weight	string
height	number
href	string	어떤 원소를 하이퍼링크처럼 쓰고 싶을 때, URL을 입력
opacity	number
path	string	SVG path 스트링 포맷
r	number	원, 타원, 가장자리가 둥그런 렉트의 반지름
rx	number	타원의 수평 반지름
ry	number	타원의 수직 반지름
src	string	Element.image 원소에서만 작동하는 이미지 주소
stroke	string	스트로크 색상
stroke-dasharray	string	[“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap	string	[“butt”, “square”, “round”]
stroke-linejoin	string	[“bevel”, “round”, “miter”]
stroke-miterlimit	number
stroke-opacity	number
stroke-width	number	스트로크의 두께(단위: 픽셀), 기본값은 1
target	string	href를 이용할 경우 사용
text	string	text원소의 내용. \n 을 멀티라인을 구현할 때 쓸 수 있다.
text-anchor	string	[“start”, “middle”, “end”], 기본값은 “middle”
title	string	툴팁에 표시될 제목
transform	string	Element.transform 참조
width	number
x	number
y	number

 

그라디언트

 

선형 그라디언트 표현 형식: "<각도> - <색깔>[-<색깔>[:<비율>]]*-<색깔>"

예시) (90도 각도로 흰색에서 검은색으로 바뀌는 그라디언트) "90-#fff-#000"

         (0도 각도로 흰색에서 20%지점까지 빨간색이 되다가 검은색으로 바뀌는 그라디언트) "0-#fff-#f00:20-#000"

 

광선(각도)형 그라디언트 표현 형식: "반지름[(<x가중치>, <y가중치>)]<색깔>[-<색깔>[:<비율>]]*-<색깔>"

예시) (흰색에서 검정색으로 0.25, 0.75 지점에서 바뀌는 그라디언트) "r[0.25, 0.75]#fff-#000"
* x가중치와 y가중치는 0과 1 사이이며, 원 혹은 타원에만 적용 가능

 

경로 문자열

 

http://www.w3.org/TR/SVG/paths.html#PathData 를 참고. 모두 지원함.

 

색 파싱 방법

 

색 명칭 (“red”, “green”, “cornflowerblue”, 등)

#••• — 짧은 HTML 색상 표시: (“#000”, “#fc0”, 등)

#•••••• — 긴 HTML 색상 표시: (“#000000”, “#bd2300”)

rgb(•••, •••, •••) — rgb 채널값: (“rgb(200, 100, 0)”)

rgb(•••%, •••%, •••%) — rgb 채널값을 비율로 표기: (“rgb(100%, 175%, 0%)”)

rgba(•••, •••, •••, •••) — rgba 채널값: (“rgba(200, 100, 0, .5)”)

rgba(•••%, •••%, •••%, •••%) — rgba 채널값을 비율로 표시: (“rgba(100%, 175%, 0%, 50%)”)

hsb(•••, •••, •••) — hsb(hue, saturation, brightness)값 : (“hsb(0.5, 0.25, 1)”)

hsb(•••%, •••%, •••%) — hsb값을 비율로 표기

hsba(•••, •••, •••, •••) — hsba 값

hsl(•••, •••, •••) — hsb값과 거의 유사하다, 참조 Wikipedia page

hsl(•••%, •••%, •••%) — hsl값을 비율로

hsla(•••, •••, •••, •••) — hsla값

hsb와 hsl은 선택적으로 hue를 도(degree) 형식으로 표기할 수 있다.: “hsl(240deg, 1, .5)” 만약 당신이 간지나게 표기하고 싶다면: “hsl(240°, 1, .5)”

 

Element.click(handler)

해당 원소의 클릭 이벤트 리스너를 설정

 

인자

인자명	자료형	설명
handler	function	click 이벤트 핸들러

반환형

반환형	설명
object	해당 원소 반환

 

Element.clone()

해당 원소를 복제

 

반환형

반환형	설명
object	해당 원소를 복제한 원소

 

Element.data(key, [value])

 

새로운 데이터를 추가하거나, 이름만 주어질 경우 해당 키에 맞는 값을 반환. Element.removeData 참조

인자

인자명	자료형	설명
key	string	저장하려는 데이터의 값
value	any	저장하려는 값

 

반환형

반환형	설명
object	해당 원소 반환

 

반환형[만약 key 값만 넣었다면]

반환형	설명
any	key에 해당하는 값

 

사용 예

 

for (var i = 0, i < 5, i++) {     paper.circle(10 + 15 * i, 10, 10)          .attr({fill: "#000"})          .data("i", i)          .click(function () {             alert(this.data("i"));          }); }

 

Element.dblclick(handler)

해당 원소의 더블 클릭 이벤트 리스너를 설정

인자

인자명	자료형	설명
handler	function	더블 클릭 이벤트 핸들러

반환형

반환형	설명
object	해당 원소 반환

 

-------------

 

두시간 반을 했는데 겨우 이만큼밖에 못했네요 ㅠㅠ 번역보다 표그리는게 더 일이군요~