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

study/web 2012. 8. 8. 01:47

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

    		 해당 원소 반환

     

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

     

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

    저작자표시 비영리 동일조건

    'study > web' 카테고리의 다른 글

    동일한 name을 가진 radio button (input type='radio')에서 checked를 얻어오고 싶을 때  (0) 2013.10.21
    [Raphael JS] Raphael JS 번역 1 - 메인 페이지  (1) 2012.08.06
    Posted by TY
    ,

    [Raphael JS] Raphael JS 번역 1 - 메인 페이지

    study/web 2012. 8. 6. 23:39

    * 해당 글은 raphaeljs.com 의 글을 번역한 것이며, 어떠한 수익, 영리적 목적 없이 그냥 개인 공부용으로 번역함을 알립니다. 저도 허락받고 쓰는 글이 아니라서 퍼가시거나 그런건 좀 찝찝합니다 -.-;

     

     번역을 오랜만에 하는거고, 또 인터넷에 글을 올리는게 거의 없던 일이라 잘 써질지 모르겠습니다.

    라파엘의 공식 홈페이지는 http://raphaeljs.com/ 이곳이며, 현재는 이 곳의 메인페이지를 번역합니다.

     

     Raphael JS는 이하 '라파엘'로 통칭하겠으며, 특별히 영문 풀네임을 써야 하는 경우에만 이용하겠습니다.

     

    1. 메인페이지

     

    -     이게 뭐지?

      라파엘은 웹에서 벡터 그래픽 작업을 할 때, 일을 더 쉽게 해결해줄 수 있게 만들어주는 가벼운 자바스크립트 라이브러리이다. 예를 들어 당신만의 고유한 차트나, 이미지를 자르거나 돌리는 위젯을 만들 때 라파엘을 이용하면 좀 더 쉽고 간단하게 할 수 있을 것이다.

     라파엘은 이미지 생성에 SVG(W3C 권고안) 과 VML을 기본적으로 사용한다. 즉, 당신이 생성한 모든 그래픽 객체는 DOM 객체로 만들어지며, JS의 이벤트 핸들러를 추가하거나 수정할 수 있다는 이야기다. 라파엘의 목적은 만들어진 벡터와 그림들해서 쉽고, 크로스 브라우징을 지원하게 하는 것이다.

     라파엘은 현재 Firefox 3.0 이상, Safari 3.0이상, Chrome 5.0이상, Opera 9.5이상, IE 6.0이상을 지원하고 있다.

     

     *역자 주: SVG는 HTML5를 지원하는 대부분의 브라우저는 지원을 합니다. 그러나 그렇지 않은 브라우저들, 국내에서는 점유율이 높은 IE7과 8을 생각할 수 있는데요. IE7과 8은 VML을 지원하므로 크로스 브라우징이 원활히 지원됨을 이야기하는 것 같습니다.

     

    - 어떻게 쓰는거야?

     raphael.js를 다운받아서 네 페이지에 넣어, 그리고 이렇게 쉽게 쓸 수 있지.

     

     // Creates canvas 320 × 200 at 10, 50
    var paper = Raphael(10, 50, 320, 200);

    // Creates circle at x = 50, y = 40, with radius 10
    var circle = paper.circle(50, 40, 10);
    // Sets the fill attribute of the circle to red (#f00)
    circle.attr("fill", "#f00");

    // Sets the stroke attribute of the circle to white
    circle.attr("stroke", "#fff");

     

    - 데모들

     

    은.. 다 그림이라 페이지가서 직접 확인하시길 :)

     

    http://raphaeljs.com/

     

    저작자표시 비영리 동일조건

    'study > web' 카테고리의 다른 글

    동일한 name을 가진 radio button (input type='radio')에서 checked를 얻어오고 싶을 때  (0) 2013.10.21
    [Raphael JS] Raphael JS 번역 2 - Documents #1 (Animation ~ Element.dblclick 까지)  (0) 2012.08.08
    Posted by TY
    ,

    티스토리툴바