สถานะปัจจุบันของไลบรารีผ้าใบ Javascript? [ปิด]

ฉันได้ทำการค้นคว้าเกี่ยวกับไลบรารีผ้าใบ HTML และฉันเจอคำถามนี้ สถานะปัจจุบันของไลบรารี JavaScript และเฟรมเวิร์กของผ้าใบ HTML เป็นอย่างไร ที่ถูกถามในปี 2010 คำตอบอันดับต้น ๆ คือ Fabric.js หลังจากทำการค้นคว้าเพิ่มเติมเล็กน้อยฉันได้พบกับhttp://www.html5canvastutorials.com/ซึ่งมีบทช่วยสอนเกี่ยวกับ KineticJs ซึ่งมีผืนผ้าใบหลายแบบเพื่อความเร็ว การวิจัยเพิ่มเติมเล็กน้อยในภายหลังเปิดเผยว่าไลบรารี Canvas ดูเหมือนจะเต็มไปด้วยความเร็วและคุณสมบัติต่างๆ สถานะปัจจุบันของไลบรารีและเฟรมเวิร์ก JavaScript Canvas ในปัจจุบันเป็นอย่างไร มีหนึ่งออกมาด้านบน?

แก้ไข: เนื่องจากห้องสมุดมีการเปลี่ยนแปลงและเมื่อไม่นานมานี้มีผู้คนจำนวนมากมาที่นี่เพื่อรับข่าวสารและข้อมูลเกี่ยวกับห้องสมุดใหม่ฉันจึงเปลี่ยนคำถามให้เป็นอมตะมากขึ้น

Disclaimer: ผมผู้เขียนของFabric.js

ฉันจะบอกว่า Easel.js, Fabric.js และ Paper.js เป็นหนึ่งในกลุ่มที่ใช้มากที่สุดในขณะนี้ ฉันตัดสินจากจำนวนผู้เฝ้าดู Github สำหรับแต่ละที่เก็บปริมาณการสนทนาใน Google Groups และความถี่ที่ฉันได้ยินเกี่ยวกับพวกเขาที่ใช้เป็นไลบรารีผ้าใบบน Twitter

สิ่งเหล่านี้เป็นเอกสารที่เหมาะสมไม่มากก็น้อยตัวอย่าง / การสาธิตกลุ่มสนทนาและการทดสอบหน่วย (สถานะของการทดสอบในไลบรารีผ้าใบอื่น ๆ ส่วนใหญ่ค่อนข้างน่าเศร้า)

ฉันยังดูแลตารางเปรียบเทียบของไลบรารีแคนวาสต่างๆซึ่งคุณสามารถดูได้ว่าไลบรารีได้รับการอัปเดตขนาดของมันการรองรับ 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: PS ใช้งาน fabric.js ได้อย่างยอดเยี่ยม! นอกจาก KineticJS (แน่นอน) ห้องสมุดโปรดอีกสองแห่งของฉันคือผ้าและกระดาษ

สำหรับผู้อ่านล่าสุด ณ เดือนมกราคม 2013 ฉันได้ประเมิน:

• Kinetic
• ผ้า
• กระดาษ
• ขาตั้ง

ด้วยการ "ประเมิน" ฉันทำมากกว่าอ่านเอกสาร ฉันสร้างแอปต้นแบบ

ฉันเริ่มต้นด้วย Fabric เพราะดูเหมือนว่าจะมีชุมชนที่ใหญ่ที่สุดและคิดว่านั่นจะเป็นทางออกของฉัน แต่ฉันยอมแพ้กับ Fabric ด้วยเหตุผลต่อไปนี้:

