Android實現繪製LocationMarkerView圖的範例程式碼

2023-02-12 06:01:19

LocationMarker是運動軌跡上Start、End, 以及整公里點上筆者自定義繪製的一個MarkerView, 當時之所以沒有用設計給的icon是這個MarkerView裡需要填充動態的數位，自定義的話自主性比較大些也方面做動畫，之前的Android 傳統自定義View的實現可以看這篇文章介紹運動App自定義LocationMarker。

這裡先看下gif動圖：

LocationMarkerView圖的繪製

繪製方面基本沒有太多的邏輯，通過Compose的自定義繪製Canvas() 繪製一個構建的Path，生成View的Path其實是主要的實現過程。

Canvas(modifier = Modifier.size(0.dp)){
  drawPath(AndroidPath(markerViewPath), color = color)
  drawPath(AndroidPath(bottomOval), color = colorOval)
}

這裡Compose的path，還有好些介面對不上以及缺少API，所以通過AndroidPath(nativepath)介面進行轉化進行繪製，bottomOval是 Start、End點底部陰影的Path。生成markerViewPath以及bottomOval的邏輯都在LocationMarker類中，LocationMarker主要包含了上下兩套點 p1、p3(HPoint), 左右兩套點p2、p4(VPoint), 以及繪製View的引數屬性集合類MarkerParams.

獲取markerViewPath, 首先給p1、p3(HPoint)，p2、p4(VPoint)中8個點設定Value值，circleModel(radius)，然後從底部p1底部點逆時針轉圈依次呼叫三階貝塞爾函數介面，最後close實現水滴倒置狀態的Path，見實現：

fun getPath(radius: Float): Path{
  circleModel(radius)
  val path = Path()
  p1.setYValue(p1.y + radius * 0.2f * 1.05f) //設定 p1 底部左右兩個點的y值
  p1.y += radius * 0.2f * 1.05f //設定 p1 自己的y值
  path.moveTo(p1.x, p1.y)
  path.cubicTo(p1.right.x, p1.right.y, p2.bottom.x, p2.bottom.y, p2.x, p2.y)
  path.cubicTo(p2.top.x, p2.top.y, p3.right.x, p3.right.y, p3.x, p3.y)
  path.cubicTo(p3.left.x, p3.left.y, p4.top.x, p4.top.y, p4.x, p4.y)
  path.cubicTo(p4.bottom.x, p4.bottom.y, p1.left.x, p1.left.y, p1.x, p1.y)
  path.close()
  val circle = Path()
  circle.addCircle(p3.x, p3.y + radius, markerParams.circleRadius.value, Path.Direction.CCW)
  path.op(circle, Path.Op.DIFFERENCE)
  return path
}

拿到相應的Path後，在Composeable函數裡進行如上所述的繪製Path即可：

val locationMarker = LocationMarker(markerParams)
val markerViewPath = locationMarker.getPath(markerParams.radius.value)
val bottomOval = locationMarker.getBottomOval()
val color = colorResource(id = markerParams.wrapperColor)
val colorOval = colorResource(R.color.location_bottom_shader)

Canvas(modifier = Modifier.size(0.dp)){
  drawPath(AndroidPath(markerViewPath), color = color)
  drawPath(AndroidPath(bottomOval), color = colorOval)
}

繪製整公里的文字

Compose的Canvas 裡目前的Version並不支援drawText的繪製，不過開放了一個呼叫原始drawText的轉換API, 原始的drawText 是需要Paint引數的，同時依賴Paint來計算Text 對應RectF的Height值，這裡Paint()是Compose的一個Paint，需要呼叫asFrameworkPaint() 進行轉化

val paint = Paint().asFrameworkPaint().apply {
  setColor(-0x1)
  style = android.graphics.Paint.Style.FILL
  strokeWidth = 1f
  isAntiAlias = true
  typeface = Typeface.DEFAULT_BOLD
  textSize = markerParams.txtSize.toFloat()
}

計算Text 繪製依賴的RectF，並將rectF.left作為drawText的X值，同時計算drawText的基線 baseLineY，最後傳入nativeCanvas.drawText() 介面進行繪製。

val rectF = createTextRectF(locationMarker, paint, markerParams)
val baseLineY = getTextBaseY(rectF, paint)
Canvas(modifier = Modifier.size(0.dp)){
  drawIntoCanvas {
    it.nativeCanvas.drawText(markerParams.markerStr,  rectF.left, baseLineY, paint)
  }
}

drawText獲取繪製基線 baseLineY的工具類方法：

fun getTextBaseY(rectF: RectF, paint: Paint): Float {
    val fontMetrics = paint.fontMetrics
    return rectF.centerY() - fontMetrics.top / 2 - fontMetrics.bottom / 2
}

新增動畫

這裡簡單的用一個放大的動畫實現，跟原始的高德地圖、Mapbox地圖的一個growth過程的一個動畫有些差距的，暫且先這樣實現吧。首先是定義兩個radius相關的State物件，具體來說是Proxy, 以及一個動畫生長的大小控制的Float的變數Fraction，再通過自定義animateDpAsState作為 animation值的物件，最終給到MarkParams作為引數，animation值的變化，會導致MarkParams的變化，最後導致Recompose，形成動畫。

  val circleRadius by rememberSaveable{ mutableStateOf(25) }
  val radius by rememberSaveable{ mutableStateOf(60) }
  var animatedFloatFraction by remember { mutableStateOf(0f) }
  val radiusDp by animateDpAsState(
    targetValue = (radius * animatedFloatFraction).dp,
    animationSpec = tween(
      durationMillis = 1000,
      delayMillis = 500,
      easing = LinearOutSlowInEasing
    )
  )

  val circleRadiusDp by animateDpAsState(
    targetValue = (circleRadius * animatedFloatFraction).dp,
    animationSpec = tween(
      durationMillis = 1000,
      delayMillis = 500,
      easing = LinearOutSlowInEasing
    )
  )

  val markerParams by remember {
    derivedStateOf { MarkerParams(radiusDp, circleRadiusDp, wrapperColor = wrapperColor) }
  }

Compose 自定義View LocationMarkerView 主要通過drawPath,以及呼叫原生的drawText, 最後新增了一個scale類似的動畫實現，最終實現運動軌跡裡的一個小小的View的實現。

程式碼見：https://github.com/yinxiucheng/compose-codelabs/ 下的CustomerComposeView

到此這篇關於Android實現繪製LocationMarkerView圖的範例程式碼的文章就介紹到這了,更多相關Android繪製LocationMarkerView圖內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Android實現繪製LocationMarkerView圖的範例程式碼

目錄

LocationMarkerView圖的繪製

繪製整公里的文字

新增動畫

熱門文章