강력한 가벼운 그래픽 라이브러리 인 GraphicsJS를 소개합니다
<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의 모든 곳에있는 방법에 유의하여 코드를 단축하는 데 도움이됩니다. 체인 호출은주의해서 사용해야하지만 제대로 적용되면 코드를보다 작고 읽기 쉽게 만듭니다. <'s> 이제이 색칠 페이지를 어린이에게 건네고 페인트 칠하자. 어린이조차도 다음 기술을 습득 할 수 있기 때문입니다<!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 <🎜 우리는 먼저 (앞에서 언급 한 바와 같이) 단계를 만든 다음 몇 가지 초기 변수를 선언합니다.// 创建舞台 var stage = acgraph.create('stage-container'); // 绘制矩形 var stage.rect(25, 50, 350, 300);로그인 후 복사로그인 후 복사<,>이 게임의 경우, 우리는 요소를 그룹화하는 데 사용되는 그래픽 js의 객체 인 레이어를 사용합니다. 요소 (예 : 변환)에 유사한 변경 사항을 적용하려면 요소를 그룹화해야합니다. 일시 정지 모드에서 레이어를 변경할 수 있으며 (나중에 자세히 설명) 성능 및 사용자 경험을 향상시킬 수 있습니다.
이 데모에서는 레이어 함수를 사용하여 잎을 함께 그룹화하고 라벨을 덮는 것을 피하는 데 도움이됩니다 (잎이 얼마나 많은지 알려줍니다). 이를 위해 태그를 만들고메소드를 호출하여 스테이지 바인딩 층을 만듭니다. 이 레이어의
속성을 레이블 아래의속성으로 설정했습니다.
이 작업을 수행 한 후, 우리는 레이어에서 얼마나 많은 잎을 만들 든 텍스트를 덮어 쓰지 않도록 할 수 있습니다.
변환 <🎜 🎜> <'s> 다음, 잎을 그리는 기능을 추가합시다. 이것은 편리한 그래픽 JS 변환 API를 사용하여 요소와 요소 그룹을 이동, 스케일, 회전 및 절단 할 수 있습니다. 이것은 레이어 및 가상 DOM과 결합 될 때 매우 강력한 도구입니다.
<<> 처리 이벤트 <🎜 🎜>각 경로가 같은 방식으로 생성되지만 변환이 수행됩니다. 이것은 매우 아름다운 임의의 잎 패턴을 생성합니다. GraphicsJS의 모든 객체, 스테이지 및 레이어는 이벤트를 처리 할 수 있습니다. 지원되는 이벤트의 전체 목록은 EventType API에서 찾을 수 있습니다. 무대에는 렌더링을 제어하기위한 4 개의 특별 행사가 있습니다. 이 게임 예제에서, 우리는 사용자가 그들을 맴돌 때 잎 객체에 첨부 된 이벤트 리스너를 사용하고 있습니다. 이렇게하려면 <🎜 🎜> 진술 전에 다음 코드를 <🎜 🎜> 함수의 맨 아래에 추가하십시오. 여기서 우리는 또한 우리가 잎을 사용하여 잎을 계산하고 있음을 알 수 있습니다. drawLeavesreturn우리는 실제로 여기에 잎의 수를 저장하지 않습니다. 우리는 특정 층에 잎을 추가하고 그들로부터 잎을 제거하기 때문에, 우리는 얼마나 많은 어린이 요소 (그리고 남은 잎 수) 수를 추적 할 수 있습니다. 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-
캔버스
-
- 도서관
그래픽 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Demystifying JavaScript : 그것이하는 일과 중요한 이유
Apr 09, 2025 am 12:07 AM
JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
JavaScript의 진화 : 현재 동향과 미래 전망
Apr 10, 2025 am 09:33 AM
JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.
JavaScript 엔진 : 구현 비교
Apr 13, 2025 am 12:05 AM
각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.
Python vs. JavaScript : 학습 곡선 및 사용 편의성
Apr 16, 2025 am 12:12 AM
Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.
JavaScript : 웹 언어의 다양성 탐색
Apr 11, 2025 am 12:01 AM
JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.
Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법
Apr 11, 2025 am 08:22 AM
이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.
Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축
Apr 11, 2025 am 08:23 AM
일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.
C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지
Apr 14, 2025 am 12:05 AM
C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.
