Trạng thái hiện tại của các thư viện Javascript Canvas? [đóng cửa]


90

Tôi đã nghiên cứu về các thư viện canvas HTML và tôi đã gặp câu hỏi này. Tình trạng hiện tại của nghệ thuật trong các thư viện và khung công tác JavaScript canvas canvas HTML là gì? đã được hỏi vào năm 2010. Câu trả lời hàng đầu là Fabric.js. Sau khi nghiên cứu thêm một chút, tôi đã xem qua http://www.html5canvastutorials.com/ có các hướng dẫn về KineticJs, tự hào có nhiều canvas để tăng tốc độ. Một nghiên cứu sâu hơn sau đó cho thấy rằng các thư viện Canvas dường như có mặt ở tất cả mọi nơi khi nói đến tốc độ và tính năng. Tình trạng hiện tại của các thư viện và khung công tác JavaScript Canvas ngày nay là gì? Có ai đi ra trên đầu trang không?

CHỈNH SỬA: Vì các thư viện luôn thay đổi và gần đây có rất nhiều người đến đây để xem tin tức và thông tin về các thư viện mới, tôi đã thay đổi câu hỏi để phù hợp hơn với thời gian.


2
chắc chắn rồi. Tôi tin rằng các tùy chọn trông như thế này: 2d-context -> KineticJS, vải.js, paper.js hoặc giá vẽ.js. Bối cảnh 3d (webgl) -> Three.js
Eric Rowell

1
Bạn có thể xem liên kết của kangax để so sánh các thư viện canvas. Đang đăng lại tại đây docs.google.com/spreadsheet/…
ericbowden

4
Tôi ngạc nhiên vì câu hỏi này vẫn chưa được đóng lại vì hầu hết mọi thứ ở đây thường đóng lại. Tôi muốn trả lời nhưng tôi quá sợ (đọc là "kinh hãi") vì nó có thể bị coi là lạc đề. Có thể nếu bạn đặt lại từ ngữ cho câu hỏi là "điểm tương đồng / đánh đổi là gì", tôi có thể thêm hai xu của mình (đọc "câu trả lời")
puk

4
Tôi cảm thấy giống như @puk. Ngoài ra, tôi nghĩ rằng sự rạn nứt ngữ nghĩa giữa những gì về cơ bản chỉ là "kết thúc mở" và những gì được đánh dấu là "không mang tính xây dựng" thật thú vị. Nó tạm dịch là nói những câu hỏi mà một câu trả lời không thể giải thích được là không đáng xem xét trong kho kiến ​​thức lập trình phổ biến và toàn diện nhất thế giới. Tôi hiểu rằng họ không phù hợp với một 'Q + A' tốt nhưng tại sao không chỉ đánh dấu họ là 'rất chủ quan', giới hạn điểm đại diện và giữ cho họ mở ... một cái gì đó.
Mark Fox

1
Chỉ nặng lòng vì SO rằng tôi cũng thực sự phát cáu với việc liên tục đóng các câu hỏi hữu ích chỉ vì họ chủ quan. Vậy thì sao!? Đó là một thứ hữu ích đẫm máu.
Iain Duncan

Câu trả lời:


80

Tuyên bố từ chối trách nhiệm: Tôi là tác giả của Fabric.js .

Tôi có thể nói rằng Easel.js, Fabric.js và Paper.js là những thứ được sử dụng nhiều nhất vào lúc này. Tôi đang đánh giá dựa trên số lượng người theo dõi Github cho mỗi kho lưu trữ, khối lượng thảo luận trong Nhóm Google của họ và tần suất tôi nghe về chúng được sử dụng làm thư viện canvas trên Twitter.

Đây cũng là những người có nhiều hoặc ít tài liệu phong phú, ví dụ / bản trình diễn, nhóm thảo luận và bài kiểm tra đơn vị (tình trạng kiểm tra trong hầu hết các thư viện canvas khác khá đáng buồn).

Tôi cũng đang duy trì bảng so sánh này của các thư viện canvas khác nhau , nơi bạn có thể xem thư viện đã được cập nhật gần đây như thế nào, kích thước của nó, hỗ trợ cho IE <9 hoặc node.js, v.v.


so sánh của bạn cung cấp nhiều thông tin nhưng có thể chỉnh sửa công khai nên bị hạn chế vì một số người dùng khác sẽ chỉnh sửa sai những thông tin đó. Tôi cần giúp đỡ là kineticjs sẽ không hỗ trợ gật đầu? và bạn có thể cho một ví dụ như cửa sổ sơn chương trình (vẽ vòng tròn đối tượng trực tiếp với vải của bạn)
Thirumalai Murugan

nó không phải là công khai có thể chỉnh sửa
kangax

