การสร้าข้อความแบบป้ายกำกับด้วย KonvaJS

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

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

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

      var stage = new Konva.Stage({
        container: 'container',
        width: 300,
        height: 300
      });
      var layer = new Konva.Layer();

    // tooltip
    var tooltip = new Konva.Label({
        x: 170,  // กำหนดจุดวาดตามแนวแกน x
        y: 75,  // กำหนดจุดวาดตามแนวแกน y
        opacity: 0.75  // ความคมชัดของป้ายกำกับ
    });

    tooltip.add(new Konva.Tag({
        fill: 'black',   // ใส่สีให้ Tag
        pointerDirection: 'down', // หัวป้ายกำกับแบบชี้ลง
        pointerWidth: 10,  // ความกว้างของหัวป้ายกำกับ
        pointerHeight: 10,  // ความสูงของหัวป้ายกำกับ
        lineJoin: 'round',  // รูปบบการเชื่อมต่อของเส้น
        shadowColor: 'black',  // สีของเงา
        shadowBlur: 10,  // ความเบลอของเงา
        shadowOffset: 10, // ตำแหน่งของเงา
        shadowOpacity: 0.5 // ความคมชัดของเงา
    }));

    tooltip.add(new Konva.Text({
        text: 'Tooltip pointing down',  // ข้อความ
        fontFamily: 'Calibri',   // ประเภท font
        fontSize: 18,    // ขนาดตัวหนังสือ
        padding: 5,     // ช่องว่างระหว่างขอบกับข้อความ
        fill: 'white'    // ใส่สีให้ข้อความ
    }));

    // label with left pointer
    var labelLeft = new Konva.Label({
        x: 20,  // กำหนดจุดวาดตามแนวแกน x
        y: 130,  // กำหนดจุดวาดตามแนวแกน y
        opacity: 0.75  // ความคมชัดของป้ายกำกับ
    });

    labelLeft.add(new Konva.Tag({
        fill: 'green',   // ใส่สีให้ Tag
        pointerDirection: 'left', // หัวป้ายกำกับแบบชี้ไปทางซ้าย
        pointerWidth: 20,  // ความกว้างของหัวป้ายกำกับ
        pointerHeight: 28,  // ความสูงของหัวป้ายกำกับ
        lineJoin: 'round'  // รูปบบการเชื่อมต่อของเส้น
    }));

    labelLeft.add(new Konva.Text({
        text: 'Label pointing left',  // ข้อความ
        fontFamily: 'Calibri',   // ประเภท font
        fontSize: 18,    // ขนาดตัวหนังสือ
        padding: 5,   // ช่องว่างระหว่างขอบกับข้อความ
        fill: 'white'    // ใส่สีให้ข้อความ
    }));

    // simple label
    var simpleLabel = new Konva.Label({
        x: 180,  // กำหนดจุดวาดตามแนวแกน x
        y: 150,  // กำหนดจุดวาดตามแนวแกน y
        opacity: 0.75  // ความคมชัดของป้ายกำกับ
    });

    simpleLabel.add(new Konva.Tag({
        fill: 'yellow' // ใส่สีให้ Tag
    }));

    simpleLabel.add(new Konva.Text({
        text: 'Simple label',  // ข้อความ
        fontFamily: 'Calibri',  // ประเภท font
        fontSize: 18,   // ขนาดตัวหนังสือ
        padding: 5,  // ช่องว่างระหว่างขอบกับข้อความ
        fill: 'black'   // ใส่สีให้ข้อความ
    }));
    
    // เพิ่มรูปเข้าไปใน layer
    layer.add(tooltip);
    layer.add(labelLeft);
    layer.add(simpleLabel);

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