自由屋推书网—热门的小说推荐平台！

你的位置： 首页 > Andriod

Compose自定义View实现绘制Rainbow运动三环效果

2023-02-14 09:29:49

本章节介绍的是一个基于Compose自定义的一个Rainbow彩虹运动三环，业务上类似于iWatch上的那个运动三环，不过这里实现的用的一个半圆去绘制，整个看起来像彩虹，三环的外两层为卡路里跟步数，最里层可设定为活动时间，站立次数。同样地首先看一下gif动图：

大致地介绍一下Rainbow的绘制过程，很明显图形分两层，底层有个alpha为0.4f * 255的背景底，前景会依据具体的值的百分占比绘制一个角度的弧度环，从外往里分三个Type的环，每个环有前景跟背景，画三次，需要每次对Canvas进行一个translate，环的绘制逻辑放在了RainbowModel里了，前景加背景所以这个一共需要被调用6次。

@Composable
fun drawCircle(type: Int,
   fraction: Float,
   isBg: Boolean, modifier: Modifier){
  val colorResource = getColorResource(type)
  val color = colorResource(id = colorResource)
  Canvas(modifier = modifier.fillMaxSize()){
val contentWidth = size.width
val contentHeight = size.height
val itemWidth = contentWidth / 7.2f
val spaceWidth = itemWidth / 6.5f
val rectF = createTargetRectF(type, itemWidth, spaceWidth, contentWidth, contentHeight)
val space = if (type == RainbowConstant.TARGET_THIRD_TYPE) 
spaceWidth/2.0f else spaceWidth
val sweepAngel = fraction * 180
val targetModel = createTargetModel(isBg, type, rectF, itemWidth, space, sweepAngel)
println("drawRainbow width:${rectF.width()}, height${rectF.height()}")
if (checkFractionIsSmall(fraction, type)) {
  val roundRectF = createRoundRectF(type, itemWidth, spaceWidth, contentHeight)
  drawRoundRect(
color = color,
topLeft = Offset(x = roundRectF.left, y = roundRectF.top),
size = Size(roundRectF.width(), roundRectF.height()),
cornerRadius = CornerRadius(spaceWidth / 2.0f, spaceWidth / 2.0f)
  )
} else {
  withTransform({ translate(left = rectF.left, top = rectF.top) }) {
targetModel.createComponents()
targetModel.drawComponents(this, color, isBg)
  }
}
  }
}

这里有个边界需要处理，当百分比比较小的时候绘制的一个RoundRectF, 而且不需要translate。

这里前景的三次调用做了个简易的动画，如上面的gif动图所示：

val animator1 = remember{ Animatable(0f, Float.VectorConverter) }
val animator2 = remember{ Animatable(0f, Float.VectorConverter) }
val animator3 = remember{ Animatable(0f, Float.VectorConverter) }
​
val tweenSpec = tween<Float>(durationMillis = 1000, delayMillis = 600, easing = FastOutSlowInEasing)
LaunchedEffect(Unit){
  animator1.animateTo(targetValue = 0.5f, animationSpec = tweenSpec)
}
LaunchedEffect(Unit){
  animator2.animateTo(targetValue = 0.7f, animationSpec = tweenSpec)
}
LaunchedEffect(Unit){
  animator3.animateTo(targetValue = 0.8f, animationSpec = tweenSpec)
}
​
drawCircle(
  type = RainbowConstant.TARGET_FIRST_TYPE,
  fraction = animator1.value,
  isBg = false,
  modifier
)
drawCircle(
  type = RainbowConstant.TARGET_SECOND_TYPE,
  fraction = animator2.value,
  isBg = false,
  modifier
)
drawCircle(
  type = RainbowConstant.TARGET_THIRD_TYPE,
  fraction = animator3.value,
  isBg = false,
  modifier
)

Rainbow环的绘制

上面是Rainbow绘制的外层框架，然后每个Rainbow环的绘制的逻辑（这里没有用SweepGradient，Compose里对应的为brush 参数, 直接用的单一的Color值）即上面的targetModel.drawComponents(this, color, isBg) 背后的逻辑。想必读者都绘制过RoundRectF, 这里的RountF 弧形环是如何实现绘制的呢？整个的逻辑在RainbowModel里，这里把小圆角视为一个近似直角的扇形，所以一共有4个小扇形，然后除去4个小扇形，中间一个大的没有圆角的弧形，外加内层、外层出去圆角的小弧形，所以总共7个path：

private lateinit var centerCircle: Path
private lateinit var wrapperCircle: Path
private lateinit var innerCircle: Path
private lateinit var wrapperStartPath: Path
private lateinit var wrapperEndPath: Path
private lateinit var innerStartPath: Path
private lateinit var innerEndPath: Path

然后稍微简单介绍下小扇形的绘制， 内层跟外层不太一样，通过构建封闭的Path，所以需要用的圆角的曲线，这里近似地用二阶Bezier代替，所以需要找它的Control点，这里直接用没有没有圆角情况下，直径网外射出去跟圆角的交点，同样外、内的计算稍微不太一样：

