웹 개발자 툴 박스: Raphaël ★ Mozilla 웹 기술 블로그

이 글은 모든 웹 개발자들이 자신의 툴 박스에 가지고 있어야 할 유용한 라이브러리들을 위한 첫 번째 글입니다. 이 글을 통하여 이러한 라이브러리들이 무엇을 할 수 있고 여러분이 어떻게 사용하는지 이해하였으면 합니다. 첫 번째 글을 통하여 Raphaël 라이브러리에 대하여 알아보겠습니다.

소개

Raphaël은 본래 Dmitry Baranovskiy가 만들었고 지금은 Sencha Labs의 일부인 라이브러리 입니다.

이 라이브러리의 목표는 웹에서 벡터 그래픽스 작업을 단순화시키는 데 있습니다. Raphaël은 SVG W3C 권고안에 기반을 두고 구 버젼의 Internet Explorer를 지원하기 위하여 Micrsoft VML language를 대비책으로 가지고 있습니다. 또한, SVG 애니메이션 처리와 같은 SVG 구현체에서의 몇 가지 이슈들에 대하여도 대응하고 있는 결과 Raphaël은 일관되고 뛰어난 그래픽을 모든 웹에 제공하는 래퍼(wrapper) 역할을 하고 있습니다.

기본 사용법

Raphaël은 많은 예제를 포함한 훌륭한 가이드 문서를 제공한다. 이 가이드 문서를 널리 사용하도록 합시다.
아래의 예제에서 우리는 id가 “myPaper”인 HTML 엘리먼트 안에 빨간 원을 그려보도록 하겠습니다.

// 아래의 예제에서 우리는 드로잉 영역을 만듭니다.
// 폭은 100px, 높이는 100px으로 잡습니다.
// 이 드로잉 영역은 id가 myPaper인 엘리먼트의 상단 좌측 코너
// (또는 dir="rtl"인 엘리먼트의 상단 오른쪽 코너)에 만들어 집니다.
var paper = Raphael("myPaper", 100, 100); 

// 원의 반지름이 40이고
// 좌표 50,50에 위치할 것입니다.
var c = paper.circle(50, 50, 40); 

// 원은 빨간색으로 칠해지게 됩니다.
// 각 앨리먼트의 속성들의 이름이 
// the SVG 권고안을 따르는 점을 눈 여겨 볼 수 있습니다.
c.attr({
    fill: "#900"
});

고급 사용법

Raphaël이 SVG로부터 제공되는 많은 가능성을 낮춤에도 불구하고(대부분 VML 지원으로 인하여) 매우 뛰어난 기능들을 제공한다.

뛰어난 메트리스 변환
뛰어난 이벤트 처리
Cross browser 애니메이션
간편한 드래그 시스템
선 교차점 감지

Raphaël은 또한 확장 시스템을 통하여 확장이 가능하며 사용자 정의 함수를 만들 수 있게 합니다.
여기에 파이 차트를 그리는 확장 예제가 있습니다.

/**
 * 파이 Method
 *
 * cx: 파이의 회전 중앙 x 좌표
 * cy: 파이의 회전 중앙 y 좌표
 * r : 파이의 반지름
 * a1: 파이가 그려지기 시작되는 지점에서 각도
 * a2: 파이가 그려지기 끝나는 지점의 각도
 */
Raphael.fn.pie = function (cx, cy, r, a1, a2) {
    var d,
        flag = (a2 - a1) > 180; 
 
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180; 
 
    d = [
        // 파이의 회전 중심축 세팅
        "M", cx, cy,
 
        // 커브의 시작 지점으로 이동
        "l", r * Math.cos(a1), r * Math.sin(a1),
 
        // 커브를 끝 지점까지 그림
        "A", r, r, "0", +flag, "1",
        cx + r * Math.cos(a2), cy + r * Math.sin(a2),
 
        // 선을 닫음
        "z"
    ]; 
 
    return this.path(d.join(' '));
};

주의 : 위의 예제에서는 SVG Path 문법에 익숙해져야 하지만 SVP Path 문법은 다른 Raphaël에서는 재 사용 가능합니다. (Raphaël이 내부적으로 VML 문법으로 변환함) 위한번 위의 확장 함수가 컬러 휠을 jsFiddle에서 어떻게 그리는지 봐보세요.

한계점과 주의할 점

만약 여러분이 SVG에 익숙하지 않고 구 MS Internet Explorer 브라우져들의 지원을 원한다면 이 툴은 여러분들을 위해 만들어 졌습니다. 하지만 Raphaël은 자바스크립트 라이브러리 입니다. 이는 즉 여러분들이 자바스크립트를 어떻게 사용하는지 반드시 알아야 됩니다. SVG를 사용하고 Raphaël에게 이를 분석하고 해석해달라고 할 수 없습니다. 이를 위한 별도의 라이브러리들이 존재하기는 합니다.

브라우저 지원에 관하여서는 Raphaël은 튼튼한 기반이 될 것입니다. Raphaël은 현재 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ 그리고 Internet Explorer 6.0+를 지원합니다.

사실, Raphaël를 이용할 수 없는 브라우저는 Android 1.x 와 2.x의 네이티브 브라우져 입니다. 이는 이들 브라우저가 어떠한 벡터 언어를 지원하지 않기 때문입니다. Android는 부분적으로 Android 3.0에서 SVG를 지원합니다. 만약 모든 모바일 디바이스에서 Raphaël를 사용하고 싶으시면 주의하시길 바랍니다.

결론

Raphaël은 SVG로 개발하기 험난한 세상에 있는 웹 디자이너와 웹 개발자들에게 SVG를 쉽게 사용할 수 있게 해주는 최초의 라이브러리였습니다. 만약 SVG DOM API를 전적으로 사용할 필요가 없고 구 브라우저를 반드시 지원해야 하는 상황에서 이 라이브러리는 멋진 애플리케이션을 구현할 때 큼 힘이 되어 줄 것입니다.

마지막으로 Raphaël을 사용한 멋진 사례들을 확인해 보세요.

원저자: Jeremie Patonnier – 원문으로 가기

Jeado.Ko가 작성한 문서들…

Hacks-웹기술블로그

웹 개발자 툴 박스: Raphaël

작성자: Jeado.Ko

소개

기본 사용법

고급 사용법

한계점과 주의할 점

결론

작성자: Jeado.Ko

댓글이 없습니다.

댓글 쓰기