Raphaël JavaScript 라이브러리가있는 쉬운 벡터 그래픽

Raphaël은 Atlassian의 Dmitry Baranovskiy가 작성한 작은 JavaScript 라이브러리로 웹 페이지에서 벡터 그래픽을 만들고 조작 할 수 있습니다. 놀랍게도 사용하기 간단하며 크로스 브라우저 호환입니다. Internet Explorer 6.0, Safari 3.0, Firefox 3.0 및 Opera 9.5 지원. 내부적으로 Raphaël은 IE에서 VML을 사용하고 다른 브라우저에서는 SVG를 사용합니다. 이제 원과 사각형과 관련된 데모는 괜찮지 만 벡터 그래픽의 합법적이고 실용적인 사용을 보여주는 예를 만들고 싶었습니다. 그렇다면 실시간 통계 측정은 어떻습니까? 다음은 실시간 "스프로킷"사용 레벨을 표시하는 현재 스프로킷 사용 라인 그래프의 스크린 샷입니다. 무엇보다도, 그것은 만들기위한 스냅이었다.

HTML은 간단합니다. 캔버스를 고정하려면 제목과 컨테이너 만 있으면됩니다.

시작하려면 새로운 그래픽 캔버스를 생성해야합니다. 나는 항상 별도의 네임 스페이스를 만들기 위해 객체 정의 내에 모든 코드를 배치하고 싶습니다. 따라서 다음 코드로 시작합니다.

<.> Window.onload 이벤트 사용 SPGRAPH.INIT 메소드를 호출합니다. 이 방법 내에서 우리는 Raphael ( "그래프", 400, 200)을 사용하여 캔버스를 만듭니다. 첫 번째 인수는 컨테이너 요소의 ID이고 다른 두 개는 너비와 높이를 나타냅니다. 우리는 반환 된 캔버스 객체를 spgraph.graph 속성에 저장합니다. 다음 줄을 사용하면 사각형을 만들고 몇 가지 속성을 설정합니다.

rect 메소드를 사용하면 x 좌표, y 좌표, 너비, 높이 및 선택적으로 코너 반경을 지정하는 사각형을 그릴 수 있습니다. 우리는 또한 채우기 색상을 설정하기 위해 Att Method에 호출을 묶었습니다. 모든 Raphaël 그래픽 객체는 attr 메소드를 지원하며 설정할 수있는 다양한 속성이 있습니다. Raphaël은 모든 방법을 체인하는 것을 지원합니다.이 방법은 곧 이용할 것입니다. 지금까지 우리의 노력은 둥근 모서리가있는이 사랑스러운 검은 사각형을 초래했습니다.

이제 줄무늬를 추가하겠습니다! 이를 위해 SPGRAPH.INIT 메소드에 다음 루프를 추가합니다.

루프는 매번 라인을 10 번으로 그리며 실행합니다. 첫 번째는 빨간색 선과 다른 사람을위한 회색 선. Raphaël Path 메소드는 도면의 경로 모드를 초기화하여 경로 객체를 반환합니다. 실제로는 아무것도 그 자체로 그려지지 않습니다. 연쇄 가능한 경로 개체 방법을 사용해야합니다. Moveto 메소드는 도면 커서를 지정된 x 및 y 좌표로 이동시키고 Lineto 메소드는 커서 지점에서 지정된 지점으로 선을 그립니다. 결과는 아래의 줄무늬 배경입니다 이제 실제 그래프 라인을 그려야합니다. 세로 축 (줄무늬로 표시)은 사용 수준 백분율입니다. 수평 축은 10 픽셀 단위의 시간을 나타냅니다. 실제 세계에서 그래프의 각 업데이트는 Ajax 호출을 통해 5 초마다 얻을 수 있지만 여기서는 임의의 값을 생성하고 매 초마다 그래프를 업데이트합니다. 다시 한번, 우리는 경로 방법을 사용하여 5 픽셀 와이드 라인을 그립니다.

우리는 경로를 초기화하고 spgraph.path 속성에 참조를 저장합니다.

모든 업데이트마다 Lineto 메소드를 사용하여 라인을 확장합니다.

데모에서 작동하는 것을 잊지 마십시오. 자, 스프로킷 사용 그래프가 제가 약속 한 합법적이고 실용적인 예는 아니지만 적어도 약간의 노력으로 Raphaël로 달성 할 수있는 것을 살펴 보았습니다. 사이트의 문서는 완성되지 않았지만 어쨌든 운동하기는 어렵지 않습니다. 왜 직접 가지 않습니까? 웹의 빠르고 간단한 크로스 브라우저 호환성 벡터 그래픽은 결코 쉬운 일이 아닙니다. Raphael JavaScript 라이브러리를 사용한 Easy Vector Graphics에 대한 자주 묻는 질문

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

Raphael JavaScript 라이브러리 란 무엇입니까?

