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

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