Raphaíl.js 소개

James Williams
James Williams
X 홈페이지

소개

SVG(Scalable Vector Graphics의 약어)는 객체와 장면을 설명하는 XML 기반 언어입니다. SVG 요소는 이벤트를 실행할 수 있으며 JavaScript로 스크립트할 수 있습니다. SVG는 원, 직사각형과 같은 여러 기본 유형을 기본 제공하며 텍스트를 표시할 수도 있습니다. SVG는 새로운 기술이 아니지만 이제 HTML5를 사용하면 <object> 또는 <embed> 태그를 사용하지 않고도 SVG 객체를 페이지에 직접 삽입할 수 있으므로 현재 캔버스에서 사용할 수 있는 것과 일치합니다. Raphaël.js는 SVG 장면을 프로그래매틱 방식으로 만들 수 있는 JavaScript 라이브러리입니다. 통합 API를 사용하여 SVG가 지원되는 경우 SVG 장면을 만들고, 지원되지 않는 경우 VML(벡터 모델링 언어)을 만듭니다. 즉, IE9 이전의 Internet Explorer 버전에서는 VML을 사용합니다.

첫 번째 장면 그리기

먼저 Raphaël로 간단한 장면을 그려 보겠습니다. Raphaël 객체를 인스턴스화하여 장면을 그리기 시작합니다. 이 경우 지정된 너비와 높이로 지정된 HTML 요소에 삽입하는 생성자를 사용했지만 Raphaël이 객체를 DOM(Document Object Model)에 추가하도록 할 수도 있습니다. 그런 다음 원하는 x 및 y 위치에 너비와 높이를 제공하여 직사각형을 만들었습니다. 다음으로 원하는 좌표와 반지름을 지정하여 원을 만들었습니다. 마지막으로 속성 함수(attr)를 사용하여 객체에 색상을 할당했습니다.

각 SVG 객체에는 색상, 회전, 획 색상, 크기 등의 속성이 할당될 수 있습니다. 할당 가능한 속성의 자세한 목록은 여기를 참고하세요.

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

경로를 사용하여 고급 도형 그리기

경로는 렌더러가 객체를 만드는 데 사용하는 일련의 명령입니다. 경로로 그리기는 거대한 그래프 용지에 펜으로 그리는 것과 같습니다. 펜을 종이에서 들어 다른 위치로 이동(move to)하거나, 선을 그리도록(line to) 또는 곡선을 그리도록(arc to) 지시할 수 있습니다. 경로를 사용하면 SVG가 크기와 관계없이 동일한 수준의 세부정보로 객체를 만들 수 있습니다. 곡선을 그리라는 명령을 내리면 SVG는 곡선의 원래 크기와 원하는 최종 크기 (크기 조정 후)를 고려하여 중간 지점을 수학적으로 계산하여 부드러운 곡선을 렌더링합니다.

아래의 코드와 그림은 경로로 그려진 직사각형과 폐곡선을 보여줍니다. M 문자 뒤에 좌표가 오는 경우 펜을 해당 위치로 이동하고, L 문자 뒤에 좌표 쌍이 오는 경우 현재 위치에서 해당 위치로 선을 그립니다. s는 주어진 제어점과 상대 좌표의 끝점으로 부드러운 베지어 곡선을 그립니다. Z는 경로를 닫습니다. 일반적으로 대문자를 사용하면 절대 좌표로 명령어가 실행되고 소문자를 사용하면 상대 좌표가 사용됩니다. M/m과 Z/z는 각각 대문자 또는 소문자에 대해 동일한 명령어를 실행합니다. 여기에서 모든 경로 안내 목록을 확인할 수 있습니다.

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

텍스트 그리기

텍스트를 그릴 수 없는 그림은 정말 지루할 것입니다. 다행히도 Raphaël은 텍스트를 그리는 두 가지 메서드를 제공합니다. 첫 번째 메서드인 text는 그리려는 문자열과 함께 x 및 y 좌표를 사용합니다. 텍스트 메서드를 사용하면 글꼴이나 기타 효과를 제어할 수 없습니다. 기본 글꼴로 기본 크기로 그립니다.

두 번째 메서드인 print는 텍스트를 경로 모음으로 그립니다. 따라서 개별 문자를 수정할 수 있습니다. 아래 예에서는 숫자 5를 주황색 채우기로, 'ROCKS'를 파란색 채우기로 색칠하고 획을 더 두껍게 만들어 굵은 텍스트를 시뮬레이션했습니다. 글꼴 크기가 40pt인 맞춤 글꼴을 사용하여 이 작업을 실행했습니다.

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

