Nhập SVG Fabric.js: Giữ hình chỉnh sửa được trên canvas

Để nhập SVG chỉnh sửa được vào Fabric.js, chờ loadSVGFromString() hoặc loadSVGFromURL(), rồi thêm các đối tượng trả về vào canvas. Giữ tham chiếu đến phần muốn sửa, đổi màu tô và xuất bằng canvas.toSVG(). Tải phần hình thành ảnh cho mô hình chỉnh sửa khác: chọn ảnh đó không làm từng vùng màu xuất hiện dưới dạng hình riêng.

Khác biệt này quan trọng với công cụ tùy chỉnh sản phẩm, chỉnh huy hiệu hoặc biểu tượng đổi màu được. Bạn cần đối tượng tương ứng với các phần người dùng có thể đổi. Tệp kết thúc bằng .svg không đảm bảo cấu trúc đó.

Hướng dẫn này dùng Fabric.js 7.4.0 và một chiếc đèn nhỏ tạo bằng tay. Nó thử ba hình qua nhập, đổi màu và xuất. Đây là mẫu mã tự tạo, không phải chuyển đổi PerfectVector hay tuyên bố mọi tính năng SVG giữ được qua cùng quy trình.

Chọn mô hình đối tượng trước bộ tải

Fabric.js phân tích SVG thành các đối tượng canvas riêng. Bạn sửa chúng qua API Fabric; chúng không phải phần tử DOM SVG trực tiếp bên trong canvas. Tài liệu loadSVGFromString hiện tại mô tả promise trả kết quả phân tích và reviver nhận từng phần tử nguồn cùng đối tượng được tạo.

Đừng suy ra cấu trúc đối tượng từ diện mạo. Hai màu có thể thuộc các đường dẫn riêng, trong khi nhiều mảnh rời có thể thuộc một đường dẫn. Hướng dẫn tách nhóm SVG giải thích chẩn đoán tệp nguồn đó.

Chạy ví dụ nhỏ về nhập, đổi màu và xuất

Bắt đầu trong thư mục trống. Cài thư viện phụ thuộc cố định:

npm install --save-exact fabric@7.4.0

Lưu thành index.html:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Fabric SVG import test</title>
<canvas id="editor" width="320" height="240"></canvas>
<button id="recolor">Recolor shade</button>
<button id="export">Export SVG</button>
<div id="output"></div>
<pre id="report"></pre>
<script type="module" src="main.js"></script>
</html>

Lưu thành main.js. Đường dẫn mô-đun tương đối cho phép ví dụ nhỏ chạy không có bundler. Trong ứng dụng được đóng gói, import cùng các tên từ fabric.

import { Canvas, loadSVGFromString } from './node_modules/fabric/dist/index.min.mjs';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
  <path id="shade" fill="#e6a23c" d="M115 40 H205 L230 135 H90 Z"/>
  <rect id="stem" x="151" y="135" width="18" height="57" fill="#214c54"/>
  <path id="base" fill="#214c54" d="M110 192 H210 L220 210 H100 Z"/>
