Đường cong Bézier SVG: sửa chỗ gãy mà không thêm nút

Để loại bỏ chỗ gãy không mong muốn nơi hai đoạn Bézier bậc ba thông thường gặp nhau, giữ điểm neo chung tại chỗ và căn hai tay nắm liền kề trên một đường thẳng, ở hai phía đối diện của điểm neo. Độ dài của chúng có thể khác nhau trong khi hai đường cong vẫn có chung hướng tiếp tuyến. Tay nắm phản chiếu có độ dài bằng nhau áp đặt một điều kiện bổ sung; không phải điểm nối mượt về thị giác nào cũng cần điều đó.

Kiểm tra hình nguồn trước khi thay đổi. Đầu lá nhọn, khấc hoặc góc chữ có thể là chủ ý. Cách sửa bên dưới nhắm vào một lần đổi hướng không mong muốn, giữ nguyên điểm đầu, điểm nối, điểm cuối và số đoạn.

Tìm hai tay nắm điều khiển điểm nối

Lệnh SVG bậc ba có hai điểm điều khiển và một điểm cuối:

C firstControlX firstControlY secondControlX secondControlY endX endY

Đoạn bắt đầu ở điểm hiện tại. Điểm điều khiển thứ nhất dẫn hướng rời điểm đầu; điểm thứ hai dẫn hướng tiến vào điểm cuối. Hướng dẫn đường dẫn của MDN minh họa các điểm điều khiển đó và cú pháp bậc ba. Với các cặp tọa độ trong lệnh viết thường, làm theo lệnh đường dẫn tương đối SVG để theo dõi mốc tọa độ trước khi đổi tay nắm.

Tại điểm neo chung, kiểm tra điểm điều khiển cuối của đoạn trước và điểm điều khiển đầu của đoạn sau. Nếu hai tay nắm hướng theo những đường khác nhau, điểm nối đổi hướng. Chỉ thêm một nút gần đó không tự giải quyết quan hệ này.

Sửa ví dụ gốc gồm hai đoạn

Lưu SVG đầy đủ này thành join-example.svg rồi mở trong trình duyệt. Đây là biểu trưng cong tự tạo có chỗ gãy có chủ ý tại (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Điểm điều khiển đi vào là (100, 100), nằm ngay bên trái điểm nối. Điểm điều khiển đi ra là (170, 50), nằm phía trên bên phải. Đường cong đi vào theo chiều ngang và rời đi theo hướng khác.

Chỉ đổi điểm điều khiển đầu của đoạn thứ hai thành (175, 100):

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Cả hai tay nắm liền kề giờ nằm trên đường ngang qua điểm nối. Tay nắm đi vào dài 50 đơn vị, tay nắm đi ra dài 25. Hướng tiếp tuyến khớp nhau dù độ dài khác nhau.

Để tạo cặp phản chiếu, thay điểm điều khiển đó thành (200, 100). Cả hai tay nắm lúc này đều kéo dài 50 đơn vị từ điểm neo chung. Thay đổi này làm hình dạng đoạn thứ hai thay đổi nhiều hơn cách sửa tay nắm không bằng nhau, nên hãy so sánh cả hai với đường bao bạn muốn giữ.

Mỗi phiên bản có hai đoạn bậc ba và ba điểm neo nằm trên đường cong: đầu, nối và cuối. Các điểm điều khiển là những tọa độ riêng. Phép so sánh là bản hiển thị trình duyệt gốc, không phải kết quả PerfectVector đồ lại hoặc ảnh chụp công cụ nút trong trình chỉnh sửa.

Kiểm tra hướng riêng với độ dài tay nắm

Với đường bậc ba kết thúc ở điểm nối J, có điểm điều khiển cuối A, đạo hàm đầu mút là 3 × (J − A). Đường bậc ba tiếp theo bắt đầu ở J, có điểm điều khiển đầu B, có đạo hàm ban đầu là 3 × (B − J).

Trong ví dụ của chúng tôi, đạo hàm đi vào là (150, 0) ở mọi khung:

Hướng tiếp tuyến khớp nhau được gọi là tính liên tục G1. Đạo hàm bậc nhất khớp nhau là tính liên tục C1, dùng khoảng tham số từ không đến một thông thường cho mỗi đường bậc ba này. Ghi chú đạo hàm Bézier của Michigan Tech suy ra các điều kiện đầu mút đó.

Phép kiểm tra hướng giả định đạo hàm đầu mút khác không. Tay nắm co về đúng điểm neo cần kiểm tra riêng vì đạo hàm bậc nhất bằng không. Ngoài ra, chỉ thẳng hàng là chưa đủ nếu cả hai tay nắm nằm cùng phía điểm nối: hướng di chuyển có thể đảo ngược.

Không ví dụ thẳng hàng nào bảo đảm độ cong khớp qua điểm nối. Đường cong có thể không có góc gãy tiếp tuyến nhưng vẫn cần chỉnh hình để khớp dáng bao ngoài dự định của logo. Kiểm tra toàn bộ đoạn uốn, không chỉ nút được chọn.

Chỉ dùng S khi phản chiếu tạo ra hình bạn muốn

Phiên bản phản chiếu có thể viết gọn hơn:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Ở đây, S suy ra điểm điều khiển đầu bằng cách phản chiếu điểm điều khiển cuối của đường bậc ba trước quanh điểm hiện tại:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Các cặp còn lại trong S240 50 270 50 xác định điểm điều khiển thứ hai và điểm cuối. Đây là phiên bản tay nắm phản chiếu 50/50. Nó không thể thay thế phiên bản 50/25 mà không thay đổi đường cong.

Đặc tả lệnh bậc ba SVG giới hạn quy tắc phản chiếu đó cho lệnh trước là C, c, S hoặc s. Nếu lệnh trước là đường thẳng hoặc đường cong bậc hai, điểm điều khiển đầu ngầm định sẽ là điểm hiện tại.

Ví dụ:

M30 150 L150 100 S240 50 270 50

Sau đường thẳng, đoạn cuối đó hoạt động như C150 100 240 50 270 50. Tay nắm đầu đã co về điểm bắt đầu. Nó vẫn có thể uốn vì hình học điều khiển còn lại không thẳng hàng; S sau đường thẳng không bắt buộc đoạn phải thẳng.

Phép kiểm tra trình duyệt của chúng tôi so sánh đường S phản chiếu với bản C tường minh tương đương, rồi kiểm tra ví dụ đường thẳng rồi đến S này với bản khai triển tường minh riêng của nó. Cả hai phép so sánh đều khớp ở những vị trí lấy mẫu. Điều đó xác nhận các ví dụ này, còn đặc tả xác định quy tắc chung.

Thực hiện cùng cách sửa trong trình chỉnh sửa nút

Làm việc trên bản sao, chọn đường dẫn và hiện tay nắm quanh điểm nối đáng nghi. Xác nhận có một điểm neo chung. Hai điểm cuối riêng chỉ chồng lên nhau có thể cần sửa cấu trúc kết nối trước khi đổi hướng tay nắm.

Trong Inkscape, hướng dẫn loại nút phân biệt nút mượt, có tay nắm trên cùng đường thẳng, với nút đối xứng, có tay nắm còn bằng nhau về độ dài. Dùng loại nút phù hợp với đường bao thay vì ép mọi điểm nối đối xứng.

Giữ điểm neo cố định khi điều chỉnh hướng tay nắm. Sau đó rút ngắn hoặc kéo dài tay nắm để khôi phục hình dự định quanh điểm nối. So sánh kết quả ở mức phóng lớn và kích thước xem bình thường, rồi mở lại SVG đã lưu để kiểm tra đường dẫn xuất ra.

Nếu đường dẫn có các điểm neo dày đặc trên toàn bộ đoạn uốn, sửa tay nắm cục bộ có thể chưa đủ. Hướng dẫn số nút SVG trình bày đơn giản hóa, còn quy trình chỉnh sửa SVG trình bày thay đổi rộng hơn. Giữ các góc có chủ ý trong cả hai thao tác.

So sánh hình đã sửa với nguồn

Điểm nối mượt là một bước kiểm tra chất lượng. Nó không chứng minh logo được đồ lại khớp với bản gốc. So sánh dáng bao ngoài, khoảng trống và các góc có chủ ý bằng danh sách kiểm tra chất lượng đồ lại vector.

Nếu chỉ có PNG hoặc JPG của biểu trưng, công cụ vector hóa logo của PerfectVector có thể chuẩn bị một bản SVG chỉnh sửa được. Kiểm tra đường bao, rồi sửa tay nắm cục bộ ở nơi vẫn còn chỗ gãy không mong muốn. Giữ ảnh raster tham chiếu cạnh đường dẫn được chỉnh để làm mượt không xóa mất chi tiết bạn muốn giữ.

Dùng bản vector gốc có sẵn. Hình học thương hiệu chính xác hoặc nguồn hư hỏng nặng có thể cần tái dựng thủ công; hướng dẫn vector hóa logo giải thích lựa chọn đó. Sửa một điểm nối hữu ích khi phần còn lại của đường bao đã phù hợp.

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

Hai tay nắm Bézier có cần cùng độ dài để điểm nối mượt không? Không. Tay nắm có độ dài khác không có thể dài khác nhau trong khi có chung hướng tiếp tuyến. Tại điểm neo chung, chúng cần nằm trên một đường thẳng, ở hai phía đối diện. Tay nắm phản chiếu bằng nhau bổ sung đạo hàm bậc nhất khớp nhau cho hai đoạn bậc ba dùng ở đây.

Vì sao lệnh S của SVG thay đổi đường cong của tôi? S suy ra điểm điều khiển đầu. Sau C hoặc S, nó phản chiếu điểm điều khiển cuối của đường bậc ba trước; sau các loại lệnh khác, nó dùng điểm hiện tại. Điểm được suy ra đó có thể khác điểm điều khiển tường minh bạn dự định.

Tôi có nên làm mượt mọi nút trong logo đồ lại không? Không. Giữ các góc, đầu nhọn và khấc có chủ ý. Sửa chỗ gãy không mong muốn tại chỗ, rồi so sánh toàn bộ dáng bao ngoài với nguồn. Chỉ một điểm nối liên tục tiếp tuyến không chứng minh được việc tái dựng chính xác.

Nguồn tham khảo

1. MDN — đường dẫn SVG — Giải thích điểm điều khiển bậc ba và cú pháp lệnh đường dẫn.
2. Michigan Tech — đạo hàm Bézier — Suy ra tiếp tuyến đầu mút và điều kiện nối đường cong.
3. W3C — lệnh Bézier bậc ba SVG — Xác định quy tắc phản chiếu và điểm điều khiển dự phòng cho S.
4. Inkscape — loại nút — Phân biệt hành vi nút nhọn, mượt, đối xứng và tự động.

Nếu logo bắt đầu từ ảnh raster, chuẩn bị một bản SVG bằng PerfectVector, kiểm tra điểm nối và dáng bao ngoài, rồi chỉ sửa các đường cong cần thiết trong khi giữ các góc có chủ ý.