1
Thật may mắn vì tôi đã tìm thấy bài đăng này! Đã từng làm việc với Kinetic nhưng nó vẫn chưa trưởng thành. Sau đó đã thử Easel, nhưng nó quá nặng. Cuối cùng đã chuyển sang Fabric, và điều đó thật tuyệt!
MeLight

@kangax Xin lỗi vì sự hiểu biết bỏ lỡ, bạn có thể cho tôi một ví dụ như cửa sổ sơn chương trình (vẽ vòng tròn đối tượng trực tiếp với vải của bạn)
Thirumalai Murugan

@Thirumalaimurugan của bạn đây: jsfiddle.net/fnaijs/nXmTC/1
kangax 22/07/13

66

CHỈNH SỬA: KineticJS không còn được duy trì tích cực.

Tuyên bố từ chối trách nhiệm: Tôi đã tạo KineticJS

KineticJS thực sự đang hoạt động khá tốt. Bạn có thể tìm thấy mã nguồn tại Github , nơi nó được gắn dấu sao bởi 2180 người vào lúc này.

Nó có thể xử lý hàng nghìn hình dạng đồng thời:

10.000 kiểm tra căng thẳng kéo và thả: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10.000 hình dạng có chú giải công cụ: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Nó có hỗ trợ sự kiện rất tốt, bao gồm cả các sự kiện trên thiết bị di động và nó có một bộ 100 bài kiểm tra đơn vị khá vững chắc nên cơ sở mã cho cảm giác khá chắc chắn.

kangax: PS công việc tuyệt vời với Fabric.js! Ngoài KineticJS (tất nhiên), hai thư viện yêu thích khác của tôi là vải và giấy.


7
Chỉ cần nhìn vào các bản demo và hiệu suất trông khá tuyệt vời! Cũng rất vui khi biết bạn đã có bài kiểm tra đơn vị. Tôi thấy bạn cho phép tạo nhiều lớp. Thật tuyệt. Trong vải, chúng tôi tối ưu hóa theo cách tương tự nhưng chỉ có 2 lớp - một để lựa chọn, một để vẽ - và bên trong (người dùng không thể tạo thêm). Bằng cách nào đó tôi đã bỏ qua Kinetic khi tạo biểu đồ so sánh các thư viện. Chúng ta nên khắc phục điều đó :)
kangax

6
cập nhật: KineticJS hiện đã có trong github: github.com/ericdrowell/KineticJS
Eric Rowell

7
KineticJS so sánh với EaselJS như thế nào? Khi một người nên sử dụng những gì?
geeky_monster

1
muốn chỉ ra rằng KineticJS hỗ trợ vector SVG cũng qua Kinetic.Path () hình dạng html5canvastutorials.com/kineticjs/...
Eric Rowell

2
@EricRowell Mate Tôi yêu KineticJS, tốc độ của nó, kết hợp với GSAP, nhưng điều khiến tôi quay cuồng là có cách nào để tự do biến đổi các đối tượng KineticJS giống như cách trong FabricJS không? Đây là liên kết tham chiếu đến những gì tôi đang cố gắng nói: Fabricjs.com/customization Tôi không muốn sử dụng FabricJs vì nó thực sự chậm và hiệu suất thấp là điều hiển nhiên từ các bài kiểm tra đơn vị khác nhau. Tôi thực sự mong muốn tìm ra cách có thể tự do biến đổi đối tượng trong KineticJS vì nó sẽ giúp cuộc sống dễ dàng hơn rất nhiều. Cảm ơn, Praney
praneybehl

62

Đối với những độc giả gần đây, kể từ tháng 1 năm 2013, tôi đã đánh giá:

  • Kinetic
  • Sợi vải
  • Giấy
  • Giá vẽ

Bằng cách "đánh giá", tôi đã làm nhiều hơn là chỉ đọc tài liệu; Tôi đã tạo một ứng dụng nguyên mẫu.

Tôi bắt đầu với Fabric vì nó dường như có cộng đồng lớn nhất và nghĩ rằng đó sẽ là giải pháp của tôi. Nhưng, tôi đã từ bỏ Fabric vì những lý do sau:

  • sự mâu thuẫn API kỳ lạ và không có tài liệu đã đốt cháy nhiều thời gian của tôi một cách không cần thiết.
  • hỗ trợ sự kiện con trỏ không nhất quán. Cụ thể, Fabric không coi "Đường dẫn" là một đối tượng có hình dạng thực có thể lựa chọn và quan sát được. Điều này không đáp ứng nhu cầu của tôi vì Đường dẫn tương tác là yêu cầu chính của ứng dụng của tôi.
  • hậu trường bổ sung các bản dịch vào Canvas để định vị các đối tượng. Đối với tôi, Fabric cố gắng tỏ ra quá thông minh trong vấn đề này mà không nói rõ cho nhà phát triển biết họ đang làm gì.
  • quan điểm quá mạnh mẽ về cách hoạt động của tính tương tác di chuyển, thay đổi kích thước và xoay. Theo nhiều cách, thật tuyệt khi có chức năng này được tích hợp vào khuôn khổ, nhưng trong trường hợp của tôi, tôi không đồng ý với cách nó được triển khai, điều đó có nghĩa là về cơ bản vẫn phải tự mình thực hiện lại nó.
  • tài liệu thưa thớt - rất nhiều trường hợp trong đó tài liệu về phương pháp có dạng: "setX (Y) - set là X thành Y" :-)

