강력한 가벼운 그래픽 라이브러리 인 GraphicsJS를 소개합니다
- 尊渡假赌尊渡假赌尊渡假赌원래의
- 2025-02-17 10:42:15264검색
<svg></svg> 키 포인트
이 라이브러리를 사용하면 애니메이션 모닥불, 회전 은하, 강우 및 플레이 가능한 15 퍼즐 게임을 포함한 그래픽과 애니메이션의 조합을 허용합니다. 또한 자세한 문서 및 포괄적 인 API 참조도 포함되어 있습니다.
-
왜 그래픽 를 선택 하는가 개발자가 SVG를 사용하는 데 도움이되는 많은 라이브러리가 있습니다 : raphaël, snap.svg 및 bonsaijs는 최고의 라이브러리를 몇 가지만 이름을 지정합니다. 이 라이브러리에는 각각의 장단점이 있지만,이를 철저히 비교하는 것은 다른 기사의 주제가 될 것입니다. 이 기사는 GraphicsJS에 관한 것이므로 그것이 무엇인지, 무엇이 있는지 설명하겠습니다. - 우선, GraphicsJS는 가볍고 매우 유연한 JavaScript API를 가지고 있습니다. 브라우저 별 HTML DOM 구현과는 별개의 가상 DAM뿐만 아니라 많은 풍부한 텍스트 기능을 구현합니다.
둘째, 지난 가을에 세계 최고의 대화식 데이터 시각화 소프트웨어 개발자 중 하나 인 AdeChart가 발표 한 새로운 오픈 소스 JavaScript 라이브러리입니다. AdeChart는 최소 3 년 동안 (모든 차트 7.0의 출시 이후) 독점 제품에서 차트를 렌더링하여 GraphicsJS를 완전히 전투 테스트했습니다. (면책 조항 : 나는 Anychart의 R & D의 책임자이자 GraphicsJS의 리드 개발자) 셋째, 셋째, 모든 chart의 JavaScript Drawing Library와 달리 GraphicsJS는 상업 및 비영리 프로젝트를 위해 무료로 제공됩니다. Apache 라이센스에 따라 Github에서 사용할 수 있습니다. 넷째, GraphicsJS는 크로스 브라우저 호환성을 가지고 있으며 Internet Explorer 6.0, Safari 3.0, Firefox 3.0 및 Opera 9.5를 지원합니다. 이전 IE 버전의 VML과 다른 모든 브라우저에서 SVG로 렌더링됩니다. 마지막으로 GraphicsJS를 사용하면 그래픽과 애니메이션을 완벽하게 결합 할 수 있습니다. 애니메이션 모닥불, 회전 은하, 강우, 절차 적으로 생성 된 잎, 플레이 가능한 15 퍼즐 게임 등을 포함한 메인 갤러리를 확인하십시오. GraphicsJS에는 자세한 문서와 포괄적 인 API 참조에 더 많은 예제가 포함되어 있습니다. 그래픽 js 기본 사항그래픽을 시작하려면 라이브러리를 참조하고 도면에 대한 블록 레벨 HTML 요소를 만들어야합니다. 그런 다음 스테이지를 만들고 사각형, 원 또는 기타 모양과 같은 무언가를 그려야합니다. 다음은 Codepen의 예입니다. 여기서 우리는 한 걸음 더 나아가서 죽음의 Hallows 기호를 그립니다. 우리의 첫 번째 걸작 채우기, 스트로크 및 패턴 채우기 채우기 설정과 스트로크 설정을 사용하여 모든 모양이나 경로를 채색 할 수 있습니다. 모든 것은 스트로크 (테두리)를 가지고 있지만 모양과 닫힌 경로 만 패딩이 있습니다. 충전 및 스트로크 설정은 매우 풍부하며 채우기 및 스트로크에 선형 또는 원형 구배를 사용할 수 있습니다. 또한 라인은 점선으로 표시되고 여러 타일 모드로 이미지가 채워질 수 있습니다. 그러나 이것은 거의 모든 라이브러리에서 찾을 수있는 모든 표준적인 것들입니다. GraphicsJS를 특별하게 만드는 것은 메쉬 및 패턴 채우기 기능으로, 사용 가능한 메쉬 채우기 패턴 32 (!)를 직접 사용할 수있을뿐만 아니라 모양이나 텍스트로 만든 사용자 정의 패턴을 쉽게 만들 수 있습니다. 이제 정확히 무엇을 달성 할 수 있는지 봅시다! 나는 집 근처에 서있는 남자의 간단한 그림을 그려서 다른 패턴과 색상으로 채워서 그것을 향상시킬 것이다. 간단하게하기 위해 유치한 예술 그림으로 만들고 예술적 거칠기를 포함하지 않도록합시다. 그게 다야 :
코드 펜에서 결과를 봅니다. 보시다시피, 우리는 이제 변수를 사용하고 있습니다 - 스테이지에서 내용을 그리는 모든 메소드는 생성 된 객체에 대한 참조를 반환 하며이 링크를 사용하여 객체를 변경하거나 삭제할 수 있습니다. 또한 체인 호출 (예 : )이 그래픽 js의 모든 곳에있는 방법에 유의하여 코드를 단축하는 데 도움이됩니다. 체인 호출은주의해서 사용해야하지만 제대로 적용되면 코드를보다 작고 읽기 쉽게 만듭니다. <code class="language-html"> <!DOCTYPE html> <meta charset="utf-8"> <title>GraphicsJS Basic Example</title> <div id="stage-container" style="width: 400px; height: 375px;"></div> </code>
이제이 색칠 페이지를 어린이에게 건네고 페인트 칠하자. 어린이조차도 다음 기술을 습득 할 수 있기 때문입니다이것은 우리의 예가 지금 보이는 방식입니다. 이제, 우리는 킬트 옆에 서있는 하이랜더의 사진을 가지고 있으며, 지붕에 빨대가있는 그의 벽돌 성 근처에 서 있습니다. 우리는 이것이 실제로 우리가 저작권을 얻고 싶은 예술 작품이라고 말할 위험이 있습니다. 사용자 정의 텍스트를 기반으로 패턴 채우기를 사용하여 이렇게합시다. <code class="language-html"> <!DOCTYPE html> <meta charset="utf-8"> <title>GraphicsJS Basic Example</title> <div id="stage-container" style="width: 400px; height: 375px;"></div> </code>
보시다시피, 이것은 쉽게 수행 할 수 있습니다. 텍스트 객체의 인스턴스를 만들고 무대에서 패턴을 형성하고 텍스트를 패턴에 넣습니다. Codepen에서 색상 저작권이있는 집/그래픽 js. 50 줄 미만의 코드로 퍼즐 아트 게임을 만듭니다 이 기사의 다음 부분에서는 50 줄 미만의 코드로 GraphicsJS를 사용하여 쿠키 클리커와 같은 게임을 만드는 방법을 보여 드리고자합니다. 게임 이름은 "바람의 거리를 쓸어냅니다. 이 게임은 GraphicsJS Gallery의 프로그램 생성 리프 예제의 일부 코드를 사용합니다. Codepen (또는 기사 끝)에서 완성 된 게임을 볼 수 있습니다. 레이어, Zindex 및 가상 Dom <code class="language-javascript"> // 创建舞台 var stage = acgraph.create('stage-container'); // 绘制矩形 var stage.rect(25, 50, 350, 300);</code> 우리는 먼저 (앞에서 언급 한 바와 같이) 단계를 만든 다음 몇 가지 초기 변수를 선언합니다. 이 게임의 경우, 우리는 요소를 그룹화하는 데 사용되는 그래픽 js의 객체 인 레이어를 사용합니다. 요소 (예 : 변환)에 유사한 변경 사항을 적용하려면 요소를 그룹화해야합니다. 일시 정지 모드에서 레이어를 변경할 수 있으며 (나중에 자세히 설명) 성능 및 사용자 경험을 향상시킬 수 있습니다.
이 데모에서는 레이어 함수를 사용하여 잎을 함께 그룹화하고 라벨을 덮는 것을 피하는 데 도움이됩니다 (잎이 얼마나 많은지 알려줍니다). 이를 위해 태그를 만들고메소드를 호출하여 스테이지 바인딩 층을 만듭니다. 이 레이어의
속성을 레이블 아래의속성으로 설정했습니다.
이 작업을 수행 한 후, 우리는 레이어에서 얼마나 많은 잎을 만들 든 텍스트를 덮어 쓰지 않도록 할 수 있습니다.
변환 다음, 잎을 그리는 기능을 추가합시다. 이것은 편리한 그래픽 JS 변환 API를 사용하여 요소와 요소 그룹을 이동, 스케일, 회전 및 절단 할 수 있습니다. 이것은 레이어 및 가상 DOM과 결합 될 때 매우 강력한 도구입니다.
처리 이벤트각 경로가 같은 방식으로 생성되지만 변환이 수행됩니다. 이것은 매우 아름다운 임의의 잎 패턴을 생성합니다. GraphicsJS의 모든 객체, 스테이지 및 레이어는 이벤트를 처리 할 수 있습니다. 지원되는 이벤트의 전체 목록은 EventType API에서 찾을 수 있습니다. 무대에는 렌더링을 제어하기위한 4 개의 특별 행사가 있습니다. 이 게임 예제에서, 우리는 사용자가 그들을 맴돌 때 잎 객체에 첨부 된 이벤트 리스너를 사용하고 있습니다. 이렇게하려면 진술 전에 다음 코드를 함수의 맨 아래에 추가하십시오. 여기서 우리는 또한 우리가 잎을 사용하여 잎을 계산하고 있음을 알 수 있습니다. drawLeavesreturn우리는 실제로 여기에 잎의 수를 저장하지 않습니다. 우리는 특정 층에 잎을 추가하고 그들로부터 잎을 제거하기 때문에, 우리는 얼마나 많은 어린이 요소 (그리고 남은 잎 수) 수를 추적 할 수 있습니다. GraphicsJS는 추상적이고 가벼우 며 브라우저 특정 SVG/VML 구현과는 별개의 가상 DOM을 제공합니다. 모든 객체와 레이어 추적, 그룹으로 변환을 적용하며 도움으로 렌더링을 최적화하는 등 많은 훌륭한 작업을 수행하는 데 매우 유용합니다. 렌더링 프로세스를 추적하고 제어 할 수 있습니다.<code class="language-html"> <!DOCTYPE html> <meta charset="utf-8"> <title>GraphicsJS Basic Example</title> <div id="stage-container" style="width: 400px; height: 375px;"></div> </code>
성능 최적화가상 DOM 및 이벤트 처리기를 사용하면 GraphicsJS 사용자가 렌더링을 제어 할 수 있습니다. 성능 기사는 이러한 내용 간의 관계를 이해하는 데 도움이 될 수 있습니다. 게임에서 잎을 생성 할 때 새 잎을 추가 할 때 렌더링을 일시 중지해야하며 모든 변경 사항이 완료된 후에 만 렌더링 만 재개해야합니다. <code class="language-javascript"> // 创建舞台 var stage = acgraph.create('stage-container'); // 绘制矩形 var stage.rect(25, 50, 350, 300);</code>새로운 요소를 다루는이 방법은 새로운 잎이 거의 즉시 나타납니다. 마지막으로 를 호출하여 모든 것을 시작하십시오. 최종 결과
코드 펜에서 거리 청소기/그래픽 js를 봅니다. 결론
html5로의 전환으로 네트워크가 변경되었습니다. 최신 웹 애플리케이션 및 간단한 웹 사이트와 관련하여 이미지 처리가 필요한 작업이 종종 발생합니다. 모든 경우에 잘 작동하는 솔루션을 찾는 것은 불가능하지만 GraphicsJS 라이브러리를 고려해야합니다. 우수한 브라우저 지원과 재미 있고 편리하며 물론 유용한 많은 기능을 갖춘 오픈 소스입니다. 아래의 의견에서 grphicsjs에 대한 귀하의 의견을 듣고 싶습니다. 이미 사용하고 있습니까? 새로운 프로젝트에 사용하는 것을 고려 하시겠습니까? 나는 이유를 알고 싶거나 왜 그것을 사용하지 않는지 알고 싶습니다. 또한 주요 JavaScript 드로잉 라이브러리 및 기사를 모두 비교하고 비교할 기사 목록을 작성합니다. 거기에서보고 싶은 기능을 자유롭게 지적하십시오. 추가 읽기를위한 링크
일반 정보 svg-
캔버스
-
- 도서관
그래픽 raphaëlsnap.svg Bonsaijs 그래픽github의 그래픽 js
-
-
GraphicsJS 에 대한 자주 묻는 질문 GraphicsJS는 다른 JavaScript 그래픽 라이브러리와 어떻게 다릅니 까? GraphicsJs는 강력하고 가벼운 특성으로 두드러집니다. 개발자가 정밀도와 고성능으로 모든 그래픽을 그리거나 애니메이션 할 수있는 강력한 라이브러리입니다. 다른 라이브러리와 달리 GraphicsJS는 속도 나 효율에 영향을 미치지 않고 레이어, 그라디언트, 패턴 등을 포함한 포괄적 인 기능 세트를 제공합니다. 또한 모든 최신 브라우저를 지원하므로 개발자에게 다양한 옵션이됩니다.GraphicsJS를 시작하는 방법? GraphicsJS를 시작하려면 HTML 파일에 그래픽 js 라이브러리를 포함시켜야합니다. 공식 웹 사이트에서 라이브러리를 다운로드하거나 CDN을 사용할 수 있습니다. 라이브러리가 포함되면 라이브러리가 제공 한 적절한 기능 및 메소드를 호출하여 그래픽을 만들 수 있습니다. GraphicsJS를 사용하여 복잡한 애니메이션을 만들 수 있습니까? 예, GraphicsJS는 복잡한 애니메이션을 쉽게 처리하도록 설계되었습니다. 완화 기능, 지연 및 지속 시간 설정을 포함한 풍부한 애니메이션 기능 세트를 제공합니다. 위치, 크기, 색상 등과 같은 그래프의 속성을 애니메이션 할 수 있습니다. 이로 인해 GraphicsJS는 대화식 및 동적 그래픽을 생성하기위한 강력한 도구가됩니다. 그래픽 JS는 모든 브라우저와 호환됩니까?
GraphicsJS는 Chrome, Firefox, Safari 및 Internet Explorer를 포함한 모든 최신 브라우저와 호환되도록 설계되었습니다. 렌더링을 위해 SVG 및 VML을 사용하며 모두 지원합니다. 이를 통해 그래픽이 일관되게 보이고 다른 플랫폼과 장치에서 잘 작동하도록합니다. -
-
GraphicsJS로 그라디언트를 만드는 것은 간단합니다. 그라디언트 방법을 사용하여 선형 또는 방사형 그라디언트를 정의하고 색상 및 위치를 지정한 다음 모든 형태에 그라디언트를 적용 할 수 있습니다. 이를 통해 다채로운 그래픽을 쉽게 만들 수 있습니다. -
예, GraphicsJS는 대화식 그래픽을 만들 수있는 일련의 이벤트 처리 기능을 제공합니다. 이벤트 리스너를 그래프에 첨부하여 클릭, 마우스 이동 등과 같은 사용자 작업에 응답 할 수 있습니다. 이로 인해 GraphicsJS는 대화식 웹 애플리케이션을 만드는 데 탁월한 선택이됩니다. -
예, GraphicsJS는 레이어를 지원하므로 그래픽을 별도의 그룹으로 구성 할 수 있습니다. 각 레이어는 독립적으로 작동 할 수 있으므로 복잡한 그래픽을보다 쉽게 관리 할 수 있습니다. 각 레이어의 가시성과 ZoRder를 제어하여 그래픽을 세밀하게 제어 할 수 있습니다.
GraphicsJS를 사용하여 대화식 그래픽을 만들 수 있습니까? 그래픽 js는 레이어를 지원합니까? GraphicsJS를 사용하여 내 그래픽을 최적화하는 방법은 무엇입니까? GraphicsJS는 그래픽을 최적화하는 데 도움이되는 몇 가지 기능을 제공합니다. 예를 들어, 자르기 방법을 사용하여 지정된 영역 외부의 그래픽의 일부를 숨겨 필요한 렌더링의 양을 줄일 수 있습니다. 캐시 방법을 사용하여 그래픽의 렌더링 된 출력을 저장할 수 있으므로 그래픽을 자주 다시 칠할 때 성능이 향상됩니다.GraphicsJS를 사용하여 차트와 그래픽을 만들 수 있습니까? GraphicsJS는 차트 및 그래픽을 작성하도록 특별히 설계되지 않았지만 강력한 드로잉 및 애니메이션 기능을 사용하면 차트 및 그래픽을 포함한 모든 유형의 그래픽을 만들 수 있습니다. 라이브러리의 방법을 사용하여 선, 곡선, 직사각형, 원 등을 그리며 다양한 차트 유형을 만들 수 있습니다. 그래픽 js는 무료로 사용할 수 있습니까? 예, GraphicsJS는 무료 오픈 소스 라이브러리입니다. 프로젝트에서 무료로 사용할 수 있습니다. 도서관은 또한 최신 웹 표준 및 기술과 동기화되도록 적극적으로 유지됩니다. -
그래픽 js 문서그래픽 JS API 참조GraphicsJS를 사용하여 그라디언트를 만드는 방법은 무엇입니까? - 도서관
svg vs. 캔버스 -
위 내용은 강력한 가벼운 그래픽 라이브러리 인 GraphicsJS를 소개합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!