Nhập SVG vào Konva: chọn ảnh hoặc đường dẫn chỉnh sửa

Dùng Konva.Image khi muốn đặt toàn bộ SVG lên canvas. Dùng các node Konva.Path riêng khi ứng dụng cần đổi màu hoặc thao tác từng hình đường dẫn. Tải ảnh SVG không tự tạo đối tượng Konva cho mọi phần tử bên trong nó. Hướng dẫn SVG của Konva mô tả đây là các cách tiếp cận khác nhau.

Với bộ chọn logo hoặc công cụ bố cục, một ảnh có thể đủ. Với huy hiệu hai màu có vùng cần điều khiển riêng, cấu trúc đối tượng quan trọng. Quyết định người dùng cần chỉnh gì trước khi chọn cách tải và giữ nguồn SVG bên cạnh cảnh canvas.

Chọn cách biểu diễn trước khi nhập

Hướng dẫn Path của Konva nhận dữ liệu đường dẫn SVG qua data. Đó là giá trị thuộc tính d của đường dẫn, không phải toàn bộ tài liệu SVG. Chỉ sao chép các giá trị d không mang theo transform của nhóm cha, màu kế thừa hay hành vi viewBox của SVG.

Cũng có câu hỏi riêng về tệp nguồn: SVG có chứa đường dẫn không? Dùng hướng dẫn kiểm tra raster nhúng khi hình là bitmap bọc trong SVG. SVG hợp lệ dựa trên đường dẫn vẫn có thể trở thành một node ảnh trong Konva; điều đó không biến tệp nguồn thành vector giả.

Ví dụ hai màu với phép thử màu tô thấy được

Biểu trưng gốc bên dưới chứa hai đường dẫn viết thủ công có màu tô rõ ràng. Canvas trái tải cả hai thành một ảnh. Canvas phải dựng hai node Path từ cùng hình học. Cả hai nhận yêu cầu màu tô hồng và tỷ lệ 1.3.

Hình chữ nhật hồng bên trái là bằng chứng hữu ích: imageNode.fill() đổi nền của hình ảnh, trong khi các vùng xanh lá và vàng đục giữ màu nguồn. Bên phải, paths[0].fill() chỉ đổi vùng đầu tiên. Thử nghiệm này dùng hình học gốc, không phải kết quả chuyển đổi PerfectVector.

Lưu nội dung sau thành tệp HTML và phục vụ qua máy chủ phát triển cục bộ. Nó cố định Konva 10.6.0, tạo hai stage 320 × 240 và chờ ảnh SVG giải mã trước khi vẽ. Mã là cùng phép so sánh được chạy cho ảnh chụp.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

Trong ví dụ chủ động giữ nhỏ này, mỗi đường dẫn có cách tô/vẽ riêng và dùng cùng tọa độ. Nhóm cho hai đường dẫn chỉnh sửa được một vị trí và tỷ lệ chung. Đổi tỷ lệ nhóm giữ data của từng đường dẫn nguyên vẹn; nó đổi nơi và kích thước nhóm được vẽ.

Với tệp SVG đáng tin cậy có sẵn chỉ cần đặt cả ảnh, hướng dẫn Image cho thấy quy trình tải ảnh thông thường. Tải URL SVG thành ảnh, chờ tải xong, rồi truyền vào Konva.Image. Thành phần React hiển thị mã SVG là giá trị khác với đối tượng ảnh mà canvas mong đợi.

Mang theo nhiều hơn dữ liệu đường dẫn khi hình phức tạp

Mảng parts của ví dụ là mô hình tường minh cho hai hình đã biết. Nó không phải công cụ nhập SVG. Trước khi dùng cách tương tự cho hình xuất ra, kiểm tra điều gì tạo nên diện mạo:

• Transform nhóm có thể di chuyển, xoay hoặc thay đổi tỷ lệ mọi phần tử con. Giữ quan hệ đó hoặc chủ động áp dụng transform vào hình học.
• Cách tô/vẽ có thể đến từ phần tử tổ tiên hoặc quy tắc CSS. Xác định màu tô và đường viền dự định thay vì cho rằng mọi đường dẫn đều khai báo chúng.
• Chuyển sắc, cắt vùng, mặt nạ và bộ lọc có định nghĩa cùng tham chiếu riêng. Chuỗi d được sao chép không tái dựng các hiệu ứng đó.
• Chữ và hình cơ bản có thể cần xử lý riêng. Đừng cho rằng mọi đối tượng nhìn thấy đã là đường dẫn.

Giữ bản hiển thị gốc cạnh bản tái dựng khi thử nghiệm. Bắt đầu với một vùng dễ nhận ra, so sánh vị trí và màu, rồi mới thêm các hình còn lại. Hướng dẫn chỉnh sửa SVG trình bày làm sạch nguồn khi cấu trúc đối tượng khó thao tác.

Nếu không cần điều khiển từng đường dẫn, tải cả SVG thành ảnh có thể tránh công việc tái dựng đó. Konva cũng mô tả việc hiển thị SVG bằng thư viện ngoài như canvg rồi đặt canvas kết quả trong Konva.Image. Đó vẫn là cách biểu diễn ảnh; nó không cho người dùng các node Konva riêng cho từng đường dẫn nguồn. Xem các lựa chọn được tài liệu hóa.

