Android實現(xiàn)繪制LocationMarkerView圖的示例代碼

更新時間：2023年02月10日 14:07:29 作者：cxy107750

LocationMarker是運動軌跡上Start、End, 以及整公里點上筆者自定義繪制的一個MarkerView。這篇文章主要介紹了Android實現(xiàn)繪制LocationMarkerView圖的示例代碼，希望對大家有所幫助

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

這里先看下gif動圖：

LocationMarkerView圖的繪制

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

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

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

獲取markerViewPath, 首先給p1、p3(HPoint)，p2、p4(VPoint)中8個點設置Value值，circleModel(radius)，然后從底部p1底部點逆時針轉(zhuǎn)圈依次調(diào)用三階貝塞爾函數(shù)接口，最后close實現(xiàn)水滴倒置狀態(tài)的Path，見實現(xiàn)：

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函數(shù)里進行如上所述的繪制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的繪制，不過開放了一個調(diào)用原始drawText的轉(zhuǎn)換API, 原始的drawText 是需要Paint參數(shù)的，同時依賴Paint來計算Text 對應RectF的Height值，這里Paint()是Compose的一個Paint，需要調(diào)用asFrameworkPaint() 進行轉(zhuǎn)化

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
}

添加動畫

這里簡單的用一個放大的動畫實現(xiàn)，跟原始的高德地圖、Mapbox地圖的一個growth過程的一個動畫有些差距的，暫且先這樣實現(xiàn)吧。首先是定義兩個radius相關的State對象，具體來說是Proxy, 以及一個動畫生長的大小控制的Float的變量Fraction，再通過自定義animateDpAsState作為 animation值的對象，最終給到MarkParams作為參數(shù)，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,以及調(diào)用原生的drawText, 最后添加了一個scale類似的動畫實現(xiàn)，最終實現(xiàn)運動軌跡里的一個小小的View的實現(xiàn)。

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

到此這篇關于Android實現(xiàn)繪制LocationMarkerView圖的示例代碼的文章就介紹到這了,更多相關Android繪制LocationMarkerView圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: