iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
2
Software Development

Android animation 30天上手系列 第 9

Day09 Canvas 繪圖

  • 分享至 

  • xImage
  •  

Android Canvas 繪製幾何圖形

Canvas的意思就是畫布,而Paint 代表了Canvas上的畫筆
以下範列記錄幾種Canvas繪製幾何圖向的方法

canvas.drawArc (扇形)
canvas.drawCircle(圓)
canvas.drawOval(橢圓)
canvas.drawPoint(點)
canvas.drawRect(矩形)
canvas.drawRoundRect(圓角矩形)
canvas.drawLine(線)
cnavas.drawPath(路徑)

DrawCircle(圓)

DrawCircle

//新增一個畫筆
val p = Paint()
//寬度為3
p.strokeWidth = 3f
//顏色設定為紅色
p.color = Color.RED
//設定Style描邊
p.style = Paint.Style.STROKE
//新增bitmap
val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
//新增一個畫布
val canvas = Canvas(bitmap)
//畫圓
canvas.drawCircle(240f, 240f, 150f, p)

DrawArc(扇形)

DrawArc


val p = Paint()
p.strokeWidth = 2f
p.color = Color.RED
p.style = Paint.Style.STROKE

val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

val oval1 = RectF(100f, 100f, 400f, 400f)
canvas.drawArc(oval1, 30f, 300f, true, p)

DrawOval(橢圓)

DrawOval

val p = Paint()
p.strokeWidth = 10f
p.color = Color.RED
p.style = Paint.Style.STROKE

val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

val oval = RectF()
oval.left = 100f
oval.top = 100f
oval.right = 400f
oval.bottom = 300f
canvas.drawOval(oval, p)

DrawLine(線)

DrawLine

val p = Paint()
p.strokeWidth = 10f
p.color = Color.RED
p.style = Paint.Style.STROKE

val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

canvas.drawLine(60f, 40f, 200f, 400f, p)

DrawPath(路徑)

DrawPath

val p = Paint()
p.strokeWidth = 5f
p.color = Color.RED
p.style = Paint.Style.STROKE

val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

val path = Path()
path.moveTo(200f, 200f)
path.lineTo(400f, 200f)
path.lineTo(400f, 400f)
path.close()
canvas.drawPath(path, p)

DrawPoints(點)

DrawPoint

val p = Paint()
p.strokeWidth = 20f
p.color = Color.RED
p.style = Paint.Style.STROKE

val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

canvas.drawPoint(60f, 390f, p)
canvas.drawPoints(floatArrayOf(60f, 300f, 100f, 300f, 200f, 300f), p)

DrawRect(矩形)

DrawRect

val p = Paint()
p.strokeWidth = 2f
p.color = Color.RED
p.style = Paint.Style.STROKE

val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

val rect = RectF(100f, 100f, 400f, 400f)
canvas.drawRect(rect, p)

DrawRoundRect(圓角矩形)

DrawRoundRect

val p = Paint()
p.strokeWidth = 2f
p.color = Color.RED
p.style = Paint.Style.FILL
p.isAntiAlias = true

val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

val rect = RectF(100f, 50f, 300f, 500f)
canvas.drawRoundRect(rect, 20f, 20f, p)

完整程式:https://github.com/evanchen76/Canvas

到目前介紹了ShapDrawable與這篇的Canvas兩種繪圖方式,之後我們會再講用VectorDrawable繪制向量圖。

下一篇將以目前所學來練習一個動畫範例
CustomSelector

線上課程:
Android 動畫入門到進階
Android UI 進階實戰(Material Design Component)

出版書:
Android TDD 測試驅動開發:從 UnitTest、TDD 到 DevOps 實踐


上一篇
Day08 ShapeDrawable繪圖
下一篇
Day10 動畫範例:CustomSelector
系列文
Android animation 30天上手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言