Raphael JavaScript 라이브러리는 개발자가 웹에서 벡터 그래픽으로 작업 할 수있는 강력한 도구입니다. 벡터 그래픽 생성, 조작 및 애니메이션 프로세스를 단순화하여 웹 사이트 나 웹 애플리케이션에 시각적으로 매력적인 요소를 추가하려는 개발자에게는 훌륭한 선택입니다. 라이브러리는 크로스 브라우저 호환이며 SVG W3C 권장 사항과 VML을 그래픽 생성 기반으로 사용합니다. 이는 사실상 모든 브라우저에서 작동 할 수 있음을 의미합니다.

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

Raphael JavaScript 라이브러리로 시작하는 방법

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

Raphael JavaScript 라이브러리를 시작하려면 먼저 귀하의 도서관을 포함시켜야합니다. 공식 웹 사이트에서 라이브러리를 다운로드하여 HTML 파일에 연결하여이를 수행 할 수 있습니다. 라이브러리가 포함되면 Raphael 함수를 호출하고 그래픽이 그려지는 용지 객체의 너비와 높이를 지정하여 벡터 그래픽을 만들 수 있습니다.

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

Raphael JavaScript 라이브러리로 벡터 그래픽을 애니메이션 할 수 있습니까? 라이브러리는 애니메이션 방법을 포함하여 애니메이션을위한 몇 가지 방법을 제공하여 지정된 기간 동안 물체의 변환을 애니메이션 할 수 있습니다. 애니메이션 완화를 제어하고 애니메이션이 완료 될 때 실행될 콜백 함수를 지정할 수도 있습니다. Raphael JavaScript 라이브러리로 모양을 만드는 방법

Raphael JavaScript 라이브러리는 모양을 만들기위한 몇 가지 방법을 제공합니다. 예를 들어, rect 메소드를 사용하여 사각형, 원을 만들기위한 원 메소드 및 타원을 만들기위한 타원 메소드를 만들 수 있습니다. 각 방법에는 왼쪽 상단 코너의 좌표 및 직장 방법의 너비 및 높이 또는 원 메소드의 중앙 좌표 및 반경과 같은 특정 매개 변수가 필요합니다.

라파엘 자바 스크립트 라이브러리에 스타일을 쉐이프에 적용 할 수 있습니까? 이 방법을 사용하면 채우기 색상, 스트로크 색상, 스트로크 너비 및 불투명도와 같은 다양한 모양 속성을 설정할 수 있습니다. Att Method를 사용하여 스케일링, 회전 및 번역과 같은 형태로 변환을 적용 할 수 있습니다.

Raphael JavaScript 라이브러리의 모양과 상호 작용할 수 있습니까?

예, Raphael JavaScript 라이브러리는 모양과 상호 작용하기위한 몇 가지 방법을 제공합니다. 예를 들어, 클릭 메소드를 사용하여 클릭 이벤트 핸들러를 모양에 첨부하거나 마우스 오버 및 마우스 아웃 이벤트 처리기를 첨부 할 수 있습니다. 이러한 방법을 사용하면 사용자 작업에 응답하는 대화식 그래픽을 만들 수 있습니다.

Raphael JavaScript 라이브러리에서 모양을 어떻게 그룹화하려면? 세트 메소드를 사용하여 Raphael JavaScript 라이브러리에서 모양을 그룹화 할 수 있습니다. 이 방법은 단일 장치로 조작 할 수있는 모양 세트를 만듭니다. 푸시 메소드를 사용하여 세트에 모양을 추가하고 한 번에 세트의 모든 모양에 변환 또는 애니메이션을 적용 할 수 있습니다.

Raphael JavaScript 라이브러리를 사용하여 복잡한 그래픽을 만들 수 있습니까?

예, Raphael JavaScript 라이브러리는 복잡한 그래픽을 만들 수 있습니다. 기본 모양 외에도 라이브러리는 복잡한 모양과 디자인을 만드는 데 사용할 수있는 경로를 만드는 방법을 제공합니다. 복잡한 그래픽을 만들기 위해 여러 가지 모양과 경로를 결합 할 수 있습니다.

Raphael JavaScript 라이브러리로 생성 된 그래픽을 어떻게 내보내려면?

Raphael JavaScript 라이브러리로 생성 된 그래픽은 브라우저에서 렌더링되며 브라우저에서 SVG 또는 VML로 내보낼 수 있습니다. 용지 객체에서 tostring 메소드를 호출하여 그래픽의 SVG 또는 VML 소스 코드에 액세스 할 수 있습니다. 이 메소드는 논문의 현재 상태를 나타내는 SVG 또는 VML 코드의 문자열을 반환합니다.

Raphael JavaScript 라이브러리에서 더 많은 리소스를 찾을 수있는 곳은 어디입니까?

Raphael JavaScript 라이브러리에서 더 많은 리소스를 보려면 라이브러리의 포괄적 인 문서를 제공하는 공식 웹 사이트를 방문 할 수 있습니다. 라이브러리 사용 방법에 대한 단계별 가이드를 제공하는 다양한 온라인 자습서 및 블로그 게시물을 확인할 수도 있습니다. 또한 Github 및 Codepen과 같은 코드 공유 플랫폼에서 수많은 예와 데모를 찾을 수 있습니다.

위 내용은 Raphaël JavaScript 라이브러리가있는 쉬운 벡터 그래픽의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!