KonvaJS คืออะไร

หมายเหตุ: KonvaJS โปรเจคเดิมชื่อ KineticJS เพราะฉะนั้นโครงสร้างและรูปแบบการใช้งานเหมือน KineticJS ครับ

KonvaJS คือ  HTML5 Canvas JavaScript framework เป็น framework ที่ใช้จัดการ canvas นั่นเองซึ่งทำให้ผู้ใช้ใช้งาน canvas ได้ประโยชน์มากมาย เช่น

• จัดการได้ง่ายขึ้น สะดวกมากขึ้น
• ลดจำนวนโคด
• ง่ายต่อการทำความเข้าใจ
• มีประสิทธิภาพดีมากขึ้น
• สามารจัดการโหนดที่มีความซับซ้อนได้
• มีการการกำหนดเป็นเลเยอร์
• สามารถทำการฟิวเตอร์ค้นหาเฉพาะโหนดที่ต้องการได้
• มีการจัดการเรื่อง caching
• มี event รองรับสำหรับ desktop และ mobile
• อื่นๆ.

การวาดรูปทรงต่างใน KonvaJS นั้นเราสามารถลงบน stage หลังจากนั้นเราจะผูก event listeners จากทำการย้าย ,ยุบขยาย หรือ หมุน รูปทรงที่เราสร้างขึ้นแม้ว่าเราจะวาดรูปทรงต่างๆเป็นพันๆก็ยังสามารถแสดงได้อย่างมีประสิทธิภาพ.

โครงสร้างทั่วไปของ Konva
โครงสร้างของ Konva นั้นจะเริ่มต้นด้วยการสร้าง stages ก่อน จากนั้นก็สร้าง layer ต่างๆเพิ่มเข้าไปใน stage ซึ่งแต่ละ layer นั้นจะกลายเป็นแท็ก canvas ตอนแสดงผล. ในแต่ละ layer จะประกอบด้วย canvas renderers สองตัวคือ scene renderer และ hit graph renderer. ตัว scene renderer เป็นตัวแสดงผลที่เราเห็นอยู่ ส่วน hit graph renderer เป็น canvas ตัวพิเศษที่ซ่อนอยู่เพื่อใช้สำหรับเพิ่มประสิทธิภาพในการดักจับ Event. ในแต่ละ layer สามารถมีรูปทรง (shape) ต่างๆได้ ซึ่งโครงสร้างสามารถเป็นได้ตามรูปครับ:

ประกาศแท็ก div ไว้ใน html

ตัวอย่าง

  
      // สร้าง stage ก่อน โดยมีการอ้างอิง div ใน html ด้วย     
      var stage = new Konva.Stage({
        container: 'mycontainer',
        width: 578,
        height: 220
      });
      var layer = new Konva.Layer(); // สร้าง layer

      var text = new Konva.Text({ // สร้างข้อความพร้อมระบุขนาด ฟอนต์ สี
        text: 'Hello KonvaJS',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'blue'
      });
      
      layer.add(text);  // เพิ่มเข้าไปใน layer
      stage.add(layer); // เอา layer เพิ่มเข้าไปใน stage อีกทีตามโครงสร้างรูปด้านบน

ผลลัพธ์ที่ได้

อ้างอิง: ที่นี่

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.