* 해당 글은 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

    해당 원소 반환

     

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

     

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

    Posted by TY
    ,