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

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

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.