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

90

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

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

javascript html html5-canvas

— Ericbowden
소스

2

물론. 옵션이 2d-context-> KineticJS, fabric.js, paper.js 또는 easel.js와 비슷하다고 생각합니다. 3D 컨텍스트 (WebGL을) -> Three.js를

— 에릭과 Rowell

1

캔버스 라이브러리 비교에 대한 kangax의 링크를 확인할 수 있습니다. 여기에

— 다시 게시

4

여기에있는 거의 모든 것이 일반적으로 닫히기 때문에이 질문이 아직 닫히지 않은 것에 놀랐습니다. 대답하고 싶지만 주제에서 벗어난 것으로 간주 될 수 있으므로 너무 겁이납니다 ( "무서움"읽기). 질문을 "유사점 / 상쇄 관계가 무엇인지"로 바꾸면 2 센트를 추가 할 수 있습니다 ( "답변"읽기).

— puk

4

@puk와 같은 느낌입니다. 또한 본질적으로 "개방형"인 것과 "건설적이지 않은"것으로 표시된 것 사이의 의미 적 균열이 재미 있다고 생각합니다. 이는 대략적으로 하나의 축약 할 수없는 대답이 불가능한 질문은 프로그래밍 지식의 세계에서 가장 인기 있고 포괄적 인 저장소에서 고려할 가치가없는 질문으로 해석됩니다. 나는 그들이 좋은 'Q + A'에 맞지 않는다는 것을 알지만, 왜 그들을 '매우 주관적'이라고 표시하고, 담당자 포인트를 제한하고 그들을 열어 두는 것은 어떻습니까?

— Mark Fox

1

주관적이라는 이유만으로 도움이되는 질문을 끊임없이 닫는 것에 저도 정말 짜증이납니다. 그래서 뭐!? 피비린내 나는 유용한 물건입니다.

— Iain Duncan

80

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

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

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

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

— Kangax
소스

귀하의 비교는 많은 정보를 제공하지만 공개적으로 편집 할 수있는 정보는 제한되어야합니다. 다른 사용자가 잘못 편집 할 수 있기 때문입니다. kineticjs가 nodjs를 지원하지 않나요? 당신은 창문과 같은 하나의 예는 프로그램 (당신의 직물 라이브 오브젝트의 원 그리기) 페인트 제공 할 수 있습니다

— Thirumalai 님 Murugan

그것은 공개적으로 편집 할 수 없습니다입니다

— kangax

1

이 게시물을 발견하게되어 운이 좋았습니다! Kinetic과 함께 사용했지만 아직 성숙하지 않았습니다. 그런 다음 Easel을 시도했지만 너무 무겁습니다. 마지막으로 Fabric으로 이동했습니다. 훌륭합니다!

— MeLight

창 (당신의 직물 라이브 오브젝트의 원 그리기) 프로그램을 페인트처럼 죄송합니다 @kangax 미스 이해, 당신은 내게 하나의 예를 제공 할 수 있습니다

— Thirumalai 님 Murugan에게

에 여기 @Thirumalaimurugan 당신은 갈 : jsfiddle.net/fabricjs/nXmTC/1

— kangax

66

편집 : 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 (물론) 외에 제가 가장 좋아하는 두 라이브러리는 패브릭과 종이입니다.

— 에릭 로웰
소스

7

데모를 보니 성능이 꽤 멋져 보입니다! 또한 단위 테스트가 있다는 소식을 듣고 기쁩니다. 여러 레이어를 만들 수 있습니다. 멋지네요. 패브릭에서는 동일한 방식으로 최적화하지만 하나는 선택 용, 하나는 그리기 용이며 내부적으로 (사용자는 더 이상 만들 수 없음) 2 개의 레이어 만 있습니다. 어떻게 든 라이브러리 비교 차트를 만들 때 Kinetic을 놓쳤습니다. 우리는 :) 수정해야

— kangax

6

업데이트 : KineticJS은 GitHub의에 지금있다 : github.com/ericdrowell/KineticJS

— 에릭과 Rowell

7

KineticJS는 EaselJS와 어떻게 비교됩니까? 언제 무엇을 사용해야합니까?

— geeky_monster

1

KineticJS 잘 Kinetic.Path () 모양을 통해 같은 SVG 벡터를 지원하는 것을 지적하고 싶습니다 html5canvastutorials.com/kineticjs/...

— 에릭과 Rowell에게

2

@EricRowell Mate 저는 KineticJS, 속도, GSAP와의 결합을 좋아하지만 내 머리를 돌리는 것은 FabricJS에서와 같이 KineticJS 객체를 자유롭게 변환하는 방법이 있습니까? 다음은 내가 말하려는 내용에 대한 링크 참조입니다. fabricjs.com/customization FabricJ 를 사용하는 것이 정말 느리고 다양한 단위 테스트에서 명백한 낮은 성능으로 사용하고 싶지 않습니다. KineticJS에서 객체를 자유롭게 변환 할 수있는 방법을 찾고 정말 편리합니다. 감사합니다, Praney

— praneybehl

62

최근 독자를 위해 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 구문 분석 및 출력이 누락되었습니다.

— 제레미 버튼
소스

1

이 답변에 감사 드리며 많은 시간을 절약했습니다. 나는 Kinetic과 함께 갈 것이고, 당신이 이미 말한 것을 발견하기를 바랍니다.

— Bashevis 2013-02-05

iPad3 및 Samsung Galaxy Tab2에서 위의 라이브러리에 대해 제공된 드래그 앤 드롭 데모에 대해 비과학적인 사용자 테스트를 수행했습니다. KineticJS는 터치 포지셔닝에서 더 반응성이 높고 정확하다는 점에서 분명한 승자로 나왔습니다.

— Per Quested Aronsson 당 Aronsson

1

나는 둘 다 평가하고 있으며, 현재는 fabricjs가 더 완전하고 잘 문서화되어있는 것 같습니다.

— albanx 2013

9

Jeremy, Fabric의 API 불일치 에 대해 더 듣고 싶습니다 . 나는 그것을 가능한 한 직관적으로 만들려고 노력한다. 그래도 뭔가 이상하다면 나는 그것을 확실히 처리하고 싶다. 티켓을 제출하거나 여기에 언급 할 수 있습니까? 문서 는 내가 원하는만큼 좋지는 않지만 1 월 이후로 개선되고 있습니다. 상호 작용에 대한 강한 의견 — 여러분이 할 수있는 조정이 상당히 많지만 그렇게 말할 수있을 것 같습니다. 정확히 무엇을 원했습니까? 마지막으로, 포인터 이벤트 — 무슨 뜻인지 확실하지 않습니다. 경로는 확실히 실제 모양입니다. fabricjs.com/quadratic-curve

— kangax

23

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

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

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

— Bendangelo
소스

3

2014 년 7 월 현재, 이것은 최고의 캔버스 라이브러리처럼 보입니다. 4k 명의 사람들이 Github에서 별표를 표시했으며 대기업 및 대행사에서 사용합니다. Google과 같은 pixijs.com/projects .

— Vennsoh