STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    STML5 CF - STDIO HTML5 Compact Framework

    Bài viết giới thiệu sơ lược về STML5 CF - Framework hỗ trợ phát triển các demo, ứng dụng đồ họa trên nền tảng web, hướng dẫn cách khởi tạo và cách sử dụng một số hàm trong STML5 CF.
    27/08/2015
    24/09/2020
    4 phút đọc
    STML5 CF - STDIO HTML5 Compact Framework

    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: TextureCache load 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:

    ss_1

    Mã nguồn

    Tải toàn bộ mã nguồn và ví dụ minh họa của STML5 CF tại đây.

    Bài chung series

    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Đề xuất

    STML5 CF - Game Loop
    Một khi đã đặt chân vào lĩnh vực phát triển game, bạn chắc chắn sẽ gặp ...
    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5
    Giới thiệu HTML5 canvas, tạo đối tượng vẽ, các đường nét, hình chữ nhật, ...

    Khám phá

    10 Thứ Bạn Có Thể Làm với JavaScript
    Giới thiệu 10 ứng dụng mà JavaScript với sự mạnh mẽ của nó có thể tạo ...
    Game Developer - Framework - Engine
    Phân biệt khái niệm Game Developer, phân biệt Framework và Engine trong ...
    Cài Đặt Cocos2d-js Và Tạo Project HelloWorld
    Cocos2d-x là Engine phát triển game được sử dụng khá rộng rãi, giúp việc ...
    SPA - Single Page Application Là Gì?
    Bài viết giới thiệu về SPA - Single Page Application, sự so sánh giữa mô ...
    Tìm Hiểu về Window.localStorage
    Tìm hiểu về localStorage trong HTML5 và cách sử dụng thông qua ...
    Thỏa Thuận Sử Dụng Dịch Vụ STDIO
    Thỏa thuận này quy định về điều kiện giao kết hợp đồng, quyền lợi, nghĩa ...
    Cài Đặt Laravel trên Windows
    Hướng dẫn cài đặt framework Lavarel trên hệ điều hành Windows.
    Sử Dụng Qt Lập Trình C++ Cho Android
    Hướng dẫn sử dụng Qt IDE và Qt framework xây dựng ứng dụng cho Android.
    21/08/2018
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020