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

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

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

ตัวอย่าง : การสร้าข้อความแบบเส้นโค้ง

      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.