강력한 가벼운 그래픽 라이브러리 인 GraphicsJS를 소개합니다-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

강력한 가벼운 그래픽 라이브러리 인 GraphicsJS를 소개합니다

尊渡假赌尊渡假赌尊渡假赌

Feb 17, 2025 am 10:42 AM

html5 : 현대 네트워크의 초석. 오늘날 SVG와 캔버스는 대화식 이미지를 만들 때 종종 선택되는 기술입니다. 플래시는 잊혀졌고, 실버 라이트는 네트워크 가장자리에서 드문 유니콘이되었으며, 타사 플러그인을 기억하는 사람은 거의 없습니다.

각 기술의 장단점은 잘 문서화되어 있지만 SVG는 대화식 요소를 작성하고 처리하는 데 더 적합합니다. SVG는 태그를 사용하여 이미지를 페이지에로드 할 때 각 요소가 SVG DOM에서 사용할 수있는 XML 기반 벡터 형식이기 때문입니다.

이 기사에서는 SVG를 기반으로 새롭고 강력한 오픈 소스 JavaScript 드로잉 라이브러리 인 GraphicsJS를 소개하고 싶습니다 (이전 IE 버전의 경우 VML 대안이 있습니다). 나는 기본 사항을 빠르게 소개하고 두 가지 짧고 멋진 예제로 도서관의 기능을 보여주는 것으로 시작하겠습니다. 첫 번째 예는 전적으로 예술에 관한 것이며 두 번째 예제는 50 줄 미만의 코드 퍼즐 아트로 간단한 것을 작성하는 방법을 보여줍니다. 게임.

<svg></svg> 키 포인트

GraphicsJS는 SVG를 기반으로하는 새롭고 강력한 오픈 소스 JavaScript 드로잉 라이브러리이며 이전 IE 버전에 대한 VML 대안을 제공합니다. 풍부한 JavaScript API와 함께 가볍고 유연합니다.

AdeChart가 출판 한이 도서관은 적어도 3 년 동안 Chart의 독점 제품에서 렌더링되어 견고성을 보장합니다. Anychart의 JavaScript 드로잉 갤러리와 달리 GraphicsJS는 상업 및 비영리 프로젝트를 위해 무료로 제공됩니다.

GraphicsJS는 크로스 브라우저 호환성이며 Internet Explorer 6.0, Safari 3.0, Firefox 3.0 및 Opera 9.5를 지원합니다. 이전 IE 버전의 VML과 다른 모든 브라우저에서 SVG로 렌더링됩니다.
이 라이브러리를 사용하면 애니메이션 모닥불, 회전 은하, 강우 및 플레이 가능한 15 퍼즐 게임을 포함한 그래픽과 애니메이션의 조합을 허용합니다. 또한 자세한 문서 및 포괄적 인 API 참조도 포함되어 있습니다.
GraphicsJS 라이브러리는 레이어, 그라디언트, 패턴, 이벤트 처리 및 성능 최적화를 포함한 대화식 웹 응용 프로그램을 만드는 데 사용될 수 있습니다. 또한 복잡한 애니메이션 및 변환을 지원하므로 개발자에게 다재다능한 옵션이됩니다.

