Trình chỉnh sửa 9 Patch - Công cụ WYSIWYG trực tuyến để tạo hình ảnh 9 patch
Trình chỉnh sửa 9 Patch là một công cụ WYSIWYG trực tuyến tương tự như công cụ có trong Android Studio. Công cụ cho phép bạn tạo hình ảnh bitmap tự động điều chỉnh kích thước để phù hợp với nội dung của chế độ xem và kích thước màn hình. Bạn có thể chia tỷ lệ các phần được chọn của hình ảnh theo chiều ngang hoặc chiều dọc dựa trên các chỉ báo được vẽ trong hình ảnh.
Cách sử dụng
Làm theo các bước sau để tạo đồ họa NinePatch bằng Trình chỉnh sửa 9 Patch. Bạn sẽ cần một hình ảnh mà bạn muốn tạo thành hình ảnh NinePatch.
- Nhấp vào nút Chọn hình ảnh hoặc kéo hình ảnh mà bạn muốn tạo thành hình ảnh NinePatch vào trình chỉnh sửa.
Trong không gian làm việc mở ra, bảng điều khiển giữa là khu vực vẽ của bạn, nơi bạn có thể chỉnh sửa các đường cho các mảnh có thể kéo giãn và khu vực nội dung. Bảng điều khiển bên phải là khu vực xem trước, nơi bạn có thể xem trước đồ họa của mình khi được kéo giãn.
- Thay đổi tên hình ảnh cho hình ảnh NinePatch của bạn. Hình ảnh của bạn sẽ được lưu với phần mở rộng tệp .9.png.
- Nhấp vào trong chu vi 1 pixel để vẽ các đường xác định các mảnh có thể kéo giãn và (tùy chọn) khu vực nội dung.
- Khi hoàn tất, nhấp vào nút Lưu hình ảnh để lưu các thay đổi của bạn.
Hình 1. Trình chỉnh sửa 9 Patch hiển thị hình ảnh NinePatch.
Để đảm bảo rằng đồ họa NinePatch của bạn thu nhỏ đúng cách, hãy xác minh rằng bất kỳ vùng có thể kéo giãn nào cũng có kích thước ít nhất là 2x2 pixel. Nếu không, các vùng đó có thể biến mất khi thu nhỏ. Để tránh nội suy trong quá trình chia tỷ lệ có thể làm thay đổi màu sắc tại ranh giới, hãy cung cấp 1 pixel không gian an toàn bổ sung trong đồ họa trước và sau các vùng có thể kéo giãn.
Lưu ý: Tệp PNG thông thường (*.png) được tải với đường viền 1 pixel trống được thêm vào xung quanh hình ảnh. Bạn có thể vẽ các mảnh có thể kéo giãn và khu vực nội dung trong đường viền. Tệp NinePatch đã lưu trước đó (*.9.png) được tải nguyên trạng, không có khu vực vẽ được thêm vào vì nó đã tồn tại.
Điều khiển tùy chọn
- Thu phóng: Điều chỉnh mức thu phóng của đồ họa trong khu vực vẽ.
- Tỷ lệ mảnh: Điều chỉnh tỷ lệ của hình ảnh trong khu vực xem trước.
- Hiển thị khóa: Trực quan hóa khu vực không thể vẽ của đồ họa khi di chuột qua.
- Hiển thị mảnh: Xem trước các mảnh có thể kéo giãn màu hồng trong khu vực vẽ. Màu hồng chỉ ra một mảnh có thể kéo giãn, như được hiển thị trong hình 2.
- Hiển thị nội dung: Làm nổi bật khu vực nội dung trong hình ảnh xem trước. Màu tím chỉ ra khu vực nơi nội dung được phép, như được hiển thị trong hình 2.
- Hiển thị mảnh xấu: Thêm đường viền đỏ xung quanh các khu vực mảnh có thể tạo ra các hiện tượng không mong muốn trong đồ họa khi kéo giãn, như được hiển thị trong hình 2. Nếu bạn loại bỏ tất cả các mảnh xấu, bạn sẽ duy trì được tính nhất quán trực quan của hình ảnh kéo giãn của mình.
Hình 2. Hình ảnh NinePatch trong trình chỉnh sửa hiển thị nội dung, mảnh và mảnh xấu.