快捷導(dǎo)航

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

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

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

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

這里先看下gif動(dòng)圖：

LocationMarkerView圖的繪制

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

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

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

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

fun getPath(radius: Float): Path{
  circleModel(radius)
  val path = Path()
  p1.setYValue(p1.y + radius * 0.2f * 1.05f) //設(shè)置 p1 底部左右兩個(gè)點(diǎn)的y值
  p1.y += radius * 0.2f * 1.05f //設(shè)置 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
}

拿到相應(yīng)的Path后，在Composeable函數(shù)里進(jìn)行如上所述的繪制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的繪制，不過開放了一個(gè)調(diào)用原始drawText的轉(zhuǎn)換API, 原始的drawText 是需要Paint參數(shù)的，同時(shí)依賴Paint來計(jì)算Text 對(duì)應(yīng)RectF的Height值，這里Paint()是Compose的一個(gè)Paint，需要調(diào)用asFrameworkPaint() 進(jìn)行轉(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()
}

計(jì)算Text 繪制依賴的RectF，并將rectF.left作為drawText的X值，同時(shí)計(jì)算drawText的基線 baseLineY，最后傳入nativeCanvas.drawText() 接口進(jìn)行繪制。

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
}

添加動(dòng)畫

這里簡(jiǎn)單的用一個(gè)放大的動(dòng)畫實(shí)現(xiàn)，跟原始的高德地圖、Mapbox地圖的一個(gè)growth過程的一個(gè)動(dòng)畫有些差距的，暫且先這樣實(shí)現(xiàn)吧。首先是定義兩個(gè)radius相關(guān)的State對(duì)象，具體來說是Proxy, 以及一個(gè)動(dòng)畫生長的大小控制的Float的變量Fraction，再通過自定義animateDpAsState作為 animation值的對(duì)象，最終給到MarkParams作為參數(shù)，animation值的變化，會(huì)導(dǎo)致MarkParams的變化，最后導(dǎo)致Recompose，形成動(dòng)畫。

  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, 最后添加了一個(gè)scale類似的動(dòng)畫實(shí)現(xiàn)，最終實(shí)現(xiàn)運(yùn)動(dòng)軌跡里的一個(gè)小小的View的實(shí)現(xiàn)。

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

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

您可能感興趣的文章: