Giới thiệu
SVG (Đồ 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 các 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 như hình tròn và hình chữ nhật cũng như có thể hiển thị văn bản. Mặc dù SVG không phải là công nghệ 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>, giúp nó phù hợp với các đối tượng 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.
Phiên bản này sử dụng API hợp nhất để tạo cảnh SVG được hỗ trợ hoặc VML(Ngôn ngữ mô hình vectơ) ở nơi 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 thực thể cho một đố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 nó 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 cùng 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 đưa ra toạ độ và bán kính mong muốn. Cuối cùng, tôi dùng hàm thuộc tính (attr) để gán màu cho các đối tượng.
Mỗi đối tượng SVG có thể có các thuộc tính được gán cho đối tượng đó như màu sắc, chế độ xoay, màu nét và kích thước, v.v. Bạn có thể xem danh sách chi tiết các thuộc tính có thể chỉ định 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 lệnh được trình kết xuất sử dụng để tạo đối tượng. Vẽ bằng đường dẫn cũng giống như vẽ bằng bút trên một mảnh giấy kẻ khổng lồ. Bạn có thể hướng dẫn cách nhấc bút lên khỏi giấy và di chuyển đến một vị trí khác(di chuyển đến), để vẽ một đường(đường kẻ đế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 hướng dẫn cần vẽ một đường cong, SVG sẽ tính đến kích thước mong muốn ban đầu và cuối cùng của đường cong (sau khi điều chỉnh theo tỷ lệ), tính toán toán học các điểm trung gian để hiển thị một đường cong mượt mà.
Mã và hình bên dưới cho thấy một hình chữ nhật và đường cong khép kín được vẽ bằng các đường dẫn. Chữ M theo sau là toạ độ sẽ di chuyển bút đến vị trí đó, L, theo sau là cặp toạ độ vẽ một đường thẳng từ vị trí hiện tại đến vị trí đó. Vẽ một đường cong Bezier mượt mà với đ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ẽ tạo ra lệnh với 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 sẽ đư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ề lộ trình 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 minh hoạ mà không có khả năng vẽ văn bản thì sẽ thực sự nhàm chán, may mắn là 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) sẽ lấy toạ độ x và y cùng với chuỗi để vẽ. Phương thức văn bản không cấp cho bạn nhiều quyền kiểm soát đối với phông chữ hoặc các hiệu ứng khác. Tệp 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 là in (in) để vẽ văn bản dưới dạng một tập hợp các đường dẫn. Do đó, chúng tôi có thể sửa đổi từng chữ cái. Trong ví dụ bên dưới, chúng tôi tô màu chữ số 5 bằng một màu cam, tô màu "ROCKS" với màu hơi xanh và làm cho nét đậm hơn để mô phỏng văn bản in đậm. Chúng tôi làm việc này bằng cách sử dụng phông chữ tuỳ chỉnh với cỡ chữ 40pts.
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 phải bằng Raphaël, cũng như bất kỳ phông chữ nào cho vấn đề đó. Bên cạnh đó, hầu hết phông chữ đều sử dụng định dạng TrueType(TTF) hoặc OpenType(OTF). Để chuyển từ 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 công cụ có tên 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 (thông thường, đậm, nghiêng, đậm nghiêng, v.v.) để sử dụng với Raphaël. Bài viết này nằm ngoài phạm vi của hướng dẫn này để đề cập chi tiết về Cufon. Hãy truy cập đường liên kết đề cập trước để biết thêm chi tiết. Google Font Directory là một nguồn tuyệt vời để cung cấp phông chữ không rườm rà cho ứng dụng của bạn.
Sự kiện
Các phần tử SVG có thể đăng ký trực tiếp tất cả các sự kiện truyền thống dựa trên thao tác di chuột: click, dblclick, Được di chuột xuống, di chuột, di chuột ra, di chuột qua, di chuột lên và di chuột. 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ử chỉ cho trình duyệt dành cho thiết bị 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 được nhấp vào.
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
Do cả hai phương thức này đều là phương thức để vẽ đối tượng trên màn hình, nên thường sẽ không rõ ràng ngay lý do tại sao bạn nên dùng đối tượng này thay cho phương thức kia. Hai phương tiện này có những cách tiếp cận rất khác nhau. Canvas là một API chế độ tức thì cũng giống như vẽ bằng bút sáp màu. Bạn có thể xoá hoặc huỷ một phần bản vẽ nhưng không thể huỷ bỏ hoặc thay đổi nét vẽ trước đó theo mặc định. Canvas cũng là một bitmap đường quét nên rất dễ bị vỡ ảnh khi hình ảnh được điều chỉnh theo tỷ lệ. Mặt khác, SVG (Đồ hoạ vectơ có thể mở rộng), như đã đề cập trước đó 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 viết tập lệnh.
Việc sử dụng SVG hay Canvas để lập trình trò chơi khá đơn giản. Bên cạnh các hạn chế thông thường về việc bạn định triển khai cho máy tính hay thiết bị di động, việc triển khai thực sự còn phụ thuộc vào số lượng sprite. SVG phù hợp với những gì tôi gọi là trò chơi có độ trung thực thấp. Tôi mô tả những trò chơi đó là những trò chơi có khả năng di chuyển đồng thời hạn chế của các đối tượng cũng như việc xoá và tạo sprite. Nhiều trò chơi cờ bàn như Chess, Checkers hoặc Battleship, cũng như các trò chơi thẻ bài như BlackJack, Poker và Hearts thuộc danh mục này. Một luồng thống nhất khác là trong nhiều trò chơi này, người chơi sẽ phải di chuyển một đối tượng tuỳ ý và khả năng viết tập lệnh của SVG giúp bạn dễ dàng chọn đối tượng.
Công cụ soạn thảo cho SVG
Việc sử dụng SVG không có nghĩa là bạn phải tự tạo đường dẫn. 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 đã dùng rộng rãi và khuyên dùng 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 có một giao diện người dùng hạn chế gợi nhớ đến GIMP hoặc MS Paint. Trừ phi mức độ chi tiết tương đối thấp, tôi chủ yếu sử dụng tính năng chỉnh sửa svg để chỉnh sửa bản vẽ SVG thay vì tạo chúng. Tính năng chỉnh sửa svg cho phép bạn tạo các đối tượng bằng đồ hoạ hoặc bằng mã SVG.
Phong cảnh bằng mực
Inkscape là một trình chỉnh sửa đồ hoạ vectơ chính thức cho nhiều nền tảng, tương tự như CorelDraw, Adobe Illustrator và Xara. Inkscape được hưởng lợi từ cộng đồng trình bổ trợ sôi nổi và cơ sở mã hoàn thiện. Tiền thân của Inkscape, do Inkscape phát triển, được phát triển vào năm 1999. Inkscape là ứng dụng tôi nên dùng cho các thành phần dựa trên vectơ và bitmap.
Một bên 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ơ), nhằm 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