왜 그래픽 를 선택 하는가 개발자가 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의 모든 곳에있는 방법에 유의하여 코드를 단축하는 데 도움이됩니다. 체인 호출은주의해서 사용해야하지만 제대로 적용되면 코드를보다 작고 읽기 쉽게 만듭니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>GraphicsJS Basic Example</title> </head> <body> <div id="stage-container" style="width: 400px; height: 375px;"></div> <🎜> <🎜> </body> </html>
이제이 색칠 페이지를 어린이에게 건네고 페인트 칠하자. 어린이조차도 다음 기술을 습득 할 수 있기 때문입니다
이것은 우리의 예가 지금 보이는 방식입니다.
이제, 우리는 킬트 옆에 서있는 하이랜더의 사진을 가지고 있으며, 지붕에 빨대가있는 그의 벽돌 성 근처에 서 있습니다. 우리는 이것이 실제로 우리가 저작권을 얻고 싶은 예술 작품이라고 말할 위험이 있습니다. 사용자 정의 텍스트를 기반으로 패턴 채우기를 사용하여 이렇게합시다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>GraphicsJS Basic Example</title> </head> <body> <div id="stage-container" style="width: 400px; height: 375px;"></div> <🎜> <🎜> </body> </html>
보시다시피, 이것은 쉽게 수행 할 수 있습니다. 텍스트 객체의 인스턴스를 만들고 무대에서 패턴을 형성하고 텍스트를 패턴에 넣습니다.
Codepen에서 색상 저작권이있는 집/그래픽 js.
50 줄 미만의 코드로 퍼즐 아트 게임을 만듭니다
이 기사의 다음 부분에서는 50 줄 미만의 코드로 GraphicsJS를 사용하여 쿠키 클리커와 같은 게임을 만드는 방법을 보여 드리고자합니다. 게임 이름은 "바람의 거리를 쓸어냅니다. 이 게임은 GraphicsJS Gallery의 프로그램 생성 리프 예제의 일부 코드를 사용합니다. Codepen (또는 기사 끝)에서 완성 된 게임을 볼 수 있습니다.
레이어, Zindex 및 가상 Dom 우리는 먼저 (앞에서 언급 한 바와 같이) 단계를 만든 다음 몇 가지 초기 변수를 선언합니다.
이 게임의 경우, 우리는 요소를 그룹화하는 데 사용되는 그래픽 js의 객체 인 레이어를 사용합니다. 요소 (예 : 변환)에 유사한 변경 사항을 적용하려면 요소를 그룹화해야합니다. 일시 정지 모드에서 레이어를 변경할 수 있으며 (나중에 자세히 설명) 성능 및 사용자 경험을 향상시킬 수 있습니다.
이 데모에서는 레이어 함수를 사용하여 잎을 함께 그룹화하고 라벨을 덮는 것을 피하는 데 도움이됩니다 (잎이 얼마나 많은지 알려줍니다). 이를 위해 태그를 만들고
메소드를 호출하여 스테이지 바인딩 층을 만듭니다. 이 레이어의
속성을 레이블 아래의
속성으로 설정했습니다.

이 작업을 수행 한 후, 우리는 레이어에서 얼마나 많은 잎을 만들 든 텍스트를 덮어 쓰지 않도록 할 수 있습니다.

변환 다음, 잎을 그리는 기능을 추가합시다. 이것은 편리한 그래픽 JS 변환 API를 사용하여 요소와 요소 그룹을 이동, 스케일, 회전 및 절단 할 수 있습니다. 이것은 레이어 및 가상 DOM과 결합 될 때 매우 강력한 도구입니다. 각 경로가 같은 방식으로 생성되지만 변환이 수행됩니다. 이것은 매우 아름다운 임의의 잎 패턴을 생성합니다.
처리 이벤트 GraphicsJS의 모든 객체, 스테이지 및 레이어는 이벤트를 처리 할 수 있습니다. 지원되는 이벤트의 전체 목록은 EventType API에서 찾을 수 있습니다. 무대에는 렌더링을 제어하기위한 4 개의 특별 행사가 있습니다.
이 게임 예제에서, 우리는 사용자가 그들을 맴돌 때 잎 객체에 첨부 된 이벤트 리스너를 사용하고 있습니다. 이렇게하려면 진술 전에 다음 코드를 함수의 맨 아래에 추가하십시오.
여기서 우리는 또한 우리가 잎을 사용하여 잎을 계산하고 있음을 알 수 있습니다. drawLeaves return 우리는 실제로 여기에 잎의 수를 저장하지 않습니다. 우리는 특정 층에 잎을 추가하고 그들로부터 잎을 제거하기 때문에, 우리는 얼마나 많은 어린이 요소 (그리고 남은 잎 수) 수를 추적 할 수 있습니다.
GraphicsJS는 추상적이고 가벼우 며 브라우저 특정 SVG/VML 구현과는 별개의 가상 DOM을 제공합니다. 모든 객체와 레이어 추적, 그룹으로 변환을 적용하며 도움으로 렌더링을 최적화하는 등 많은 훌륭한 작업을 수행하는 데 매우 유용합니다. 렌더링 프로세스를 추적하고 제어 할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>GraphicsJS Basic Example</title> </head> <body> <div id="stage-container" style="width: 400px; height: 375px;"></div> <🎜> <🎜> </body> </html>
성능 최적화
가상 DOM 및 이벤트 처리기를 사용하면 GraphicsJS 사용자가 렌더링을 제어 할 수 있습니다. 성능 기사는 이러한 내용 간의 관계를 이해하는 데 도움이 될 수 있습니다.
게임에서 잎을 생성 할 때 새 잎을 추가 할 때 렌더링을 일시 중지해야하며 모든 변경 사항이 완료된 후에 만 렌더링 만 재개해야합니다.
// 创建舞台 var stage = acgraph.create('stage-container'); // 绘制矩形 var stage.rect(25, 50, 350, 300);
새로운 요소를 다루는이 방법은 새로운 잎이 거의 즉시 나타납니다.
마지막으로 를 호출하여 모든 것을 시작하십시오.

