Một ứng dụng hấp dẫn thì không thể thiếu các hình ảnh, do đó việc làm thế nào để ta có thể hiển thị các hình ảnh lên màn hình theo mong muốn cũng là một vấn đề mà chúng ta cần tìm hiểu. Trong bài viết hôm nay, tôi xin hướng dẫn các bạn cách để tải và hiển thị một hình ảnh lên màn hình.

Trong bada, để tải và hiển thị ảnh lên màn hình thì bạn cần phải sử dụng 2 lớp chính là: Bitmap và Image. Hai lớp này lần lượt thuộc 2 namespace khác nhau là: Osp::Graphics và Osp::Media.

Lớp Image đóng vai trò trung gian, nó cung cấp 4 nhóm phương thức sau:

  • Các phương thức giải mã: các phương thức này hỗ trợ việc tải ảnh từ các nguồn khác nhau (từ file hoặc vùng đệm byte) vào một đối tượng Bitmap, và có thể thay đổi kích thước ảnh.
  • Các phương thức mã hóa: giúp tạo các file ảnh từ dữ liệu có trong đối tượng Bitmap.
  • Các phương thức chuyển đổi: chuyển đổi dữ liệu trong file ảnh hoặc đối tượng Bitmap sang một định dạng khác mà bada hỗ trợ.
  • Các phương thức nén ảnh JPEG: hỗ trợ việc nén ảnh JPEG với sự mất mát dữ liệu tối thiểu, người dùng có thể thiết đặt kích thước tối đa của file nén.

Hiện tại bada chỉ hỗ trợ giải mã các định dạng ảnh: JPEG, GIF, PNG, BMP, TIFF và WBMP. Hỗ trợ mã hóa các định dạng ảnh: JPEG, PNG và BMP.

Trong khi đó thì lớp Bitmap lại chứa dữ liệu của các điểm ảnh và các thuộc tính của ảnh đó.

Bây giờ tôi sẽ hướng dẫn các bạn những bước đơn giản để hiển thị một hình ảnh từ file lên màn hình.

Đầu tiên, các bạn tạo một ứng dụng Frame đơn giản với tên dự án tùy ý. Ở đây tôi đặt tên dự án là DisplayImage.

Tiếp theo, ở tập tin DisplayImage.h (nếu các bạn đặt tên dự án giống tôi) các bạn thêm vào dòng mã sau:

#include <FMedia.h>

Ở tập tin DisplayImage.cpp thì các bạn thêm namespae Media vào:

using namespace Osp::Media;

Tiếp đến các bạn mở file manifest.xml lên. Bạn có thể dễ dàng tìm thấy file này ở cửa sổ Project Explorer, bên dưới cây thư mục của dự án. Chú ý là bạn phải mở bằng Text Editor để có thể chỉnh sửa.

Tiếp đó các bạn tìm đến thẻ Privileges, và thêm vào 3 dòng khai báo sau giữa cặp thẻ Privileges

<Privilege>
        <Name>IMAGE</Name>
</Privilege>

Vì dự án của chúng ta có thao tác với các đối tưởng ảnh do đó chúng ta phải khai báo điều này vào trong tập tin manifest.xml.  Tượng tự sau này khi chúng ta làm việc với các đối tượng đặc biệt khác thì chúng ta cũng cần phải khai báo Privilege tương ứng với các đối tượng mà ta sử dụng.

Để sử dụng namespace Media trong dự án của chúng ta, các bạn còn phải điều chỉnh một số thông số sau:

Ở cửa sổ Project Explorer, kích chuột phải vào dự án và chọn Properties, sau đó tìm đến phần như trong hình vẽ:

Khi kích vào nút Add, một hộp thoại hiện lên, ở đây các bạn gõ vào FMedia. Xem hình vẽ:

Nhấn OK để xác nhận. Và như vậy là các bạn đã hoàn tất việc khai báo để sử dụng hình ảnh trong ứng dụng của chúng ta.

Bạn cài đặt lại phương thức OnForeground(void) như sau:

void
DisplayImage::OnForeground(void)
{
	// TODO:
	// Start or resume drawing when the application is moved to the foreground.

	Canvas* pCanvas = GetAppFrame()->GetCanvasN();

	Image* image = new Image();
	image->Construct();

	Bitmap* bitmap = image->DecodeN(L"/Home/wordpress.png", BITMAP_PIXEL_FORMAT_ARGB8888);

	pCanvas->DrawBitmap(*(new Point(40,100)),*bitmap);
	pCanvas->Show();

	delete image;
	delete bitmap;
	delete pCanvas;
}

Chú ý là các bạn phải copy ảnh mà mình muốn hiển thị vào thư mục Home của dự án(bạn có thể chỉ định đường dẫn khác, nơi mà có file ảnh bạn muốn hiển thị), sau đó gọi hàm:

Bitmap* bitmap = image->DecodeN(L”<đườn dẫn file ảnh>“, <định dạng ảnh>);

Hiện tại, các định dạng ảnh mà các bạn có thể truyền vào gồm có:

  • BITMAP_PIXEL_FORMAT_ARGB8888
  • BITMAP_PIXEL_FORMAT_RGB565
  • BITMAP_PIXEL_FORMAT_R8G8B8A8

Câu lệnh pCanvas->DrawBitmap(*(new Point(40,100)),*bitmap); sẽ vẽ ảnh của chúng ta lên màn hình ở tọa độ (40,100)

Bạn biên dịch và chạy chương trình để xem kết quả, chúc các bạn thành công!