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:
- Giới thiệu chung về canvas
- Một số phương thức cơ bản
- 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ớiView
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.
1 2 | canvas<span class="token punctuation">.</span><span class="token function">drawLine</span><span class="token punctuation">(</span>startX<span class="token punctuation">,</span> startY<span class="token punctuation">,</span> endX<span class="token punctuation">,</span> endY<span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
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.
1 2 3 4 5 6 | canvas<span class="token punctuation">.</span><span class="token function">drawLines</span><span class="token punctuation">(</span> <span class="token function">floatArrayOf</span><span class="token punctuation">(</span> startFirstX<span class="token punctuation">,</span> startFirstY<span class="token punctuation">,</span> endFirstX<span class="token punctuation">,</span> endFirstY<span class="token punctuation">,</span> startSecondX<span class="token punctuation">,</span> startSecondY<span class="token punctuation">,</span> endSecondX<span class="token punctuation">,</span> endSecondY<span class="token punctuation">)</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
drawPoint
Cái tên quá rõ ràng. Vẽ 1 điểm =]]
1 2 | canvas<span class="token punctuation">.</span><span class="token function">drawPoint</span><span class="token punctuation">(</span>coordinateX<span class="token punctuation">,</span> coordinateY<span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
drawPoints
Vẽ nhiều điểm
1 2 3 4 | canvas<span class="token punctuation">.</span><span class="token function">drawPoints</span><span class="token punctuation">(</span> <span class="token function">floatArrayOf</span><span class="token punctuation">(</span>startX<span class="token punctuation">,</span> startY<span class="token punctuation">,</span> startSecondX<span class="token punctuation">,</span> startSecondY<span class="token punctuation">)</span><span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
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.
1 2 | canvas<span class="token punctuation">.</span><span class="token function">drawRoundRect</span><span class="token punctuation">(</span>rect<span class="token punctuation">,</span> radiusX<span class="token punctuation">,</span> radiusY<span class="token punctuation">,</span> projectResources<span class="token punctuation">.</span>paint<span class="token punctuation">)</span> |
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
1 2 3 4 5 | canvas<span class="token punctuation">.</span><span class="token function">drawCircle</span><span class="token punctuation">(</span> centerCoordinateX<span class="token punctuation">,</span> centerCoordinateY<span class="token punctuation">,</span> radius<span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
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.
1 2 | canvas<span class="token punctuation">.</span><span class="token function">drawOval</span><span class="token punctuation">(</span>rect<span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
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
, sweepAngle
và useCenter
.
- Đố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ả startAngle
và sweepAngle
đề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.
1 2 3 4 5 6 7 8 | val path <span class="token operator">=</span> <span class="token class-name">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>apply <span class="token punctuation">{</span> <span class="token function">moveTo</span><span class="token punctuation">(</span>startX<span class="token punctuation">,</span> topY<span class="token punctuation">)</span> <span class="token function">lineTo</span><span class="token punctuation">(</span>endX<span class="token punctuation">,</span> bottomY<span class="token punctuation">)</span> <span class="token function">moveTo</span><span class="token punctuation">(</span>startX<span class="token punctuation">,</span> bottomY<span class="token punctuation">)</span> <span class="token function">lineTo</span><span class="token punctuation">(</span>endX<span class="token punctuation">,</span> topY<span class="token punctuation">)</span> <span class="token punctuation">}</span> canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
Vẽ text
Vẽ text một cách linh động hơn so với sử dụng TextView
1 2 | canvas.drawText(text, coordinateX, coordinateY, paintText) |
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
1 2 | canvas<span class="token punctuation">.</span><span class="token function">drawRGB</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span> green<span class="token punctuation">,</span> blue<span class="token punctuation">)</span> |
drawARGB
1 2 | canvas<span class="token punctuation">.</span><span class="token function">drawARGB</span><span class="token punctuation">(</span>alpha<span class="token punctuation">,</span> red<span class="token punctuation">,</span> green<span class="token punctuation">,</span> blue<span class="token punctuation">)</span> |
drawColor
1 2 | canvas<span class="token punctuation">.</span><span class="token function">drawColor</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token class-name">R</span><span class="token punctuation">.</span>color<span class="token punctuation">.</span>colorPrimary<span class="token punctuation">)</span><span class="token punctuation">)</span> |
Vẽ hình ảnh
drawBitmap
1 2 3 4 5 | <span class="token keyword">private</span> val bitmap by lazy <span class="token punctuation">{</span> <span class="token class-name">BitmapFactory</span><span class="token punctuation">.</span><span class="token function">decodeResource</span><span class="token punctuation">(</span>resources<span class="token punctuation">,</span> <span class="token class-name">R</span><span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>image<span class="token punctuation">)</span> <span class="token punctuation">}</span> canvas<span class="token punctuation">.</span><span class="token function">drawBitmap</span><span class="token punctuation">(</span>bitmap<span class="token punctuation">,</span> sourceRect<span class="token punctuation">,</span> destRect<span class="token punctuation">,</span> paint<span class="token punctuation">)</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">CanvasCustomView</span> <span class="token keyword">extends</span> <span class="token class-name">View</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">int</span> width<span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">int</span> height<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">Bitmap</span> mBitmap<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">Canvas</span> mCanvas<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">Path</span> mPath<span class="token punctuation">;</span> <span class="token class-name">Context</span> context<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">Paint</span> mPaint<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token keyword">float</span> mX<span class="token punctuation">,</span> mY<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token keyword">float</span> TOLERANCE <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token class-name">CanvasCustomView</span><span class="token punctuation">(</span><span class="token class-name">Context</span> context<span class="token punctuation">,</span> <span class="token annotation punctuation">@Nullable</span> <span class="token class-name">AttributeSet</span> attrs<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> attrs<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khởi tạo đối tượng Path. Cái này được dùng để tạo ra các đường vẽ</span> mPath <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Như đã trình bày ở trên, 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ẽ.</span> mPaint <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mPaint<span class="token punctuation">.</span><span class="token function">setAntiAlias</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mPaint<span class="token punctuation">.</span><span class="token function">setColor</span><span class="token punctuation">(</span><span class="token class-name">Color</span><span class="token punctuation">.</span>BLACK<span class="token punctuation">)</span><span class="token punctuation">;</span> mPaint<span class="token punctuation">.</span><span class="token function">setStyle</span><span class="token punctuation">(</span><span class="token class-name">Paint</span><span class="token punctuation">.</span><span class="token class-name">Style</span><span class="token punctuation">.</span>STROKE<span class="token punctuation">)</span><span class="token punctuation">;</span> mPaint<span class="token punctuation">.</span><span class="token function">setStrokeJoin</span><span class="token punctuation">(</span><span class="token class-name">Paint</span><span class="token punctuation">.</span><span class="token class-name">Join</span><span class="token punctuation">.</span>ROUND<span class="token punctuation">)</span><span class="token punctuation">;</span> mPaint<span class="token punctuation">.</span><span class="token function">setStrokeWidth</span><span class="token punctuation">(</span><span class="token number">4f</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// override onSizeChanged</span> <span class="token comment">//onSizeChanged () được gọi khi view lần đầu tiên được chỉ định một kích thước và nếu kích thước của view thay đổi vì bất kỳ lý do gì. Tính toán vị trí, kích thước và bất kỳ giá trị nào khác liên quan đến kích thước view trong onSizeChanged (), thay vì tính toán lại chúng mỗi khi bạn vẽ</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onSizeChanged</span><span class="token punctuation">(</span><span class="token keyword">int</span> w<span class="token punctuation">,</span> <span class="token keyword">int</span> h<span class="token punctuation">,</span> <span class="token keyword">int</span> oldw<span class="token punctuation">,</span> <span class="token keyword">int</span> oldh<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onSizeChanged</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> oldw<span class="token punctuation">,</span> oldh<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Canvassẽ vẽ lên Bitmap đã xác định</span> mBitmap <span class="token operator">=</span> <span class="token class-name">Bitmap</span><span class="token punctuation">.</span><span class="token function">createBitmap</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> <span class="token class-name">Bitmap</span><span class="token punctuation">.</span><span class="token class-name">Config</span><span class="token punctuation">.</span>ARGB_8888<span class="token punctuation">)</span><span class="token punctuation">;</span> mCanvas <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Canvas</span><span class="token punctuation">(</span>mBitmap<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// override onDraw</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onDraw</span><span class="token punctuation">(</span><span class="token class-name">Canvas</span> canvas<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onDraw</span><span class="token punctuation">(</span>canvas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Vẽ mPath sử dụng mPaint</span> canvas<span class="token punctuation">.</span><span class="token function">drawPath</span><span class="token punctuation">(</span>mPath<span class="token punctuation">,</span> mPaint<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// ACTION_DOWN xác định điểm vẽ tại thời điểm press/touch</span> <span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">startTouch</span><span class="token punctuation">(</span><span class="token keyword">float</span> x<span class="token punctuation">,</span> <span class="token keyword">float</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span> mPath<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span> mX <span class="token operator">=</span> x<span class="token punctuation">;</span> mY <span class="token operator">=</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// ACTION_MOVE dùng để move các điểm vẽ (x,y) tạo thành các nét vẽ</span> <span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">moveTouch</span><span class="token punctuation">(</span><span class="token keyword">float</span> x<span class="token punctuation">,</span> <span class="token keyword">float</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">float</span> dx <span class="token operator">=</span> <span class="token class-name">Math</span><span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>x <span class="token operator">-</span> mX<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">float</span> dy <span class="token operator">=</span> <span class="token class-name">Math</span><span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>y <span class="token operator">-</span> mY<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>dx <span class="token operator">>=</span> TOLERANCE <span class="token operator">||</span> dy <span class="token operator">>=</span> TOLERANCE<span class="token punctuation">)</span> <span class="token punctuation">{</span> mPath<span class="token punctuation">.</span><span class="token function">quadTo</span><span class="token punctuation">(</span>mX<span class="token punctuation">,</span> mY<span class="token punctuation">,</span> <span class="token punctuation">(</span>x <span class="token operator">+</span> mX<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>y <span class="token operator">+</span> mY<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mX <span class="token operator">=</span> x<span class="token punctuation">;</span> mY <span class="token operator">=</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">//Reset các đường vẽ và update lại UI</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">clearCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> mPath<span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">invalidate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// when ACTION_UP dừng vẽ/touch</span> <span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">upTouch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> mPath<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>mX<span class="token punctuation">,</span> mY<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//override the onTouchEvent</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onTouchEvent</span><span class="token punctuation">(</span><span class="token class-name">MotionEvent</span> event<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//get tọa độ x, y của event coordinates để vẽ/di chuyển các điểm vẽ.</span> <span class="token keyword">float</span> x <span class="token operator">=</span> event<span class="token punctuation">.</span><span class="token function">getX</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">float</span> y <span class="token operator">=</span> event<span class="token punctuation">.</span><span class="token function">getY</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span><span class="token function">getAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token class-name">MotionEvent</span><span class="token punctuation">.</span>ACTION_DOWN<span class="token operator">:</span> <span class="token function">startTouch</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">invalidate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token class-name">MotionEvent</span><span class="token punctuation">.</span>ACTION_MOVE<span class="token operator">:</span> <span class="token function">moveTouch</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">invalidate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token class-name">MotionEvent</span><span class="token punctuation">.</span>ACTION_UP<span class="token operator">:</span> <span class="token function">upTouch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">invalidate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
MainActivity.class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">MainActivity</span> <span class="token keyword">extends</span> <span class="token class-name">AppCompatActivity</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">CanvasCustomView</span> mCanvasView<span class="token punctuation">;</span> <span class="token operator">/</span> <span class="token operator">/</span>khai báo view <span class="token annotation punctuation">@Override</span> <span class="token keyword">protected</span> <span class="token keyword">void</span> <span class="token function">onCreate</span><span class="token punctuation">(</span><span class="token class-name">Bundle</span> savedInstanceState<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setContentView</span><span class="token punctuation">(</span><span class="token class-name">R</span><span class="token punctuation">.</span>layout<span class="token punctuation">.</span>activity_main<span class="token punctuation">)</span><span class="token punctuation">;</span> mCanvasView <span class="token operator">=</span> <span class="token function">findViewById</span><span class="token punctuation">(</span><span class="token class-name">R</span><span class="token punctuation">.</span>id<span class="token punctuation">.</span>signature_canvas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">clearCanvas</span><span class="token punctuation">(</span><span class="token class-name">View</span> view<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>mCanvasView <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> mCanvasView<span class="token punctuation">.</span><span class="token function">clearCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//clear canvas và refesh lại view</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token operator"><</span><span class="token operator">?</span>xml version<span class="token operator">=</span><span class="token string">"1.0"</span> encoding<span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">?</span><span class="token operator">></span> <span class="token operator"><</span><span class="token class-name">FrameLayout</span> xmlns<span class="token operator">:</span>android<span class="token operator">=</span><span class="token string">"http://schemas.android.com/apk/res/android"</span> xmlns<span class="token operator">:</span>tools<span class="token operator">=</span><span class="token string">"http://schemas.android.com/tools"</span> android<span class="token operator">:</span>layout_width<span class="token operator">=</span><span class="token string">"match_parent"</span> android<span class="token operator">:</span>layout_height<span class="token operator">=</span><span class="token string">"match_parent"</span> tools<span class="token operator">:</span>context<span class="token operator">=</span><span class="token string">".MainActivity"</span><span class="token operator">></span> <span class="token operator"><</span>com<span class="token punctuation">.</span>example<span class="token punctuation">.</span>myapplication<span class="token punctuation">.</span><span class="token class-name">CanvasCustomView</span> android<span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">"@+id/signature_canvas"</span> android<span class="token operator">:</span>layout_width<span class="token operator">=</span><span class="token string">"match_parent"</span> android<span class="token operator">:</span>layout_height<span class="token operator">=</span><span class="token string">"match_parent"</span> android<span class="token operator">:</span>textColor<span class="token operator">=</span><span class="token string">"#FFFFFF"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token class-name">Button</span> android<span class="token operator">:</span>layout_width<span class="token operator">=</span><span class="token string">"wrap_content"</span> android<span class="token operator">:</span>layout_height<span class="token operator">=</span><span class="token string">"wrap_content"</span> android<span class="token operator">:</span>layout_gravity<span class="token operator">=</span><span class="token string">"bottom|center"</span> android<span class="token operator">:</span>onClick<span class="token operator">=</span><span class="token string">"clearCanvas"</span> android<span class="token operator">:</span>text<span class="token operator">=</span><span class="token string">"Clear Canvas"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span><span class="token class-name">FrameLayout</span><span class="token operator">></span> |
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:
- https://google-developer-training.github.io/android-developer-advanced-course-practicals/unit-5-advanced-graphics-and-views/lesson-11-canvas/11-1c-p-apply-clipping-to-a-canvas/11-1c-p-apply-clipping-to-a-canvas.html
- https://medium.com/mobile-app-development-publication/learn-all-android-canvas-draw-functions-dd5d6595884a