Vegur 글꼴은 Raphaël에 없으며, 그 어떤 글꼴도 없습니다. 또한 대부분의 글꼴은 TrueType(TTF) 또는 OpenType(OTF) 형식을 사용합니다. 이러한 형식을 Raphaël에서 사용할 수 있는 형식으로 변환하려면 Cufon이라는 도구를 사용하여 변환해야 합니다. Cufon을 사용하면 Raphaël과 함께 사용할 수 있도록 특정 글꼴의 다양한 글꼴 스타일 (일반, 굵게, 기울임꼴, 굵은 기울임꼴 등)을 내보낼 수 있습니다. Cufon에 관해서는 이 튜토리얼에서 자세히 다루지 않습니다. 자세한 내용은 위에 언급된 링크를 확인하세요. 애플리케이션에 사용할 수 있는 부담 없는 글꼴의 훌륭한 소스는 Google Font Directory입니다.

이벤트

SVG 요소는 click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, hover와 같은 모든 기존 마우스 기반 이벤트를 직접 구독할 수 있습니다. Raphaël은 캔버스 또는 개별 요소에 자체 메서드를 추가하는 기능을 제공하므로 이론적으로 모바일 브라우저용 동작을 추가하는 데 방해가 되는 요소는 없습니다.

아래 스니펫은 'ROCKS'에서 특정 문자를 클릭할 때 45도 회전하도록 함수를 바인딩합니다.

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG와 캔버스 비교

둘 다 화면에 객체를 그리는 메서드이므로 둘 중 하나를 다른 하나보다 사용해야 하는 이유가 즉시 명확하지 않은 경우가 많습니다. 두 매체는 접근 방식이 매우 다릅니다. 캔버스는 크레용으로 그림을 그리는 것과 매우 유사한 즉시 모드 API입니다. 그리기의 일부를 지우거나 삭제할 수는 있지만 기본적으로 이전 획을 되돌리거나 변경할 수는 없습니다. 캔버스도 래스터 비트맵이므로 이미지 크기를 조절할 때 픽셀화가 발생할 가능성이 매우 높습니다. 반면 SVG는 앞서 언급한 대로 동일한 수준의 세부정보로 여러 해상도를 제공할 수 있으며 스크립트로 작성할 수 있습니다.

게임 프로그래밍에 SVG를 사용할지 아니면 Canvas를 사용할지는 매우 간단합니다. 데스크톱 또는 모바일에 배포할지 여부에 대한 일반적인 제약사항 외에도 스프라이트 수에 따라 달라집니다. SVG는 저화질 게임에 적합합니다. 이러한 게임은 객체의 동시 이동과 스프라이트 삭제 및 생성이 제한된 게임이라고 설명합니다. 체스, 체커, 배틀쉽과 같은 많은 보드게임과 블랙잭, 포커, 하트와 같은 카드 게임이 이 카테고리에 속합니다. 또 다른 공통점은 이러한 게임의 대부분에서 플레이어가 임의의 객체를 이동해야 하며 SVG의 스크립트 기능을 사용하면 객체 선택이 쉽다는 것입니다.

SVG용 작성 도구

SVG를 사용한다고 해서 경로를 직접 만들어야 하는 것은 아닙니다. SVG로 내보낼 수 있는 오픈소스 및 상용 도구가 여러 가지 있습니다. 제가 광범위하게 사용하고 적극 권장하는 두 가지 도구는 Inkscape와 svg-edit입니다.

svg-edit

svg-edit는 JavaScript로 작성된 브라우저 기반 SVG 편집기입니다. GIMP 또는 MS Paint를 연상시키는 제한된 사용자 인터페이스를 제공합니다. 세부 수준이 상대적으로 낮지 않은 한 대부분 svg-edit를 사용하여 SVG 그림을 만들기보다는 조정했습니다. svg-edit를 사용하면 그래픽으로 또는 SVG 코드로 객체를 만들 수 있습니다.

Inkscape

Inkscape는 CorelDraw, Adobe Illustrator, Xara와 유사한 교차 플랫폼의 본격적인 벡터 그래픽 편집기입니다. Inkscape는 활기찬 플러그인 커뮤니티와 성숙한 코드베이스의 이점을 누립니다. Inkscape의 전신은 1999년에 개발되었습니다. Inkscape는 벡터 기반 및 비트맵 애셋을 사용할 때 주로 사용하는 애플리케이션입니다.

부수적인 내용

IE9 이전 버전의 Internet Explorer에서는 Windows에서 SVG가 지원되지 않습니다. IE는 SVG와 거의 동일한 기능을 제공하는 VML(벡터 마크업 언어)이라는 벡터 그래픽 형식을 사용합니다. Raphaël은 지원되는 경우 SVG 또는 VML을 사용하는 장면을 만들 수 있습니다. Raphaël을 사용하면 교차 플랫폼 지원을 쉽게 제공할 수 있습니다.

참조