자바 스크립트 캔버스 라이브러리의 현재 상태?

자바 스크립트 캔버스 라이브러리의 현재 상태? [닫은]

---

나는 HTML 캔버스 라이브러리에 대한 연구를 해왔고이 질문을 발견했습니다. HTML 캔버스 JavaScript 라이브러리 및 프레임 워크의 최신 기술은 무엇입니까? 2010 년에 질문을 받았습니다. 가장 많은 답변은 Fabric.js였습니다. 좀 더 많은 조사를 한 후에 나는 속도를 위해 여러 캔버스를 자랑하는 KineticJs에 대한 자습서를 제공하는 http://www.html5canvastutorials.com/ 을 발견했습니다. 나중에 조금 더 많은 연구를 통해 Canvas 라이브러리는 속도와 기능면에서 모든 곳에있는 것처럼 보입니다. 오늘날 JavaScript Canvas 라이브러리 및 프레임 워크의 현재 상태는 어떻습니까? 하나가 맨 위에 나와 있습니까?

편집 : 도서관이 계속 변하고 최근에 많은 사람들이 새로운 도서관에 대한 뉴스와 정보를 얻기 위해 여기에 왔기 때문에 질문을 더 시간을 초월하는 것으로 변경했습니다.

---

면책 조항 : 저는 Fabric.js 의 저자입니다 .

나는 Easel.js, Fabric.js 및 Paper.js가 현재 가장 많이 사용된다고 말할 수 있습니다. 저는 각 저장소에 대한 Github 감시자 수, Google 그룹스의 토론 양, 트위터에서 캔버스 라이브러리로 사용되는 것에 대해 얼마나 자주 듣는지 판단하고 있습니다.

이것들은 또한 다소 괜찮은 문서, 예제 / 데모, 토론 그룹 및 단위 테스트 (대부분의 다른 캔버스 라이브러리의 테스트 상태는 매우 슬프다)가있는 것들입니다.

또한 라이브러리가 얼마나 최근에 업데이트되었는지, 크기, IE <9 또는 node.js에 대한 지원 등을 볼 수있는 다양한 캔버스 라이브러리 의이 비교 테이블을 유지 하고 있습니다.

---

편집 : KineticJS는 더 이상 적극적으로 유지되지 않습니다.

면책 조항 : KineticJS를 만들었습니다.

KineticJS는 실제로 꽤 잘하고 있습니다. 소스 코드는 Github 에서 찾을 수 있으며 , 현재 2180 명이 별표를 표시하고 있습니다.

수천 개의 동시 셰이프를 처리 할 수 ​​있습니다.

10,000 드래그 앤 드롭 스트레스 테스트 : http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

툴팁이있는 10,000 개의 도형 : http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

모바일 이벤트를 포함하여 매우 우수한 이벤트 지원을 제공하며, 100 개의 단위 테스트로 구성된 꽤 견고한 스위트가 있으므로 코드베이스가 매우 견고하다고 느낍니다.

kangax : fabric.js를 사용한 PS 멋진 작업! KineticJS (물론) 외에 제가 가장 좋아하는 두 라이브러리는 패브릭과 종이입니다.

---

최근 독자를 위해 2013 년 1 월 현재 다음을 평가했습니다.

• 운동
• 구조
• 종이
• 화가

"평가됨"으로 나는 문서를 읽는 것 이상의 일을했습니다. 프로토 타입 앱을 만들었습니다.

가장 큰 커뮤니티가있는 것 같았고 이것이 제 솔루션이 될 것이라고 생각했기 때문에 Fabric으로 시작했습니다. 그러나 다음과 같은 이유로 Fabric을 포기했습니다.

• 불필요하게 많은 시간을 소모 한 이상하고 문서화되지 않은 API 불일치.
• 불일치 포인터 이벤트 지원. 특히 Fabric은 "경로"를 선택 및 관찰 가능한 실제 모양 개체로 간주하지 않습니다. 대화 형 경로가 내 앱의 주요 요구 사항이기 때문에 이것은 내 요구를 충족하지 못했습니다.
• 개체를 배치하기 위해 캔버스에 번역을 추가했습니다. 저에게 Fabric은 개발자에게 무엇을하는지 명확하지 않고 이와 관련하여 너무 영리하려고합니다.
• 이동, 크기 조정 및 회전 상호 작용 방식에 대한 지나치게 강한 의견. 여러면에서이 기능을 프레임 워크에 내장하는 것은 좋지만, 필자의 경우 구현 방식에 동의하지 않았는데 이는 본질적으로 어쨌든 직접 다시 구현해야 함을 의미했습니다.
• 희소 문서-메소드 문서가 "setX (Y)-set 's the X to Y"형식 인 경우가 많습니다. :-)

나는 Paper를보고 너무 멀리 가지 않았다. 그것은 나에게 지나치게 둔한 것처럼 보였고 또한 너무 변덕스러운 IMO 사이에 속합니다. 캔버스의 단순한 개체 모델이 되기에는 시각화 라이브러리가 너무 많지만 D3와 경쟁하기에는 시각화 라이브러리가 충분하지 않습니다. 또한 문서는 특별히 접근 할 수 없었습니다.

Flash / ActionScript에 대한 배경 지식이있는 경우 Easel이 많은 의미가 있다고 생각하지만 저는 그렇지 않습니다. 또한 내 요구 사항에 대해 지나치게 게임에 초점을 맞춘 것처럼 보였습니다. 관의 못은 다시 문서화되었습니다. 충분하지 않으며 비표준 형식으로 제공되었습니다.

그래서 저는 다음과 같은 이유로 Kinetic을 사용하게되었습니다.

• 정말 풍부하고 명확한 튜토리얼과 예제
• API 함수는 호출 된 작업을 수행하며 대부분 추측 가능합니다. 생산성 향상, 학습 곡선 감소
• 그것이 무엇을하고 무엇을하지 않는지에 대해 합리적으로 분명합니다. 그것은 다른 것들만큼 부유하지는 않지만 그것은 이점입니다. 더 적은 일을하지만 더 잘합니다
• 경로는 내 요구 사항에 필수적인 다른 Shape와 마찬가지로 일류 시민 Shape입니다.

키네틱은 어떤 방식으로도 완벽하지 않으며 실제로 내부에서 무슨 일이 일어나고 있는지 파악하기 위해 소스 코드를 깊이 파고 들어야 할 때가 몇 번있었습니다. 또한 Fabric의 SVG 구문 분석 및 출력이 누락되었습니다.

---

pixijs를 강력히 추천합니다. 고성능 캔버스 라이브러리입니다.

Pixi.js는 원활한 캔버스 폴 백이 포함 된 2D webGL 렌더러로 데스크톱과 모바일 모두에서 모든 최신 브라우저에서 작동 할 수 있습니다.

http://www.goodboydigital.com/pixi-js-is-out/

참고URL : https://stackoverflow.com/questions/8938969/current-state-of-javascript-canvas-libraries