최종 결과 코드 펜에서 거리 청소기/그래픽 js를 봅니다.

결론 html5로의 전환으로 네트워크가 변경되었습니다. 최신 웹 애플리케이션 및 간단한 웹 사이트와 관련하여 이미지 처리가 필요한 작업이 종종 발생합니다. 모든 경우에 잘 작동하는 솔루션을 찾는 것은 불가능하지만 GraphicsJS 라이브러리를 고려해야합니다. 우수한 브라우저 지원과 재미 있고 편리하며 물론 유용한 많은 기능을 갖춘 오픈 소스입니다.
아래의 의견에서 grphicsjs에 대한 귀하의 의견을 듣고 싶습니다. 이미 사용하고 있습니까? 새로운 프로젝트에 사용하는 것을 고려 하시겠습니까? 나는 이유를 알고 싶거나 왜 그것을 사용하지 않는지 알고 싶습니다. 또한 주요 JavaScript 드로잉 라이브러리 및 기사를 모두 비교하고 비교할 기사 목록을 작성합니다. 거기에서보고 싶은 기능을 자유롭게 지적하십시오.
추가 읽기를위한 링크

일반 정보 svg
캔버스 svg vs. 캔버스

도서관 ~~그래픽 raphaël~~
~~snap.svg~~
Bonsaijs

~~그래픽 ~~github~~~~ 의 그래픽 js 그래픽 js 문서 그래픽 JS API 참조

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는 대화식 그래픽을 만들 수있는 일련의 이벤트 처리 기능을 제공합니다. 이벤트 리스너를 그래프에 첨부하여 클릭, 마우스 이동 등과 같은 사용자 작업에 응답 할 수 있습니다. 이로 인해 GraphicsJS는 대화식 웹 애플리케이션을 만드는 데 탁월한 선택이됩니다.
그래픽 js는 레이어를 지원합니까?
예, GraphicsJS는 레이어를 지원하므로 그래픽을 별도의 그룹으로 구성 할 수 있습니다. 각 레이어는 독립적으로 작동 할 수 있으므로 복잡한 그래픽을보다 쉽게 관리 할 수 있습니다. 각 레이어의 가시성과 ZoRder를 제어하여 그래픽을 세밀하게 제어 할 수 있습니다.
GraphicsJS를 사용하여 내 그래픽을 최적화하는 방법은 무엇입니까?
GraphicsJS는 그래픽을 최적화하는 데 도움이되는 몇 가지 기능을 제공합니다. 예를 들어, 자르기 방법을 사용하여 지정된 영역 외부의 그래픽의 일부를 숨겨 필요한 렌더링의 양을 줄일 수 있습니다. 캐시 방법을 사용하여 그래픽의 렌더링 된 출력을 저장할 수 있으므로 그래픽을 자주 다시 칠할 때 성능이 향상됩니다.
GraphicsJS를 사용하여 차트와 그래픽을 만들 수 있습니까?
GraphicsJS는 차트 및 그래픽을 작성하도록 특별히 설계되지 않았지만 강력한 드로잉 및 애니메이션 기능을 사용하면 차트 및 그래픽을 포함한 모든 유형의 그래픽을 만들 수 있습니다. 라이브러리의 방법을 사용하여 선, 곡선, 직사각형, 원 등을 그리며 다양한 차트 유형을 만들 수 있습니다.
그래픽 js는 무료로 사용할 수 있습니까?
예, GraphicsJS는 무료 오픈 소스 라이브러리입니다. 프로젝트에서 무료로 사용할 수 있습니다. 도서관은 또한 최신 웹 표준 및 기술과 동기화되도록 적극적으로 유지됩니다.

위 내용은 강력한 가벼운 그래픽 라이브러리 인 GraphicsJS를 소개합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.