Với hình chỉ cần màu nguồn khác, một cách nữa là cập nhật chính SVG và tải lại ảnh. Người bảo trì Konva mô tả quy trình đó trong vấn đề react-konva 530. Dùng chỉnh sửa có cấu trúc phù hợp với SVG đã biết thay vì thay mọi màu tô bừa bãi và mất khác biệt màu có chủ ý.

Coi xuất canvas là bàn giao raster

Ví dụ gọi pathScene.stage.toDataURL({ pixelRatio: 2 }). Stage 320 × 240 tạo PNG được giải mã có kích thước 640 × 480. Tăng pixelRatio đổi kích thước pixel xuất ra; nó không biến PNG thành SVG chỉnh sửa được. Tài liệu xuất của Konva giải thích cài đặt này.

Giữ riêng ba sản phẩm bàn giao này:

1. SVG gốc, để chỉnh sửa vector và so sánh.
2. Dữ liệu cảnh của ứng dụng, bao gồm tham chiếu đường dẫn hoặc ảnh cùng những chỉnh sửa ứng dụng hỗ trợ.
3. PNG hoặc bản xuất raster khác, cho mục đích cần hình đã kết xuất.

Mở lại PNG xuất ra và kiểm tra kích thước cùng chi tiết nhỏ. Cũng thử ảnh SVG trong các trình duyệt ứng dụng hỗ trợ; hướng dẫn SVG của Konva lưu ý khác biệt tương thích hiển thị. Ví dụ này thử một SVG đơn giản, độc lập nên không xác định hỗ trợ cho mọi tệp hoặc hiệu ứng xuất ra.

Tránh đánh giá chất lượng vector chỉ từ bản xem trước canvas. Hướng dẫn SVG bị vỡ pixel phân biệt hình học nguồn với bản xem trước raster và kích thước hiển thị.

Khi nào PerfectVector giúp với nguồn

Nếu tài nguyên ban đầu chỉ là họa tiết PNG hoặc JPG, PerfectVector có thể giúp tái dựng hình học SVG chỉnh sửa được trước khi dựng cảnh Konva. Chuyển ảnh sang vector, mở kết quả trong trình chỉnh sửa và kiểm tra dáng bao ngoài, lỗ cùng vùng màu trước khi ánh xạ bất kỳ đường dẫn nào vào ứng dụng.

Vector hóa không tạo mô hình cảnh Konva hay trình phân tích SVG tùy ý. Bạn vẫn chọn cách biểu diễn và chuyển các thuộc tính cần thiết sang. Nếu đã có bản SVG gốc sử dụng được, làm việc từ tệp đó. Với ảnh chụp hoặc chất liệu vẽ cần giữ dạng pixel, node ảnh thường là cách biểu diễn phù hợp mà không cần đồ lại.

Kiểm tra nhập bằng hình của bạn

Trước khi thêm SVG vào trình chỉnh sửa tái sử dụng:

1. Chọn một node cho cả ảnh hoặc các node hình riêng dựa trên điều khiển người dùng cần.
2. Đổi màu một vùng và xác nhận chỉ đối tượng dự định thay đổi.
3. Đổi kích thước toàn bộ thiết kế và kiểm tra khoảng cách, diện mạo đường viền và cắt vùng.
4. Xuất ở kích thước pixel yêu cầu và mở lại tệp raster.
5. Mở lại bản SVG gốc đã lưu độc lập để bản xuất canvas không bao giờ trở thành bản duy nhất.

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

Konva.Image có làm đường dẫn trong SVG chỉnh sửa được không? Không. Nó hiển thị SVG thành một node ảnh. Để điều khiển từng vùng đường dẫn, tạo node Path riêng từ dữ liệu phù hợp hoặc dùng quy trình chỉnh sửa SVG giữ cấu trúc tài liệu.

Vì sao fill thêm hình chữ nhật thay vì đổi màu SVG của tôi? Trên node Image, fill tô hình phía sau nội dung ảnh của nó. Nó không viết lại màu tô trong SVG. Sửa SVG nguồn và tải lại, hoặc dùng node Path riêng khi ứng dụng cần điều khiển màu từng phần.

Tăng pixelRatio có xuất tệp vector không? Không. Trong ví dụ này, pixelRatio 2 tạo PNG có chiều rộng và chiều cao gấp đôi stage. Giữ nguồn SVG riêng để chỉnh sửa vector.

Nguồn tham khảo

1. Konva — SVG trên canvas — Giải thích các lựa chọn Image, Path, trình kết xuất ngoài và giới hạn tương thích trình duyệt.
2. Konva — hướng dẫn Path — Mô tả dựng Path từ dữ liệu đường dẫn SVG và thuộc tính tô/vẽ tường minh.
3. Konva — hướng dẫn Image — Minh họa tải ảnh và đặt vào cảnh Konva.
4. Konva — xuất ảnh chất lượng cao — Giải thích xuất raster và ảnh hưởng của pixelRatio lên kích thước đầu ra.
5. Konva — vấn đề react-konva 530 — Ghi lại cách sửa nguồn rồi tải lại của người bảo trì để đổi màu ảnh SVG.

Bạn bắt đầu từ biểu tượng chỉ có raster? Biến ảnh thành đường dẫn SVG, kiểm tra các vùng màu khôi phục và thử một vùng trong Konva trước khi nối phần còn lại của trình chỉnh sửa.