การวาดรูปทรงสี่เหลี่ยมด้วย KonvaJS

เพื่อที่จะสร้างรูปทรงสี่เหลี่ยมด้วย KonvaJS นั้น  เราจะใช้ Konva.Rect() ครับ. สำหรับรายละเอียดวิธีการใช้แอตทริบิวต์และเมธอดสามารถดูได้จากที่นี่ครับ API Document : http://konvajs.github.io/docs/shapes/Rect.html

ตัวอย่าง แทคที่ใช้

ตัวอย่าง : วาดรูปทรงสี่เหลี่ยม

      var stage = new Konva.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Konva.Layer();

      var rect = new Konva.Rect({
        x: 239,          // กำหนดแนวแกน x
        y: 75,           // กำหนดแนวแกน y
        width: 100,      // กำหนดความกว้าง
        height: 50,      // กำหนดความสูง
        fill: 'green',    // ใส่สีพื้น
        stroke: 'black', // กำหนดสีเส้น
        strokeWidth: 4   // กำหนดขนาดเส้น
      });

      // เพิ่ม rect เข้าไปใน layer
      layer.add(rect);

      // เพิ่ม layer เข้าไปใน stage
      stage.add(layer);

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

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.