การสร้าข้อความแบบเส้นโค้งด้วย KonvaJS

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

var stage = new Konva.Stage({     container: 'container',     width: window.innerWidth,     height: window.innerHeight   });   var layer = new Konva.Layer();     var textpath = new Konva.TextPath({   x: 10,    // กำหนดจุดวาดตามแนวแกน x   y: 50,    // กำหนดจุดวาดตามแนวแกน y   text: 'All the world\'s a stage, and all the men and women merely players.', // ข้อความ   fontSize: 18,   // ขนาดตัวหนังสือ   fontFamily: 'Calibri',   // ประเภท font   fill: 'green',  // ใส่สีให้ข้อความ   data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50' // ข้อมูลแบบ SVG });   // เพิ่มรูปเข้าไปใน layer layer.add(textpath);   // เพิ่ม 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.