Tôi đã xem qua Paper và không đi quá xa. Nó có vẻ quá khó hiểu đối với tôi và cũng nằm giữa IMO quá phân biệt - quá nhiều thư viện hình ảnh hóa để trở thành một mô hình đối tượng đơn giản cho Canvas nhưng nó không đủ thư viện hình ảnh hóa để cạnh tranh với D3. Thêm vào đó, tài liệu một lần nữa không thể truy cập đặc biệt.

Tôi nghĩ rằng Easel có lẽ có ý nghĩa rất nhiều nếu bạn có nền tảng Flash / ActionScript nhưng tôi thì không. Thêm vào đó, nó có vẻ quá tập trung vào trò chơi cho các yêu cầu của tôi. Chiếc đinh trong quan tài lại là tài liệu - không đủ và được trình bày ở định dạng không chuẩn.

Vì vậy, tôi đã kết thúc với Kinetic vì:

  • các hướng dẫn và ví dụ thực sự phong phú và rõ ràng
  • Các hàm API thực hiện những gì chúng được gọi và phần lớn có thể đoán được - năng suất nhanh hơn, đường cong học tập nông hơn
  • rõ ràng một cách hợp lý về những gì nó làm và những gì nó không - nó không giàu như một số công ty khác nhưng đó là một lợi ích; nó làm ít việc hơn nhưng chúng tốt hơn
  • Đường dẫn là Hình dạng công dân hạng nhất, giống như bất kỳ Hình dạng nào khác, rất cần thiết cho các yêu cầu của tôi.

Kinetic không hoàn hảo theo bất kỳ phương tiện nào và đã có một vài lần tôi phải đi sâu vào mã nguồn để tìm ra những gì thực sự đang diễn ra. Thêm vào đó, tôi nhớ phân tích cú pháp SVG và đầu ra của Fabric.


1
Cảm ơn câu trả lời này, đã tiết kiệm cho tôi rất nhiều thời gian. Tôi sẽ đi với Kinetic, và hy vọng bạn khám phá những gì bạn đã nói.
Bashevis

Tôi đã thực hiện kiểm tra người dùng không khoa học về các bản trình diễn kéo và thả được cung cấp cho các thư viện ở trên trên iPad3 và Samsung Galaxy Tab2. KineticJS xuất hiện như một người chiến thắng rõ ràng cũng ở đây, phản hồi nhanh hơn và chính xác hơn trong việc định vị cảm ứng của nó.
Per Quested Aronsson

1
Tôi đang đánh giá cả hai, và hiện tại, thật lòng thì vảijs dường như đã hoàn thiện hơn và được ghi chép đầy đủ.
albanx

9
Jeremy, tôi muốn nghe thêm về sự không nhất quán của API trong Fabric. Tôi cố gắng làm cho nó trở nên trực quan nhất có thể để nếu có điều gì đó vẫn còn kỳ lạ, tôi chắc chắn muốn xử lý nó. Bạn có thể gửi một vé hoặc đề cập đến nó ở đây? Các tài liệu đã được cải thiện kể từ tháng Giêng, mặc dù vẫn không tốt như tôi muốn. Ý kiến ​​mạnh mẽ về tính tương tác - tôi đoán bạn có thể nói như vậy, mặc dù bạn có thể thực hiện khá nhiều điều chỉnh. Chính xác thì bạn muốn điều gì khác biệt? Cuối cùng, các sự kiện con trỏ - không chắc bạn muốn nói gì. Con đường chắc chắn là một hình dạng thật: fabricjs.com/quadratic-curve
kangax

23

Tôi rất muốn giới thiệu pixijs. Đó là một thư viện canvas hiệu suất cao.

Pixi.js là một trình kết xuất webGL 2D với một canvas dự phòng liền mạch cho phép nó hoạt động trên tất cả các trình duyệt hiện đại cả máy tính để bàn và thiết bị di động.

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


3
Kể từ tháng 7 năm 2014, đây có vẻ như là thư viện canvas tốt nhất hiện có. Với 4k người đã gắn dấu sao nó trên Github và nó được các công ty và đại lý lớn sử dụng. pixijs.com/projects như Google.
Vennsoh
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.