การสร้างข้อความด้วย KonvaJS

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

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

ตัวอย่าง : การสร้างข้อความ

      var stage = new Konva.Stage({
        container: 'container',
        width: 340,
        height: 300
      });
      var layer = new Konva.Layer();
   
      var simpleText = new Konva.Text({
      x: stage.getWidth() / 2,  // กำหนดจุดวาดตามแนวแกน x
      y: 15,    // กำหนดจุดวาดตามแนวแกน y
      text: 'ข้อความทั่วไป', // ข้อความ
      fontSize: 30,   // ขนาดตัวหนังสือ
      fontFamily: 'Calibri',   // ประเภท font
      fill: 'green'  // ใส่สีให้ข้อความ
    });
    
    // หากต้องการที่จะวางข้อความไว้ตรงจุดกึ่งกลางของหน้าจอ เราสามารถทำได้โดยการ
    // กำหนดค่า offset ของ shape ให้อยู่ตรงจุดกึ่งกลางหลังจากที่ตัว Konva.Text () โหลดเสร็จแล้ว.
    simpleText.setOffset({
      x: simpleText.getWidth() / 2
    });

    // สร้างข้อความแบบซับซ้อน
    var complexText = new Konva.Text({
      x: 20,   // กำหนดจุดวาดตามแนวแกน x
      y: 60,   // กำหนดจุดวาดตามแนวแกน y
      text: 'ข้อความแบบซับซ้อน\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.', // ข้อความ
      fontSize: 18,  // ขนาดตัวหนังสืิอ
      fontFamily: 'Calibri',  // ประเภท font
      fill: '#555',  // ใส่สีให้ข้อความ
      width: 300,  // ความกว้างของข้อคววาม
      padding: 20,   // ช่องว่าระหว่างขอบกับข้อความ
      align: 'center'   // วางข้อความไว้ที่จุดกึ่งกลาง
    });

    // สร้างสี่เหลี่ยมครอบข้อความ
    var rect = new Konva.Rect({
      x: 20,   // กำหนดจุดวาดตามแนวแกน x
      y: 60,   // กำหนดจุดวาดตามแนวแกน y
      stroke: '#555',   // สีเส้น
      strokeWidth: 5,   // ขนาดของเส้น
      fill: '#ddd',  // สีพื้นภายในสี่เหลี่ยม
      width: 300,  // ขนาดความกว้าง
      height: complexText.getHeight(), // ขนาดความสูง ให้สูงตามขนาดของข้อความ
      shadowColor: 'black',  // สีของเงา
      shadowBlur: 10,        // ความเบลอของเงา
      shadowOffset: [10, 10],  // ตำแหน่งที่แสดงของเงา
      shadowOpacity: 0.2,    // ความคมชัดของเงา
      cornerRadius: 10       // รัศมีของมุมสี่เหลี่ยม
    });

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

    // เพิ่ม 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.