Sử dụng canvas vẽ 2D transformation trong Android

5/5 - (2 votes)

Nếu dùng canvas chúng ta có thể vẽ bất cứ hình 2D nào. Ví dụ: hình tròn, hình vuông, hình chữ nhật, hình thoi, hình bình hành…

Các khái niệm bắt buộc phải hiểu:

  • Canvas là đối tượng sẽ vẽ các đối tượng ta đã tạo vd: đối tượng hình vuông, đối tượng hình tròn…
  • Paint là 1 đối tượng cấu hình cách vẽ 1 đối tượng khác ví dụ như cấu hình màu (Color), độ nét (AntiAlias), độ dày của đường viền…
  • canvas.save() phương thức save dùng để lưu lại trạng thái của đối tượng canvas ở thời điểm hiện tại, ví dụ nó sẽ lưu lại: vị trí x, x mà ta đang đứng, lưu lại độ scale hiện tại của canvas..
  • canvas.translate(x,y): translate = move, ý chỉ là di chuyển đến 1 toạ độ nào đó. Sau khi lưu chúng ta có thể di chuyển tung tăng khắp nơi mà ko sợ cần phải tính toán cộng trừ nhân chia. Sau khi translate thì mặc định vị trí canvas sẽ là (0,0) tại nơi đã dịch chuyển đến.
  • canvas.restore(): Sau khi vẽ vời, co dãn chán chê ở khu vực khác thì mình cần phải trở về vị trí ban đầu, nếu ko mình sẽ bị mất kiểm soát vị trí trên canvas.
  • canvas.rotate(): Xoay canvas theo 360 độ, sau khi xoay thì hệ toạ độ x,y cũng thay đổi theo. Ví dụ xoay rotate(-90) thì hệ toạ độ 0,0 sẽ là từ dưới lên.
  • invalidate(): khi tính toán xong thì cần refresh lại View (quan trọng).
    • chú ý hàm: protected void onDraw(Canvas canvas)
      được gọi liên tục nếu mình gọi invalidate()
  • onDraw(): trong hàm này của View mình chỉ nên vẽ thôi chứ không nên tính toán gì, nếu tính toán trong đây nó sẽ vẽ rất chậm.
Minh hoạ canvas.translate();
Minh hoạ canvas.rotate();
Xoay canvas theo 360 độ, sau khi xoay thì hệ toạ độ x,y cũng thay đổi theo.
Ví dụ xoay rotate(-90) thì hệ toạ độ 0,0 sẽ là từ dưới lên.

Hàm vẽ cơ bản:

  1. drawColor: vẽ màu nền cho toàn bộ canvas
  2. drawText: vẽ text
  3. drawRect: vẽ hình chữ nhật
  4. drawRoundRect: vẽ hình chữ nhật bo góc
  5. drawCircle: vẽ hình tròn
  6. drawBitmap: vẽ một bitmap
  7. drawLine: vẽ 1 line
  8. drawLines: vẽ mảng các line
  9. drawArc: vẽ hình quạt

Xem dự án mẫu tại đây:

https://github.com/dotrinhdev/canvas

Tham khảo thêm tài liệu:

https://dotrinh.com/luu-y-voi-ham-drawtext-trong-android/

https://stackoverflow.com/questions/5789813/what-does-canvas-translate-do

Chúng tôi sẽ cập nhật thêm khi có nhiều thời gian.

Các bài viết không xem thì tiếc:

Thảo luận

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Xem thêm
Đây là nơi sẽ hiển thị các đánh giá trong…
 
 
 
 
Facetime iPhone

Main Menu