Ảnh SVG trong p5.js: tải, co giãn và giữ nguồn

Để tải ảnh SVG trong p5.js 2.3.4, dùng await loadImage('emblem.svg') bên trong async function setup(), rồi vẽ ảnh được trả về bằng image(). Phục vụ trang và SVG qua HTTP. Giữ tệp SVG làm bản chính có thể chỉnh sửa: cách tải ảnh này vẽ một p5.Image lên Canvas và không cung cấp cho bản phác các đường dẫn SVG có thể chỉnh sửa. Tài liệu tham khảo loadImage hiện tại mô tả cách tải dựa trên Promise.

Tải thành công chỉ trả lời câu hỏi đầu tiên. Kiểm tra khoảng trống có còn trong suốt không, ảnh có bị kéo giãn không và kích thước pixel đã tải có phù hợp với kích thước hiển thị lớn nhất không. Ví dụ bên dưới dùng một hình thoi bo tròn gốc có lỗ và vẽ nó ở 48, 120 và 240 pixel.

Chọn hiển thị ảnh hay hình học nguồn

Hướng dẫn này cố định p5.js 2.3.4 và bộ kết xuất P2D. Nó dùng API bất đồng bộ hiện tại thay vì sao chép mã khởi đầu preload() từ hướng dẫn 1.x. createCanvas tạo Canvas của bản phác và hỗ trợ chọn bộ kết xuất tường minh.

Trong phiên bản này, phần triển khai tải ảnh vẽ ảnh trình duyệt đã tải vào Canvas nền của một p5.Image. Điều đó giải thích vì sao chỉ giữ phần mở rộng .svg và phóng to cách hiển thị Canvas không đủ để giữ khả năng chỉnh sửa dựa trên đường dẫn bên trong bản phác.

Lưu SVG gốc có khoảng trống thực sự

Lưu tệp này thành emblem.svg. Nó có một đường dẫn, không có bitmap nhúng, kích thước khai báo 120 × 120 và viewBox tương ứng. Hình thoi bo tròn ngoài và hình thoi trong là hai đường bao bên trong đường dẫn đó. fill-rule="evenodd" để phần giữa không được tô; tài liệu tham khảo fill-rule của MDN giải thích cách quy tắc đó xác định vùng được tô.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>

Khoảng trống không phải hình thoi trắng được đặt lên trên hình màu san hô. Sự khác biệt này quan trọng khi nền của bản phác thay đổi. Nếu tệp có sẵn chứa phần tử <image>, hãy kiểm tra bằng danh sách kiểm tra raster nhúng trước khi cho rằng toàn bộ hình gồm các đường dẫn có thể chỉnh sửa.

Tải bằng setup bất đồng bộ

Lưu trang hoàn chỉnh này thành example.html cạnh emblem.svg, rồi phục vụ thư mục bằng máy chủ HTTP cục bộ. Chẳng hạn, chạy python3 -m http.server 8000 trong thư mục và mở http://localhost:8000/example.html trong trình duyệt.

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>

Khối trạng thái xuất hiện sau khi tải và báo phiên bản p5, kích thước ảnh đã tải cùng hai mẫu pixel nguồn. Mẫu ở giữa kiểm tra độ trong suốt; mẫu màu san hô kiểm tra phần đục của vòng. Các lệnh vẽ dùng chung một ảnh đã tải. Chúng không tải lại hay sửa SVG giữa các kích thước hiển thị.

Tài liệu tham khảo image phân biệt nội dung nguồn với chiều rộng và chiều cao đích. Ở đây mỗi chiều cao đích được tính từ art.height / art.width, nên ảnh thay thế không vuông cũng giữ được tỷ lệ. Giữ cả hai kích thước trong phép tính đó khi bạn đổi chiều rộng hiển thị.

Ví dụ đặt pixelDensity(1) để việc so sánh Canvas rõ ràng. Ghi lại mật độ mà bản phác thực tế dùng; giá trị mặc định có thể theo màn hình. Tăng mật độ Canvas không dựng lại các đường dẫn vốn đã trở thành ảnh được tải.

Kiểm thử trình duyệt cho thấy điều gì

Chúng tôi chạy tệp gốc và mã khởi đầu này trong Chrome với p5.js 2.3.4, P2D và mật độ pixel 1. Ảnh đã tải là 120 × 120. Mẫu ở giữa là [0, 0, 0, 0], còn mẫu màu san hô bên trong là [235, 112, 90, 255]. Nền nhạt của bản phác vẫn nhìn thấy qua khoảng trống ở cả ba kích thước đích.

Những quan sát đó mô tả tệp tự tạo, trình duyệt, phiên bản và bộ kết xuất này. Chúng không phải kết quả tương thích cho mọi SVG đã xuất, bộ lọc, phông chữ hay môi trường chạy bên thứ ba.

Nguồn có thể chỉnh sửa và hiển thị Canvas

Dữ liệu đường dẫn nguồn giữ nguyên trong suốt kiểm thử. Vẽ ảnh ở mức 2× tác động đến cách hiển thị, không phải thuộc tính d trong emblem.svg. Lưu bản chính đó cùng dự án để sau này có thể chuẩn bị ảnh bàn giao khác.

Sửa theo triệu chứng bạn thấy

Ảnh không bao giờ xuất hiện

Kiểm tra URL SVG có truy cập được từ trang đang được phục vụ không và loadImage() đã hoàn thành trước khi image() chạy chưa. try/catch của mã khởi đầu đưa lỗi tải vào khối trạng thái. Ảnh từ xa cũng có thể thất bại do hạn chế bảo mật trình duyệt, như tài liệu loadImage lưu ý. Bắt đầu với tệp cùng nguồn mà bạn kiểm soát để tách vấn đề tải khỏi vấn đề hình.

Mở riêng SVG trong trình duyệt. Nếu hình thức cũng sai ở đó, hãy sửa nguồn trước. PNG đổi tên không trở thành tài liệu SVG, và lớp bao SVG quanh bitmap không tạo ra các đường bao còn thiếu.

Ảnh trông bị kéo giãn

So sánh tỷ lệ đích với art.width / art.height. Chẳng hạn, vẽ ảnh vuông vào đích 240 × 120 sẽ chủ đích làm nó rộng gấp đôi so với chiều cao. Dùng phép tính tỷ lệ trong mã khởi đầu khi không muốn kéo giãn. Nếu bản thân nguồn có quá nhiều khoảng trống, kiểm tra vùng vẽ và viewBox trước khi phóng to hiển thị để bù lại.

Các cạnh phóng lớn trông mềm

Kiểm tra kích thước ảnh đã tải, không chỉ kích thước Canvas. Trong kiểm thử của chúng tôi, ảnh 120 × 120 được vẽ vào đích 240 × 240. Đổi các đối số đích đó không chạy lại các đường cong SVG qua một lần tải ảnh mới.

Chuẩn bị SVG bàn giao với kích thước tường minh phù hợp mục đích, tải lại và kiểm tra art.width cùng art.height thu được trước khi chấp nhận. Giữ nguyên hệ tọa độ và đường bao nguồn. Sau đó so sánh kích thước nhỏ nhất và lớn nhất trên màn hình: nhiều pixel tải hơn không thể làm khoảng trống nhỏ trở nên dễ thấy khi hiển thị cuối quá nhỏ.

Nếu bản phác cần thao tác hình học thay vì vẽ ảnh, hãy lên kế hoạch riêng. Hướng dẫn Canvas Path2D trình bày cách làm việc với dữ liệu đường dẫn, còn hướng dẫn SVG PixiJS so sánh cách dùng hình học và kết cấu của bộ máy đó. Các API này không thể dùng thay cho loadImage() của p5.

Phần giữa trắng thay vì trong suốt

Kiểm tra SVG gốc xem có nền được tô hoặc hình trắng bên trong không. Trong nguồn này, đường bao evenodd để lại lỗ và alpha giữa đã tải bằng 0. Lặp lại kiểm tra với tệp của bạn trên nền bản phác tương phản; trang xem trước màu trắng có thể giấu sự khác biệt.

Giữ việc xuất Canvas riêng với bản chính SVG

Tài liệu tham khảo saveCanvas tiêu chuẩn liệt kê đầu ra ảnh PNG, WebP và JPG. Lưu Canvas đã được vẽ qua API đó không khôi phục đường dẫn SVG gốc. Giữ emblem.svg riêng khi cần chỉnh sửa đường bao về sau hoặc tệp bàn giao dựa trên đường dẫn. Ảnh chụp Canvas trông mượt không xác lập một quy trình xuất SVG có thể chỉnh sửa.

PerfectVector phù hợp ở bước trước khi hình minh họa chỉ tồn tại dưới dạng PNG hoặc JPG phẳng và bạn cần đường bao nguồn để sửa. Chuyển ảnh thành SVG, kiểm tra đường viền và không gian âm trong trình chỉnh sửa SVG, rồi lặp lại việc tải p5 và kiểm tra kích thước thực tế. Dùng trực tiếp SVG sạch có sẵn. Đồ lại không đổi API ảnh của p5 hay biến đầu ra Canvas thành tài liệu đường dẫn SVG. Hướng dẫn vector hóa rộng hơn giải thích bước chuẩn bị nguồn đó.

Giữ bản chính, ghi lại phiên bản p5 và kích thước đã tải, và chỉ chấp nhận tài nguyên sau khi khoảng trống cùng cạnh hoạt động tốt ở các kích thước bản phác sử dụng.

Câu hỏi thường gặp

p5.js có thể tải SVG bằng loadImage không? Có. Ví dụ p5.js 2.3.4 P2D này tải SVG gốc bằng await loadImage bên trong setup bất đồng bộ. Kiểm thử hình thức và kích thước đã tải của tệp của bạn thay vì xem một lần tải thành công là tương thích SVG đầy đủ.

Ảnh SVG đã tải trong p5 còn chỉnh sửa như đường dẫn được không? Cách tải ảnh trả về p5.Image và vẽ nó lên Canvas. Giữ SVG gốc riêng để chỉnh sửa đường dẫn nguồn. Hiển thị ảnh Canvas không cung cấp DOM SVG có thể chỉnh sửa cho hình đã tải.

Tại sao SVG p5 của tôi mờ khi phóng to? So sánh kích thước ảnh đã tải với kích thước đích. Ảnh 120 × 120 đã tải của chúng tôi trông mềm hơn ở 240 × 240. Chuẩn bị nguồn bàn giao có kích thước phù hợp, tải lại và kiểm tra kết quả thực tế.

saveCanvas có xuất SVG gốc không? API saveCanvas tiêu chuẩn mô tả đầu ra PNG, WebP và JPG. Bảo toàn bản chính SVG gốc hoặc xác minh quy trình kết xuất và xuất SVG riêng để có đầu ra dựa trên đường dẫn.

Nguồn tham khảo

1. p5.js loadImage — Mô tả tải ảnh dựa trên Promise và các hạn chế trình duyệt.
2. Bản phát hành p5.js 2.3.4 — Xác định phiên bản cố định và tập lệnh CDN chính thức.
3. p5.js createCanvas — Mô tả tạo Canvas và chọn bộ kết xuất.
4. Mã nguồn tải ảnh p5.js 2.3.4 — Cho thấy ảnh đã tải được vẽ vào Canvas nền của p5.Image.
5. MDN fill-rule — Giải thích cách evenodd xác định vùng được tô của đường dẫn phức hợp.
6. p5.js image — Định nghĩa vị trí ảnh và kích thước đích.
7. p5.js pixelDensity — Mô tả mật độ pixel của bản phác và giá trị mặc định phụ thuộc màn hình.
8. p5.js saveCanvas — Liệt kê các định dạng xuất ảnh Canvas tiêu chuẩn.