</svg>`;
const canvas = new Canvas('editor', { width: 320, height: 240 });
const parts = new Map();
const parsed = await loadSVGFromString(svg, (element, object) => {
  const id = element.getAttribute('id');
  if (id) parts.set(id, object);
});
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();
function report(exported) {
  const xml = new DOMParser().parseFromString(exported, 'image/svg+xml');
  const data = {
    version: '7.4.0',
    importedObjects: canvas.getObjects().length,
    types: canvas.getObjects().map(object => object.type),
    shadeFill: parts.get('shade').fill,
    exportedPaths: xml.querySelectorAll('path').length,
    exportedRects: xml.querySelectorAll('rect').length,
    exportedImages: xml.querySelectorAll('image').length,
  };
  document.querySelector('#report').textContent = JSON.stringify(data, null, 2);
  document.querySelector('#output').innerHTML = exported;
}
document.querySelector('#recolor').onclick = () => {
  parts.get('shade').set('fill', '#397e86');
  canvas.requestRenderAll();
  document.querySelector('#report').textContent = 'Shade recolored. Export to check delivery SVG.';
};
document.querySelector('#export').onclick = () => report(canvas.toSVG());
report(canvas.toSVG());

Phục vụ thư mục qua HTTP thay vì mở tệp HTML trực tiếp. Chẳng hạn nếu có Python, chạy python3 -m http.server 8000 và mở http://localhost:8000. Bấm Recolor shade, rồi Export SVG. Nút kết xuất chuỗi đã xuất bên dưới canvas; không tải tệp xuống.

Demo này chỉ chèn bản xuất của mẫu cố định riêng vào phần xem trước. Đừng tái sử dụng phần xem trước innerHTML này làm trình xử lý tải lên chung cho SVG không đáng tin. Ví dụ cũng bỏ qua xử lý lỗi cấp ứng dụng và xác thực tệp.

Map ghi lại ID nguồn trong lúc phân tích. Đổi màu tìm chụp đèn qua tham chiếu rõ ràng đó, thay vì giả định đối tượng trả về đầu luôn là phần mong muốn. Trong trình chỉnh sửa dùng trong môi trường thực tế, quyết định cách lưu các ID và tham chiếu khi lưu, mở lại tài liệu.

Phép thử cho thấy gì

Mẫu nhập thành ba đối tượng: path, rect và path. Sau khi chụp đèn đổi từ #e6a23c sang #397e86, bản xem trước xuất hiển thị màu mới của chụp đèn còn thân và đế giữ màu tô tối gốc. Bản xuất chứa hai đường dẫn, một hình chữ nhật và không có phần tử image.

Các phép kiểm tra đó xác nhận ví dụ này vẫn là hình học vector sau xuất. Chúng không xác nhận giữ XML gốc, nhóm, quy tắc CSS hay mọi tính năng của tệp khác. Giữ bản gốc và đối chiếu bản bàn giao trong ứng dụng sẽ nhận nó.

Tránh trộn hướng dẫn callback với API promise

Ví dụ cũ thường gọi fabric.loadSVGFromString(svg, callback) và mong callback nhận toàn bộ mảng đối tượng. Đó không phải vai trò tham số thứ hai trong API hiện tại: nó là reviver cho từng đối tượng. Chờ kết quả phân tích để lấy toàn bộ tập hợp.

Hướng dẫn chuyển sang 6.0 của Fabric giải thích thay đổi sang named import và API dựa trên promise. Kiểm tra phiên bản gói đã cài trước khi điều chỉnh đoạn cũ; chỉ thay câu lệnh import sẽ để logic tải sai.

Với tệp SVG cùng origin, điểm bắt đầu tương đương là:

import { loadSVGFromURL } from 'fabric';
const parsed = await loadSVGFromURL('/artwork.svg');
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();

Tài liệu loadSVGFromURL lưu ý nó fetch SVG và phải tuân theo chính sách cùng origin. Nếu máy chủ từ xa không cho origin của bạn, đổi mã nhóm không sửa lỗi mạng. Trước tiên thử tệp do ứng dụng của bạn phục vụ, rồi kiểm tra yêu cầu thất bại và cấu hình CORS của máy chủ từ xa.

Kiểm tra khả năng chỉnh sửa riêng với diện mạo

Kết xuất thành công trả lời một câu: có gì xuất hiện không? Trình chỉnh sửa cần thêm kiểm tra.

1. Chọn vùng cần thay đổi. Xác nhận phần khác không đổi theo.
2. Đổi màu qua phương thức set của đối tượng và yêu cầu kết xuất như ví dụ.
3. Xuất và mở kết quả độc lập. API Canvas.toSVG của Fabric tạo mã SVG từ trạng thái canvas.
4. Kiểm tra mọi thứ hình thực tế phụ thuộc, như đường viền, cắt vùng, gradient, văn bản hoặc biến đổi lồng nhau. Mẫu đơn giản trên không thử những tính năng đó.
5. Lưu, mở lại và lặp thao tác sửa dự định trong trình chỉnh sửa của bạn trước khi xem quy trình hoàn tất.

Nếu nhập tạo đối tượng ảnh, kiểm tra nguồn có raster nhúng không. Hướng dẫn nội dung raster trong SVG cho thấy vì sao lớp bọc SVG không cho pixel các đường dẫn chỉnh sửa được. Nếu nguồn đã có hình vector dùng được, xử lý nhập và tổ chức đối tượng thay vì dò nét lại.

Khi hình raster cần chuyển đổi ở bước trước

Nếu nguồn duy nhất là PNG hoặc JPG đã được làm phẳng và người dùng cần sửa vùng màu, quy trình ảnh thành vector của PerfectVector có thể giúp chuẩn bị bản SVG ứng viên. Đối chiếu kết quả với gốc, kiểm tra đường dẫn và xem các vùng cần có chỉnh sửa độc lập được không trước khi nhập Fabric.js.

Dò nét không gán ý nghĩa riêng của ứng dụng như chụp đèn, thân hoặc đế. Tên trong mẫu được chủ động đặt. Thêm ánh xạ phần và quy tắc chỉnh sửa riêng sau khi kiểm tra hình học chuyển đổi. Với bộ biểu tượng tái sử dụng, quy trình bộ giao diện PNG thành SVG trình bày chuẩn bị nguồn và kiểm tra nhất quán.

Giữ ảnh chụp là raster khi mục tiêu là giữ ảnh chụp. Giữ SVG gốc phù hợp khi nó đã chứa các hình cần dùng. Tổng quan vector hóa có thể giúp quyết định dò nét có cần trong quy trình không.

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

Fabric.js có nhập SVG thành đường dẫn chỉnh sửa được không? Nó có thể phân tích nội dung SVG được hỗ trợ thành đối tượng Fabric. Khả năng chỉnh sửa phụ thuộc cấu trúc nguồn: đường dẫn, nhóm hình và raster nhúng không cho cùng tùy chọn sửa. Kiểm tra đối tượng trả về và thử thay đổi cụ thể bạn cần.

Vì sao ví dụ loadSVGFromString cũ thất bại? Hướng dẫn cũ có thể mong callback hoàn tất ở tham số thứ hai. API hiện tại trả promise và dùng tham số đó làm reviver cho từng đối tượng. Khớp mã với phiên bản đã cài và chờ kết quả phân tích.

toSVG có giữ tệp gốc chính xác không? Đừng mong tài liệu nguồn giống hệt. Nó tạo SVG từ trạng thái canvas Fabric. Giữ bản gốc và xác minh diện mạo xuất cùng cấu trúc quy trình tiếp nhận cần.

Nhập PNG có làm từng vùng chỉnh sửa được không? Đặt PNG không dò nét thành các vùng vector riêng. Nếu cần thao tác sửa đó, chuẩn bị hình học vector phù hợp trước, kiểm tra các phần kết quả và định nghĩa vai trò trong ứng dụng.

Nguồn tham khảo

1. Fabric.js — loadSVGFromString — Giá trị trả về promise và hợp đồng reviver phần tử nguồn/đối tượng.
2. Fabric.js — Nâng cấp lên Fabric.js 6.0 — Named import và chuyển từ callback sang promise.
3. Fabric.js — loadSVGFromURL — Phân tích URL và ràng buộc fetch cùng origin.
4. Fabric.js — API Canvas — Xuất trạng thái canvas thành mã SVG.

Nếu phần thiếu là hình học chỉnh sửa được từ raster, hãy chuẩn bị bản SVG ứng viên bằng PerfectVector. Kiểm tra hình trước, rồi chứng minh trình chỉnh sửa Fabric.js đổi màu được đúng phần và xuất kết quả chính xác.