GraphicsJS ช่วยให้คุณสร้างกราฟิกเว็บใด ๆ ที่คุณสามารถจินตนาการ

Custom JavaScript APIs คืออนาคตของเว็บ การเคลื่อนไหวโอเพนซอร์ซ ควบคู่ไปกับการ กราฟิก SVG ได้ปลื้มเปิดโอกาสสำหรับนักพัฒนาเว็บ.

GraphicsJS เป็นไลบรารีโอเพนซอร์สและ JS API ฟรี สร้างกราฟิกที่กำหนดเอง ในเว็บเบราว์เซอร์ มันสามารถใช้เป็น เครื่องมือสร้างภาพ สำหรับการสร้างกราฟข้อมูลหรือสามารถใช้สำหรับการทำสิ่งดีๆ เพียงเพื่ออวด.

ในหน้าแรกคุณจะพบ ส่วนใหญ่ของการสาธิต สร้างด้วย GraphicsJS และตัวอย่างเหล่านี้เป็นเพียงรอยขีดข่วนพื้นผิวของสิ่งที่เป็นไปได้.

ห้องสมุด ใช้ DOM เสมือนของตัวเอง ซึ่งเป็นนามธรรมของ DOM ของเบราว์เซอร์ อันนี้ค่อนข้าง คล้ายกับ DOM เสมือนของ React และมันถูกใช้ในลักษณะที่คล้ายกัน.

เนื่องจากไลบรารีนี้ใช้โคลนของ DOM จึงเป็นเช่นนั้น ต้องการองค์ประกอบ HTML จริง ในการทำงานกับ นั่นเป็นเหตุผลว่าทำไม ใช้ SVG / VML มากกว่าวัตถุที่ฝังตัวในผ้าใบ HTML5.

เอ็นจิ้นกราฟิกนี้คือ สร้างขึ้นครั้งแรกในไลบรารี AnyChart. จากตรงนั้นมันก็เป็น เอ็นดู และ open-sourced เป็น JS API ของตัวเอง.

GraphicsJS รองรับเบราว์เซอร์ที่สำคัญทั้งหมด, แม้ย้อนไปถึง IE6 และ Chrome 1.0.

รหัสแหล่งที่มาทั้งหมด มีอยู่ใน repo ของ GitHub ซึ่งคุณสามารถดาวน์โหลดสำเนาและกระตุ้นหากคุณมีเวลา แต่ฉันคิดว่าวิธีที่ดีที่สุดในการเรียนรู้คือการดำน้ำในอันดับแรก.

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

หากคุณเพิ่งเริ่มต้นคุณสามารถ เยี่ยมชมสนามเด็กเล่น โฮสต์บนเว็บไซต์ของ AnyChart นี่เป็นสถานที่ที่ดีในการค้นหา ตัวอย่างรหัสการทำงาน เพื่อทำลายไวยากรณ์.

หรือถ้าคุณต้องการเริ่มต้นด้วยหนึ่งตารางแล้ว คู่มือการเริ่มต้น GraphicsJS สามารถช่วย. นี่เป็นเหมือน “เป็นทางการ” เอกสารประกอบดังนั้นมันจะจับมือคุณไว้เพื่อ เส้นโค้งการเรียนรู้ที่ราบรื่น เทียบกับเอกสาร API.

ฉันชอบที่ GraphicsJS เปิดแหล่งที่มาและเปิดตัวในชุมชนนักพัฒนา มันไกลจากห้องสมุดที่สมบูรณ์แบบ แต่เป็นหนึ่งในสิ่งที่ดีที่สุดที่เรามี การสร้างกราฟิก SVG ที่กำหนดเองตั้งแต่เริ่มต้น.

และเพื่อให้การเปลี่ยนเกียร์ของคุณอยู่ด้านล่างคุณจะเห็นตัวอย่างของสิ่งที่คุณสามารถสร้างด้วย Graphics.js.