CustomView sử dụng canvas

Tram Ho

Hãy nhìn vào nhưng view ở trên, với nhưng View object có sẵn liệu chúng ta có thể làm được như vậy không? Hoặc nếu bạn làm được thì nó có dễ dàng không? Với canvas chúng ta hoàn toàn có thể xử lý được 1 cách dễ dàng vấn đề trên. Vì vậy, trong bài viết này mình sẽ chia sẻ lại những gì mình tìm hiểu được về canvas một cách dễ hiểu nhất

Nội dung bài viết sẽ bao gồm:

  1. Giới thiệu chung về canvas
  2. Một số phương thức cơ bản
  3. Tìm hiểu chi tiết hơn thông qua sample

1. Giới thiệu chung về canvas

Canvas được xem như là một bền mặt 2D (hình dung như tờ giấy, bảng) mà chúng ta có thể vẽ bất cứ thứ gì lên đó.

  • Canvas cung cấp các phương thức để chuyển đổi các điểm vẽ của chúng ta thành bitmap.
  • Instance của Bitmap class được liên kết với View instance và thể hiện nó ở trên UI
  • Paint object chứa thông tin về kiểu và màu sắc về cách vẽ các hình học (chẳng hạn như đường thẳng, hình chữ nhật, hình bầu dục và đường dẫn), text và bitmap.

Canvas xác định các hình dạng mà bạn có thể vẽ trên màn hình, trong khi Paint xác định màu sắc, kiểu, phông chữ, v.v. của mỗi hình dạng bạn vẽ.

Khi thực hiện vẽ chúng ta sẽ lấy gốc tọa độ (0,0) ở góc trên bên trái của màn hình như hình ảnh ở bên dưới.

2. Một số phương thức draw cơ bản

Vẽ hình học

drawLine

Đơn giản chỉ là vẽ 1 đường gạch ngang/dọc/chéo.

drawLines

Nếu bạn muốn vẽ nhiều hơn 1 line, thì bạn có thể sử dụng drawLines . Bạn chỉ việc cung cấp các thông tin các giá trị tọa độ thôi.

drawPoint

Cái tên quá rõ ràng. Vẽ 1 điểm =]]

drawPoints

Vẽ nhiều điểm

drawRect

Quen thuộc nhất chắc là drawRect vẽ hình chữ nhật. Chúng ta có thể truyền tọa độ hoặc sử dụng class Rect .

drawRoundRect

Round là vòng -> tròn, drawRoundRect là vẽ hình chữ nhật có bo các góc dựa vào thuộc tính radiusX và radiusY để điều chỉnh độ cong của góc.

Nếu radiusX = radiusY:

Nếu radiusX > radiusY:

Nếu radiusX < radiusY:

drawCircle

drawCircle vẽ hình tròn với centerCoordinateX, centerCoordinateY là tọa độ tâm, radius là bán kính

drawOval

Không giống như vẽ hình tròn, drawOval không cung cấp bán kính, mà sẽ dựa vào tỉ lệ hình chữ nhật.

drawArc

drawArc sử dụng cơ chế tương tự như vẽ 1 hình trái xoan. drawArc sử dụng Rect và có thêm các params như là startAngle, sweepAngleuseCenter.

  • Đối với startAngle, tính từ giữa của hình chữ nhật, và quay theo chiều kim đồng hồ
  • Đối với sweepAngle, tính từ giữa của hình chữ nhật, và quay ngược chiều kim đồng hồ

Cả startAnglesweepAngle đều sử dụng đơn vị là độ góc.

  • useCenter là 1 giá trị kiểu boolean quyết định arc sử dụng tâm để vẽ hay không?

Ví dụ:

useCenter = false

useCenter = true

drawPath

drawPath là phương thức khá hữu dụng, hay được sử dụng trong những app vẽ vời như paint.

Vẽ text

Vẽ text một cách linh động hơn so với sử dụng TextView

với:

  • text là String data.
  • coordinateX và coordinateY được sử dụng để định vị tọa độ của text.
  • paintText quyết định bạn sẽ vẽ nó như nào (kích cỡ, màu)

Vẽ màu

drawRGB

drawARGB

drawColor

Vẽ hình ảnh

drawBitmap

required parameters là bitmap và destRect.

bitmap có thể extracted từ resources.

destRect khu vực hình chữ nhật mà canvas có thể vẽ vào

3. Tìm hiểu chi tiết hơn thông qua sample

Quay trở lại với cái hình ảnh ban đầu, chúng ta sẽ làm 1 demo nho nhỏ làm làm cái bảng paint thôi. Dùng Java nha :v

Cấu trúc project vô cùng đơn giản, gồm:

  • CanvasCustomView: Vẽ canvas
  • MainActivity: dùng để hiển thị CanvasCustomView

CanvasCustomView.class

MainActivity.class

activity_main.xml

Hết dồi. Run app và vẽ thôi. Cảm ơn bạn đã dành thời gian xem bài viết.

Tham khảo tại:

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo