라파엘(Raphaël) 자바스크립트 라이브러리(JAVASCRIPT LIBRARY) 소개 및 파일

 

raphael.js

0.15MB

raphael-min.js

0.06MB

웹에서 가장 많이 사용되는 코딩 언어는 자바 스크립트입니다. 

 

HTML5가 등장한 이래로 이제 공식적으로 기본 표준으로 채택되었습니다. 

 

자바 스크립트는 더 작은 클라이언트 측 브라우저 기반 언어를 넘어서 프론트 엔드 디자인뿐만 아니라 백엔드 서버 측 개발에도 통합되었습니다. 

 

그 결과 인기있는 JQuery 라이브러리에서 React.js, Angular 및 VUE.js에 이르기까지 Javascript 라이브러리가 엄청나게 성장했습니다.

 

페이지를 개발하는 데 사용할 라이브러리 또는 프레임 워크를 결정하는 것이 다소 압도적으로 보일 수 있지만 여러 언어의 장단점을 이해하면 결정이 훨씬 덜 복잡해집니다. 단일 라이브러리를 고수 할 이유가 없으며 프레임 워크마다 용도가 다릅니다. 이것은 Raphael.js에서 다른 것들과 마찬가지로 절대적으로 사실입니다.

 

그러나 이에 대해 논의하기 전에 한 발 물러서 봅시다. Javascript가 계속해서 지배하는 주요 영역은 웹에서 가장 큰 성장 영역 중 하나 인 프런트 엔드 개발입니다. 이것은 몇 가지 명백한 이유에 대한 경우입니다. 

 

사람들이 보는 웹의 일부입니다 . 프론트 엔드 개발의 가장 큰 매력 중 하나는 아티스트 가 자신의 작품을 보여줄 수 있는 훌륭한 장소라는 점입니다 .

 

역사적으로 예술가들은 창조적 인 목적으로 조작 할 수있는 모든 매체로 작업하지만, 각 세대는 인기있는 새로운 매체를 찾습니다. 동굴 벽은 인간 발달의 초기 단계에서 대중적인 예술 매체 였기 때문에 표현 방식은 곧 돌로 조각품을 만드는쪽으로 옮겨졌습니다.

 

새로운 소재가 등장하면서 예술적 표현에도 사용되었습니다. 많은 문명 역사를 통틀어 캔버스와 유화로 환상적인 그림을 만들 수있었습니다. 

 

사실“캔버스”라는 단어는 이제 어떤 예술적 매체와도 동의어가되었습니다.

 

라파엘은 무엇입니까?

아티스트 Raffaello Sanzio da Urbino의 이름을 딴 Rapahel.js는 아티스트와 그래픽 디자이너를 위해 특별히 설계된 자바 스크립트 라이브러리입니다. 브라우저의 캔버스에 직접 이미지를 적용하는 데 사용할 수있는 브러시입니다.

Raphael.js를 사용하면 SVG (Scalable Vector Graphics)의 기능을 통해 웹 브라우저를 사용하여 상세한 드로잉을 만들 수 있습니다. CSS 페인트 키트에서 사용 가능한 안료와 결합하면 아름답고 전문적인 그래픽을 만들 수 있습니다. 업로드 된 이미지를 사용하지 않고도 화면에서 바로 확인할 수 있습니다. Javascript는 이미 웹의 공식 언어가되었으므로 거의 모든 브라우저에서 원활하게 작동하고 모든 웹 페이지에 빠르게로드되어야합니다.

확장 가능한 벡터 그래픽

SVG (Scalable Vector Graphics)를 살펴 보겠습니다. 그래픽 아티스트로서 이미 SVG에 익숙 할 것입니다. 그렇지 않다면 이것을 조금 분해합시다. 벡터 그래픽은 2 차원 또는 3 차원 공간에서 수학적 명령을 사용하여 디지털 이미지를 만드는 방법입니다. 고등학교 수학을 기억한다면 XY 축을 기억할 것입니다. X는 수평 좌표를, Y는 수직을 나타내는 2 차원 공간입니다. (3 차원의 경우 깊이에 Z를 추가하지만 여기서는 여기서 넘어갑니다.) Scalable Vector Graphics는 XML 형식을 사용하여이 시스템에서 그림을 설명하는 단순한 방법입니다. 다음은 원을 그리는 예입니다.

<svg width="80" height="80"> <circle cx="40" cy="40" r="30" stroke="#000" stroke-width="1" fill="#FFF" /> </svg>

원의 크기를 정의한 다음 XY 축을 크기의 절반으로 정의하고 "r"은 단순히 반지름을 지정합니다. 아주 간단 하죠?

 

/* * Raphael 1.5.2 - JavaScript Vector Library *

    * Copyright (c) 2010 Dmitry Baranovskiy (http://raphaeljs.com)

    * Licensed under the MIT (http://raphaeljs.com/license.html) license. */