SVG paths

Nếu bạn muốn nâng cao Lightscript của mình, việc thêm nền có thể là một cách ấn tượng để làm điều đó. Có nhiều cách tiếp cận khác nhau, nhưng đơn giản và hiệu quả nhất cho đến nay là sử dụng SVG paths.

SVG paths có thể được tạo tương đối dễ dàng bằng Adobe Illustrator. Tốt nhất là bắt đầu với một hình ảnh PNG thông thường cần được đơn giản hóa thành SVG path. Khi bạn tìm được hình ảnh nền, hãy tạo một dự án Illustrator mới bằng cách nhấp vào New và chọn cài đặt đặt sẵn Web Large.

Sau đó nhập hình ảnh tham chiếu vào canvas mới bằng cách nhấp vào File -> Place trong thanh công cụ và chọn hình ảnh trong cửa sổ pop-up.

Thường thì canvas lớn hơn nhiều so với hình ảnh được nhập. Để khắc phục điều này, nhấp vào Object -> Artboards -> Fit to Artwork Bounds.

Sau đó chọn phần hình ảnh cần được cô lập thành path. Hình ảnh SVG bao gồm các đa giác được xác định bởi đường path viền của chúng. Các đa giác này sau đó có thể được tô màu hoặc gradient bằng JS Canvas API.

Trong ví dụ này, đường viền của ao được phác thảo và tô bằng một màu đơn sắc. Đầu tiên chọn công cụ bút bằng cách nhấn P trên bàn phím. Nhấp vào một điểm dọc theo đường viền của hình dạng bạn đang vẽ, sau đó thêm nhiều điểm hơn cho đến khi bạn có một path liên tục cùng hình dạng và kích thước với hình dạng đã chọn. Màu của hình dạng này không quan trọng, vì màu được đặt riêng trong code JavaScript.

Khi bạn hài lòng với path, hãy xuất nó bằng cách nhấp vào File -> Export -> Export As. Hãy chắc chắn chọn loại tệp SVG.

Trong cửa sổ tiếp theo, đảm bảo rằng Image được đặt thành Link, sau đó nhấp vào tùy chọn Show Code.

Trong cửa sổ Notepad mở ra, tìm thẻ <polygon> và sao chép toàn bộ nội dung của thuộc tính points. Đây phải là một chuỗi dài các số. Sau đó nhấp vào Cancel, vì bây giờ bạn đã có tất cả dữ liệu cần thiết.

Để vẽ hình ảnh dựa trên path trên canvas của hiệu ứng, hãy khai báo hai hằng số mới. Đầu tiên khai báo hằng số được đặt thành chuỗi đã sao chép trước đó.

Mẹo

Ví dụ: 351 396.5 440 435.5 501.84 sẽ trở thành M351 396.5 440 435.5 501.84.

Sau đó tạo một path mới với new Path2D(path), trong đó path là tên của hằng số đầu tiên.

Hình ảnh này bây giờ có thể được vẽ bằng cách gọi ctx.fill(path2d), trong đó path2d là tên của path được khai báo ở bước trước.

Để đặt màu của hình dạng, hãy gọi ctx.fillStyle(color) trước khi vẽ hình ảnh. Hàm này chấp nhận mã màu hex, tên màu CSS, hàm màu CSS và gradient làm đối số.

Bạn cũng có thể sử dụng tất cả các hiệu ứng biến đổi canvas như scale và translate. Để đảm bảo rằng các phép biến đổi chỉ được áp dụng cho hình ảnh hiện tại, hãy gọi ctx.setTransform(1,0,0,1,0,0) sau khi vẽ mỗi lớp.

Ví dụ sau đây cho thấy cách vẽ một hình ảnh SVG đơn giản dựa trên path. Kỹ thuật này có thể được lặp lại bao nhiêu lần tùy thích để tạo ra các nền phức tạp.

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

// Aus Illustrator kopierte Daten. Sicherstellen, dass das erste Zeichen M ist.
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";
// Einen neuen Path2D aus den Daten erstellen.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optionale Canvas-Transformation. ctx.translate(x,y) kann auch verwendet werden, um den neuen Pfad zu verschieben.
  ctx.fillStyle = "blue"; // Farbe des Pfades festlegen. Hier können auch Verläufe verwendet werden.
  ctx.fill(pondPath); // Pfad zeichnen.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Transformation zurücksetzen, sodass sie nur diesen Pfad betrifft.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

Code trên sẽ tạo ra kết quả này: