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

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

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

?

1 2	<div id="container"> </div>

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

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.