fun createCommonPoint(rectF: RectF, sweepAngel: Float): PointF {
  val radius = rectF.width() / 2
  val halfCircleLength = (Math.PI * radius).toFloat()
  val pathOriginal = Path()
  pathOriginal.moveTo(rectF.left, (rectF.top + rectF.bottom) / 2)
  pathOriginal.arcTo(rectF, 180f, 180f, false)
  val pathMeasure = PathMeasure(pathOriginal, false)
  val points = FloatArray(2)
  val pointLength = halfCircleLength * sweepAngel / 180f
  pathMeasure.getPosTan(pointLength, points, null)
  return PointF(points[0], points[1])
}
​
fun createEndPoint(rectF: RectF, sweepAngel: Float): PointF {
  val radius = rectF.width() / 2
  val halfCircleLength = (Math.PI * radius).toFloat()
  val pathOriginal = Path()
  pathOriginal.moveTo(rectF.right, (rectF.top + rectF.bottom) / 2)
  pathOriginal.arcTo(rectF, 0f, -180f, false)
  val pathMeasure = PathMeasure(pathOriginal, false)
  val points = FloatArray(2)
  val pointLength = halfCircleLength * sweepAngel / 180f
  pathMeasure.getPosTan(pointLength, points, null)
  return PointF(points[0], points[1])
}

借助PathMeasure通过计算 弧长跟半圆的一个Compare，计算弧长的endpoint, 这个点算作 小扇形的二阶bezier的Control点，然后通过createQuadPath()来构建小扇形。

fun createQuadPath(): Path {
  quadPath = Path()
  quadPath.apply {
  moveTo(startPointF.x, startPointF.y)
  quadTo(ctrlPointF.x, ctrlPointF.y, endPointF.x, endPointF.y)
  lineTo(centerPointF.x, centerPointF.y)
  close()
  }
  return quadPath
}

以下是在RainbowModel里计算wrapperStartPath、wrapperEndPath、innerStartPath、innerEndPath 具体的逻辑

private fun createInnerPath() {
  innerStartPath = Path()
  val startQuadModel = QuadModel()
  startQuadModel.centerPointF =
  startQuadModel.createCommonPoint(innerStartRectF, innerFixAngel)
  startQuadModel.ctrlPointF = startQuadModel.createCommonPoint(innerEndRectF, 0f)
  startQuadModel.startPointF =
  startQuadModel.createCommonPoint(innerEndRectF, innerFixAngel)
  startQuadModel.endPointF = startQuadModel.createCommonPoint(innerStartRectF, 0f)
  innerStartPath = startQuadModel.createQuadPath()
  val endQuadModel = QuadModel()
  endQuadModel.centerPointF =
  endQuadModel.createEndPoint(innerStartRectF, 180 - sweepAngel + innerFixAngel)
  endQuadModel.ctrlPointF = endQuadModel.createCommonPoint(innerEndRectF, sweepAngel)
  endQuadModel.startPointF = endQuadModel.createCommonPoint(innerStartRectF, sweepAngel)
  endQuadModel.endPointF =
  endQuadModel.createEndPoint(innerEndRectF, 180 - sweepAngel + innerFixAngel)
  innerEndPath = endQuadModel.createQuadPath()
}
​
private fun createWrapperPath() {
  val startQuadModel = QuadModel()
  startQuadModel.centerPointF =
  startQuadModel.createCommonPoint(wrapperEndRectF, wrapperFixAngel)
  startQuadModel.ctrlPointF = startQuadModel.createCommonPoint(wrapperStartRectF, 0f)
  startQuadModel.startPointF = startQuadModel.createCommonPoint(wrapperEndRectF, 0f)
  startQuadModel.endPointF =
  startQuadModel.createCommonPoint(wrapperStartRectF, wrapperFixAngel)
  wrapperStartPath = startQuadModel.createQuadPath()
  val endQuadModel = QuadModel()
  endQuadModel.centerPointF =
  endQuadModel.createEndPoint(wrapperEndRectF, 180 - sweepAngel + wrapperFixAngel)
  endQuadModel.ctrlPointF = endQuadModel.createCommonPoint(wrapperStartRectF, sweepAngel)
  endQuadModel.startPointF =
  endQuadModel.createEndPoint(wrapperStartRectF, 180 - sweepAngel + wrapperFixAngel)
  endQuadModel.endPointF = endQuadModel.createCommonPoint(wrapperEndRectF, sweepAngel)
  wrapperEndPath = endQuadModel.createQuadPath()
}

以上大致是小扇形的绘制逻辑，其中关键的一些点在于，因为它比较小所以直接用二阶贝塞尔来代替圆弧，通过PathLength里计算任一sweepAngel下的二阶Bezier的Control点。然后内层跟外层的一些计算上数据几何上的问题的处理，逆时针、顺时针的注意，笔者也是在代码过程中慢慢调试，然后修改变量等。

然后其它三个Path相对比较简单，不做过多介绍了。

代码同样在https://github.com/yinxiucheng/compose-codelabs/ 下的CustomerComposeView 的rainbow的package 下面。

viewComposeRainbow

最新文章

最新推荐

编辑推荐

热门小说

热门文章

三国：蜀汉军师，长坂坡七进七出最新章完整版在线阅读【知乎】《和周贺也结婚十年》贺蓉周贺也完结版免费阅读我一个修仙宗，咋老被人扶贫？全文试读 李修闲王教授小说全本无弹窗《亲妈是千金，舅舅哥哥排队宠》全章节小说_黎嘉沅黎维全文阅读免费试读主角墨九林倾城小说主角名叫许泽明牧晴雪的小说顾今歌沈亦君小说 第4章小说命只剩两年，迟来的亲情林风txt全文在线阅读小说阮幼微宋淮笙在线阅读最新小说《蓄意交换》大结局阅读