SVG Paths

หากคุณต้องการเพิ่มสีสันให้กับ Lightscript การเพิ่มพื้นหลังเป็นวิธีที่ช่วยดึงดูดสายตาได้ดี มีหลายวิธีในการทำเช่นนี้ แต่วิธีที่ง่ายและมีประสิทธิภาพที่สุดคือการใช้ SVG path

คุณสามารถสร้าง SVG path ได้ค่อนข้างง่ายด้วย Adobe Illustrator วิธีที่ดีที่สุดคือเริ่มจากภาพ PNG ธรรมดาที่คุณต้องการลดทอนให้เป็น SVG path เมื่อคุณได้ภาพพื้นหลังแล้ว ให้สร้างโปรเจกต์ Illustrator ใหม่โดยคลิก New และเลือกพรีเซ็ต Web Large

ถัดไป นำเข้าภาพอ้างอิงของคุณลงใน artboard ใหม่โดยคลิก File -> Place ในแถบเครื่องมือ แล้วเลือกภาพของคุณในหน้าต่างป๊อปอัปที่ปรากฏขึ้น

บ่อยครั้งที่ artboard จะมีขนาดใหญ่กว่าภาพที่คุณนำเข้ามาก หากต้องการแก้ไข ให้คลิกตัวเลือก Object -> Artboards -> Fit to Artwork Bounds

ถัดไป เลือกส่วนของภาพที่คุณต้องการแยกออกมาเป็น path ภาพ SVG ประกอบด้วยรูปหลายเหลี่ยม (polygon) ที่กำหนดโดย path เส้นขอบของมัน จากนั้นรูปหลายเหลี่ยมเหล่านี้สามารถเติมด้วยสีหรือไล่เฉดสีโดยใช้ JS Canvas API

ในตัวอย่างนี้ เราจะลากเส้นตามขอบของบ่อน้ำและเติมด้วยสีทึบ เริ่มต้นด้วยการเลือกเครื่องมือปากกา (pen tool) โดยกด P บนคีย์บอร์ด คลิกจุดหนึ่งบนเส้นขอบของรูปทรงที่คุณต้องการลากตาม แล้วเพิ่มจุดต่อไปเรื่อย ๆ จนได้ path ต่อเนื่องที่มีรูปร่างและขนาดเดียวกับรูปทรงที่คุณเลือก สีของรูปทรงนี้ไม่สำคัญ เนื่องจากคุณจะกำหนดสีแยกต่างหากในโค้ด JavaScript

เมื่อคุณพอใจกับ path แล้ว ให้ส่งออกโดยคลิก File -> Export ->Export As ตรวจสอบให้แน่ใจว่าคุณเลือกประเภทไฟล์ SVG

ในหน้าต่างถัดไปที่เปิดขึ้น ตรวจสอบให้แน่ใจว่าตั้งค่า Image เป็น Link แล้วคลิกตัวเลือก Show Code

ในหน้าต่าง Notepad ที่เปิดขึ้น ให้หาแท็ก <polygon> และคัดลอกแอตทริบิวต์ points ทั้งหมด ซึ่งควรเป็นสตริงตัวเลขยาว ๆ จากนั้นคลิก Cancel เนื่องจากตอนนี้คุณมีข้อมูลทั้งหมดที่ต้องการแล้ว

หากต้องการวาดภาพที่สร้างจาก path ลงบน canvas ของเอฟเฟกต์ ให้ประกาศค่าคงที่ใหม่สองตัว ตัวแรกให้ประกาศเป็นค่าคงที่ที่มีค่าเป็นสตริงที่คุณคัดลอกไว้ก่อนหน้านี้

เคล็ดลับ

ตัวอย่างเช่น 351 396.5 440 435.5 501.84 จะกลายเป็น M351 396.5 440 435.5 501.84

ตอนนี้ ให้สร้าง path ใหม่ด้วย new Path2D(path) โดยที่ path คือชื่อของค่าคงที่ตัวแรกของคุณ

จากนั้นคุณสามารถวาดภาพนี้ได้โดยเรียก ctx.fill(path2d) โดยที่ path2d คือชื่อของ path ที่คุณประกาศไว้ในขั้นตอนก่อนหน้า

หากต้องการกำหนดสีของรูปทรง ให้เรียก ctx.fillStyle(color) ก่อนวาดภาพ ฟังก์ชันนี้รับรหัสสีแบบ hex, ชื่อสี CSS, ฟังก์ชันสี CSS และไล่เฉดสี (gradient) เป็นอาร์กิวเมนต์

คุณยังสามารถใช้เอฟเฟกต์การแปลงของ canvas ได้ครบทุกแบบ เช่น scale และ translate เพื่อให้แน่ใจว่าการแปลงมีผลเฉพาะกับภาพปัจจุบัน ให้ใช้ ctx.setTransform(1,0,0,1,0,0) หลังจากวาดแต่ละเลเยอร์เสร็จ

โค้ดตัวอย่างต่อไปนี้แสดงวิธีวาดภาพ SVG path แบบง่าย คุณสามารถใช้เทคนิคนี้ซ้ำได้หลายครั้งตามต้องการเพื่อวาดพื้นหลังที่ซับซ้อน

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Data copied from Illustrator. Make sure the first character is M.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation. You can also use ctx.translate(x,y) to move the location of the new path.
  ctx.fillStyle = "blue"; // Set color of path. You can also use gradients here.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation so it only affects this path.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

โค้ดด้านบนควรให้ผลลัพธ์ดังนี้: