Giới thiệu
SVG (viết tắt của Scalable Vector Graphics – Đồ hoạ vectơ có thể mở rộng) là một ngôn ngữ dựa trên XML để mô tả các đối tượng và cảnh. Các phần tử SVG có thể kích hoạt sự kiện và có thể được viết tập lệnh bằng JavaScript. SVG đi kèm với một số loại gốc tích hợp sẵn như vòng tròn và hình chữ nhật, cũng như có thể hiển thị văn bản. Mặc dù SVG là một công nghệ không mới, nhưng HTML5 hiện cho phép nhúng trực tiếp các đối tượng SVG vào một trang mà không cần sử dụng thẻ <object> hoặc <embed> để điều chỉnh cho phù hợp với những gì hiện có trên canvas. Raphaël.js là một thư viện JavaScript cho phép bạn tạo cảnh SVG theo phương thức lập trình.
API này sử dụng một API hợp nhất để tạo các cảnh SVG được hỗ trợ hoặc VML(Ngôn ngữ lập mô hình vectơ) hiện tại, cụ thể là các phiên bản Internet Explorer trước IE9.
Vẽ cảnh đầu tiên
Hãy bắt đầu bằng cách vẽ một cảnh đơn giản bằng Raphaël. Chúng ta bắt đầu vẽ cảnh bằng cách tạo bản sao của đối tượng Raphaël. Trong trường hợp này, tôi đã sử dụng hàm khởi tạo để chèn đối tượng này vào một phần tử HTML nhất định có chiều rộng và chiều cao nhất định, nhưng bạn cũng có thể yêu cầu Raphaël nối đối tượng vào DOM (Mô hình đối tượng tài liệu). Tiếp theo, tôi tạo một hình chữ nhật bằng cách cung cấp các vị trí x và y mong muốn với chiều rộng và chiều cao. Tiếp theo, tôi tạo một vòng tròn bằng cách cung cấp toạ độ và bán kính mong muốn. Cuối cùng, tôi đã sử dụng hàm thuộc tính (attr) để chỉ định màu cho các đối tượng.
Mỗi đối tượng SVG có thể được gán các thuộc tính cho các thuộc tính như màu sắc, độ xoay, màu và kích thước nét vẽ, v.v. Bạn có thể tìm thấy danh sách chi tiết về các thuộc tính có thể gán tại đây.
var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);
rect.attr({fill: "green"});
circle.attr({fill: "blue"});
Vẽ hình dạng nâng cao bằng đường dẫn
Đường dẫn là một loạt các lệnh mà trình kết xuất sử dụng để tạo đối tượng. Việc vẽ bằng đường dẫn giống như vẽ bằng bút trên một tờ giấy biểu đồ khổng lồ. Bạn có thể hướng dẫn bút nhấc khỏi giấy và di chuyển sang một vị trí khác(di chuyển đến), để vẽ một đường thẳng(đường đến) hoặc để vẽ một đường cong(vòng cung đến). Đường dẫn cho phép SVG tạo các đối tượng có cùng mức độ chi tiết bất kể tỷ lệ. Khi bạn đưa ra một lệnh để vẽ một đường cong, SVG sẽ tính đến kích thước ban đầu và kích thước mong muốn cuối cùng của đường cong (sau khi điều chỉnh theo tỷ lệ), tính toán các điểm trung gian theo toán học để hiển thị một đường cong mượt mà.
Mã và hình dưới đây cho thấy một hình chữ nhật và đường cong kín được vẽ bằng các đường dẫn. Chữ cái M theo sau là toạ độ sẽ di chuyển bút đến vị trí đó, L theo sau là cặp toạ độ sẽ vẽ một đường từ vị trí hiện tại đến vị trí đó. s vẽ một đường cong Bezier mượt mà với một điểm điều khiển và điểm cuối nhất định có toạ độ tương đối. Z đóng một đường dẫn. Nhìn chung, việc sử dụng chữ hoa sẽ đưa ra lệnh bằng toạ độ tuyệt đối, còn chữ thường sẽ sử dụng toạ độ tương đối. M/m và Z/z tương ứng đưa ra cùng một lệnh cho chữ hoa hoặc chữ thường. Bạn có thể xem danh sách tất cả hướng dẫn về đường dẫn tại đây.
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
Vẽ văn bản
Nếu không có khả năng vẽ văn bản thì hình minh hoạ sẽ rất nhàm chán. May mắn thay, Raphaël cung cấp hai phương thức để vẽ văn bản. Phương thức đầu tiên, văn bản, lấy toạ độ x và y cùng với chuỗi để vẽ. Phương thức văn bản không cho phép bạn kiểm soát nhiều đối với phông chữ hoặc các hiệu ứng khác. Hàm này vẽ bằng phông chữ mặc định với kích thước mặc định.
Phương thức thứ hai, in, vẽ văn bản dưới dạng một tập hợp các đường dẫn. Do đó, chúng ta có thể sửa đổi từng chữ cái. Trong ví dụ bên dưới, chúng ta đã tô số 5 bằng màu cam, tô "ROCKS" bằng màu xanh lam và làm nét dày hơn để mô phỏng văn bản in đậm. Chúng tôi đã thực hiện việc này bằng cách sử dụng phông chữ tuỳ chỉnh có kích thước phông chữ là 40pt.
var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
Phông chữ Vegur không có trong Raphaël cũng như không có phông chữ nào cho vấn đề đó. Ngoài ra, hầu hết phông chữ đều sử dụng định dạng TrueType(TTF) hoặc OpenType(OTF). Để chuyển các định dạng đó thành định dạng mà Raphaël có thể sử dụng, chúng ta cần chuyển đổi các định dạng đó bằng một công cụ có tên là Cufon. Cufon cho phép bạn xuất các kiểu phông chữ khác nhau của một phông chữ nhất định (bình thường, đậm, nghiêng, đậm nghiêng, v.v.) để sử dụng với Raphaël. Hướng dẫn này không đề cập chi tiết về Cufon. Hãy xem đường liên kết nêu trên để biết thêm thông tin chi tiết. Thư mục phông chữ của Google là một nguồn phông chữ không bị ràng buộc tuyệt vời cho ứng dụng của bạn.
Sự kiện
Các phần tử SVG có thể trực tiếp đăng ký tất cả các sự kiện dựa trên chuột truyền thống: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup và hover. Raphaël cung cấp khả năng thêm các phương thức của riêng bạn vào canvas hoặc các phần tử riêng lẻ, vì vậy, về lý thuyết, không có gì ngăn bạn thêm các cử chỉ cho trình duyệt di động.
Đoạn mã dưới đây liên kết một hàm để xoay một chữ cái nhất định trong "ROCKS" 45 độ khi người dùng nhấp vào chữ cái đó.
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
letters[i].click(function(evt) {
this.rotate(45);
});
}
SVG so với Canvas
Vì cả hai đều là phương thức vẽ đối tượng trên màn hình, nên bạn thường không thể biết ngay lý do nên sử dụng phương thức này thay vì phương thức kia. Hai phương tiện này có cách tiếp cận rất khác nhau. Canvas là một API chế độ tức thì, tương tự như việc vẽ bằng bút sáp. Bạn có thể xoá hoặc huỷ bỏ một phần bản vẽ, nhưng theo mặc định, bạn không thể huỷ hoặc thay đổi nét vẽ trước đó. Canvas cũng là một bitmap đường quét nên rất dễ bị tạo pixel khi hình ảnh được điều chỉnh theo tỷ lệ. Mặt khác, như đã đề cập trước đó, SVG có thể phân phát nhiều độ phân giải với cùng mức độ chi tiết và có thể được tạo tập lệnh.
Việc sử dụng SVG hay Canvas để lập trình trò chơi khá đơn giản. Ngoài các quy tắc ràng buộc thông thường về việc bạn có dự định triển khai cho máy tính hay thiết bị di động, điều này thực sự phụ thuộc vào số lượng sprite. SVG phù hợp với những trò chơi mà tôi gọi là trò chơi có độ trung thực thấp. Tôi mô tả những trò chơi đó là trò chơi có giới hạn việc di chuyển đồng thời của các đối tượng, việc xoá và tạo sprite. Nhiều trò chơi trên bàn như Cờ vua, Cờ đam hoặc Battleship, cũng như các trò chơi bài như Xì dách, Xì tố và Hearts đều thuộc danh mục này. Một luồng hợp nhất khác là trong nhiều trò chơi này, người chơi sẽ cần di chuyển một đối tượng tuỳ ý và khả năng viết tập lệnh của SVG giúp việc chọn đối tượng trở nên dễ dàng.
Công cụ tạo nội dung cho SVG
Việc sử dụng SVG không có nghĩa là bạn phải tạo đường dẫn theo cách thủ công. Có một số công cụ, cả nguồn mở và thương mại, cho phép bạn xuất sang SVG. Hai công cụ mà tôi đã sử dụng rộng rãi và rất đề xuất là Inkscape và svg-edit.
svg-edit
svg-edit là một trình chỉnh sửa SVG dựa trên trình duyệt, được viết bằng JavaScript. Công cụ này cung cấp một giao diện người dùng hạn chế gợi nhớ đến GIMP hoặc MS Paint. Trừ khi mức độ chi tiết tương đối thấp, tôi chủ yếu sử dụng svg-edit để điều chỉnh bản vẽ SVG thay vì tạo bản vẽ. svg-edit cho phép bạn tạo đối tượng bằng đồ hoạ hoặc bằng mã SVG.
Inkscape
Inkscape là một trình chỉnh sửa đồ hoạ vectơ đầy đủ, đa nền tảng tương tự như CorelDraw, Adobe Illustrator và Xara. Inkscape được hưởng lợi từ một cộng đồng trình bổ trợ sôi nổi và cơ sở mã trưởng thành. Ứng dụng tiền thân của Inkscape, từ đó Inkscape được phân nhánh, được phát triển vào năm 1999. Inkscape là ứng dụng mà tôi thường dùng cho các thành phần dựa trên vectơ và bitmap.
Một điểm nhỏ
SVG không được hỗ trợ trên Windows trong các phiên bản Internet Explorer trước IE9. IE sử dụng định dạng đồ hoạ vectơ có tên là VML (Ngôn ngữ đánh dấu vectơ), cung cấp nhiều chức năng tương tự như SVG. Raphaël có thể tạo các cảnh sử dụng SVG hoặc VML nếu được hỗ trợ. Sử dụng Raphaël là một cách dễ dàng để hỗ trợ nhiều nền tảng.
Tài liệu tham khảo
- Rapahël.js: http://raphaeljs.com
- Tài liệu về Raphaël: http://raphaeljs.com/reference.html