STML5 CF là từ viết tắt của STDIO HTML5 Compact Framework, giống như cái tên của nó, STML5 CF là một framework đồ họa 2D đơn giản dựa trên nền tảng HTML5. STML5 CF gồm có 2 phần chính là Graphics và TextureCache.
Vì sao sử dụng STML5 CF?
Với STML5 CF có thể nạp ảnh và thao tác vẽ với JavaScript trên nền tảng web, thuận lợi cho việc phát triển thêm các demo, giáo trình, ứng dụng mà không cần tốn kém thời gian khởi tạo 1 framework.
Graphics
Thành phần này trong STML5 CF đóng vai trò khởi tạo Canvas (Canvas là một mặt phẳng dùng để chứa hình ảnh, các khối hình học, đường thẳng... được vẽ lên), thiết đặt các trạng thái của Canvas và những hàm tiện ích để giúp việc vẽ lên Canvas được thực hiện nhanh chóng. Dưới đây là một số phương thức tiêu biểu của Graphics.
Khởi tạo STML5 CF
canvas = document.createElement("canvas");
canvas.setAttribute("id", "stml5cf_canvas");
canvas.width = width;
canvas.height = height;
canvas.style.border = "1px solid";
context = canvas.getContext("2d");
document.body.appendChild(canvas);Phần khởi tạo gồm có 3 phần chính:
- Tạo HTML5 Canvas (dòng 1).
- Khởi tạo các thuộc tính của Canvas (dòng 2-5).
- Thêm Canvas vào Document Object (dòng 9).
Xóa nội dung Canvas
Trong STML5 CF, có thể xóa nội dung của Canvas bằng cách gọi hàm clearScreen.
function clearScreen();
Thiết đặt trạng thái cho STML5 CF
Hiện tại, STML5 CF hỗ trợ 3 hàm thiết đặt trạng thái là:
- Thiết đặt màu vẽ hiện tại:
setFillColor - Thiết đặt màu cho đường viền:
setStrokeColor - Thiết đặt độ dày của đoạn thẳng:
setLineWidth
Nguyên mẫu hàm của các hàm trên có dạng như sau:
function setFillColor(color); function setStrokeColor(color); function setLineWidth(width);
Với color là màu được quy định bởi tên tiếng anh như "red", "green", "blue" hoặc theo mã màu RGB như "#ff00ff", "00ff00".
Các hàm vẽ trong STML5 CF
STML5 CF hỗ trợ các hàm vẽ khối hình học như hình chữ nhật, hình tròn, đoạn thẳng và các hàm vẽ text, hình ảnh.
- Vẽ hình chữ nhật:
function drawRect(x, y, width, height); - Vẽ hình tròn:
function drawCircle(x, y, radius); - Vẽ đoạn thẳng:
function drawLine(xFrom, yFrom, xTo, yTo); - Vẽ text:
function drawText(font, size, text, x, y); - Vẽ hình ảnh:
function drawImage(image, x, y);
Trong hàm vẽ hình ảnh, tham số image sẽ là giá trị trả về khi gọi hàm getImage từ thành phần TextureCache.
TextureCache
Thành phần này trong STML5 CF dùng để hỗ trợ cho Graphics khi vẽ hình ảnh. TextureCache giúp tiết kiệm được thời gian, bộ nhớ khi phải load một ảnh nhiều lần. TextureCache có 3 phương thức (hàm) chính:
addImage: Thêm hình ảnh muốn load vàTextureCache.startLoading:TextureCacheload hình ảnh khi phương thức này được gọi. Phương thức này nhận tham số là 1 hàm, hàm này được gọi khi tất cả các hình ảnh được load xong.getImage: lấy hình ảnh sau khi load để vẽ lên Canvas.
Lưu ý: nên gọi hàm addImage trước khi gọi startLoading và gọi getImage sau khi gọi startLoading.
Ví dụ minh họa
Dưới đây là ví dụ minh họa cách sử dụng STML5 CF.
Trước tiên, cần một hàm để kích hoạt STML5 CF sau khi trang web được load xong.
<body onload=openWorld()>
Sau khi load xong, trang web sẽ thực thi hàm openWorld.
Khởi tạo STML5 CF chỉ gói gọn trong 1 hàm duy nhất
initSTML5CF(800, 480);
Dưới đây là ví dụ vẽ logo của STDIO lên Canvas, sử dụng TextureCache để load logo.
textureCache = new TextureCache();
for(var i = 0; i < APP_IMAGES.length; i++) {
textureCache.addImage(APP_IMAGES[i]);
}
textureCache.startLoading(function() {
drawWorld();
}); Sau khi toàn bộ hình ảnh (texture) được load xong, bắt đầu thực hiện vẽ lên Canvas.
setFillColor("#ff0000");
drawRect(10, screenHeight/2, 100, 100);
setFillColor("#00ff00");
drawRect(130, screenHeight/2, 100, 100);
setFillColor("#0000ff");
drawCircle(300, screenHeight/2 + 50, 50);
drawLine(370, screenHeight/2 + 100, 470, screenHeight/2 + 100);
setFillColor("#ffbb33");
drawText("Helvetica", 50, "STDIO HTML5 Compact Framework", screenWidth/2, screenHeight*8/9);
var stdioImage = textureCache.getImage(s_stdioLogo);
drawImage(stdioImage, 10, 10);Kết quả cuối cùng sẽ như sau:
Mã nguồn
Tải toàn bộ mã nguồn và ví dụ minh họa của STML5 CF tại đây.