• ความไม่สอดคล้องกันของ API ที่แปลกและไม่มีเอกสารซึ่งทำให้เสียเวลาไปมากโดยไม่จำเป็น
• การสนับสนุนเหตุการณ์ตัวชี้ที่ไม่สอดคล้องกัน โดยเฉพาะอย่างยิ่ง Fabric ไม่ถือว่า "Path" เป็นวัตถุรูปทรงที่แท้จริงซึ่งสามารถเลือกและสังเกตได้ สิ่งนี้ไม่ตรงตามความต้องการของฉันเนื่องจากเส้นทางแบบโต้ตอบเป็นข้อกำหนดหลักของแอปของฉัน
• เบื้องหลังการแปลเพิ่มเติมใน Canvas เพื่อวางตำแหน่งวัตถุ สำหรับฉัน Fabric พยายามที่จะฉลาดเกินไปในเรื่องนี้โดยไม่ต้องแจ้งให้ผู้พัฒนาทราบว่ากำลังทำอะไรอยู่
• ความคิดเห็นที่รุนแรงเกินไปเกี่ยวกับวิธีการเคลื่อนไหวปรับขนาดและหมุนการโต้ตอบ ในหลาย ๆ วิธีเป็นเรื่องดีที่มีการสร้างฟังก์ชันนี้ไว้ในเฟรมเวิร์ก แต่ในกรณีของฉันฉันไม่เห็นด้วยกับวิธีการใช้งานซึ่งหมายความว่าโดยพื้นฐานแล้วต้องนำมาใช้ใหม่ด้วยตัวเองอยู่ดี
• เอกสารกระจัดกระจาย - หลายกรณีที่เอกสารของวิธีการเป็นรูปแบบ: "setX (Y) - ตั้งค่า X เป็น Y" :-)

ฉันมองไปที่ Paper และไม่ได้ไกลเกินไป ดูเหมือนว่าฉันจะปวกเปียกมากเกินไปและอยู่ระหว่าง IMO ที่มีอุจจาระมากเกินไป - ห้องสมุดการแสดงภาพมีมากเกินไปที่จะเป็นแบบจำลองวัตถุอย่างง่ายสำหรับ Canvas แต่ไลบรารีการแสดงภาพไม่เพียงพอที่จะแข่งขันกับ D3 นอกจากนี้เอกสารอีกครั้งก็ไม่สามารถเข้าถึงได้โดยเฉพาะ

ฉันคิดว่า Easel น่าจะสมเหตุสมผลมากถ้าคุณมีพื้นหลัง Flash / ActionScript แต่ฉันไม่ทำ นอกจากนี้ดูเหมือนว่าจะเน้นเกมมากเกินไปสำหรับความต้องการของฉัน เล็บในโลงศพเป็นเอกสารอีกครั้ง - ไม่เพียงพอและนำเสนอในรูปแบบที่ไม่ได้มาตรฐาน

ดังนั้นฉันจึงไปกับ Kinetic เพราะ:

• บทแนะนำและตัวอย่างที่สมบูรณ์และชัดเจนจริงๆ
• ฟังก์ชั่น API ทำในสิ่งที่เรียกและคาดเดาได้ส่วนใหญ่ - ผลผลิตเร็วขึ้นเส้นโค้งการเรียนรู้ที่ตื้นขึ้น
• มีความชัดเจนพอสมควรเกี่ยวกับสิ่งที่ทำและสิ่งที่ไม่ทำ - มันไม่ได้ร่ำรวยเหมือนคนอื่น ๆ แต่นั่นเป็นประโยชน์ ทำได้น้อยลง แต่ทำได้ดีกว่า
• เส้นทางเป็นรูปร่างพลเมืองชั้นหนึ่งเช่นเดียวกับรูปร่างอื่น ๆ ซึ่งจำเป็นสำหรับความต้องการของฉัน

Kinetic ไม่สมบูรณ์แบบด้วยวิธีการใด ๆ และมีอยู่สองสามครั้งที่ฉันต้องดำลึกลงไปในซอร์สโค้ดเพื่อหาสิ่งที่เกิดขึ้นจริงภายใต้ฝาครอบ นอกจากนี้ฉันพลาดการแยกวิเคราะห์ SVG และผลลัพธ์ของ Fabric

ฉันอยากจะแนะนำ Pixijs ไลบรารีแคนวาสประสิทธิภาพสูง

Pixi.js เป็นโปรแกรมแสดงผล webGL 2 มิติที่มีทางเลือกผ้าใบที่ไร้รอยต่อซึ่งช่วยให้สามารถทำงานได้กับเบราว์เซอร์สมัยใหม่ทั้งหมดทั้งเดสก์ท็อปและมือถือ

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