9、Jetpack Compose 入门 — 自定义图形Canvas

在Compose中，作用域的概念随处可见，自定义图形也相同。下面一段代码，创立一个Canvas的作用域，并讲其规模指定为父元素中的一切可用空间：

Canvas(modifier = Modifier.fillMaxSize()) {
}

一、制造图形

• drawLine：制造直线
• drawCircle：制造圆形
• drawRect：制造矩形

1. drawLine（制造直线）

@Composable
fun CanvasLine() {
  val pathList: List<Pair<PathEffect, String>> = listOf(
    Pair(PathEffect.cornerPathEffect(6f), "cornerPathEffect"),
    Pair(PathEffect.dashPathEffect(intervals = floatArrayOf(25f, 25f, 5f, 10f)), "dashPathEffect")
  )
  val strokeWidth = remember { mutableStateOf(20) }
  val color = remember { mutableStateOf(Color.Blue) }
  val cap = remember { mutableStateOf(StrokeCap.Butt) }
  val alpha = remember { mutableStateOf(1f) }
  val pathEffect = remember { mutableStateOf(pathList[0].first) }
  Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
    ......
    Canvas(
      modifier = Modifier
        .width(200.dp)
        .height(400.dp),
      onDraw = {
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawLine(
          color = color.value,
          start = Offset(x = canvasWidth * 3 / 4, y = canvasHeight / 4),
          end = Offset(x = canvasWidth / 4, y = canvasHeight * 3 / 4),
          strokeWidth = strokeWidth.value.toFloat(),
          cap = cap.value,
          pathEffect = pathEffect.value,
          alpha = alpha.value
        )
      })
  }
}

2. drawCircle（制造圆形）

@Composable
fun CanvasCircle() {
  Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
    val color = remember { mutableStateOf(Color.Blue) }
    val radiusParent = remember { mutableStateOf(1f) }
    val centerXOffset = remember { mutableStateOf(0) }
    val centerYOffset = remember { mutableStateOf(0) }
    val alpha = remember { mutableStateOf(1f) }
    val drawStyle: MutableState<DrawStyle> = remember { mutableStateOf(Fill) }
    ......
    Canvas(
      modifier = Modifier.size(200.dp),
      onDraw = {
        drawCircle(
          color = color.value,
          radius = size.minDimension * radiusParent.value / 2.0f,
          center = Offset(this.center.x + centerXOffset.value, this.center.y + centerYOffset.value),
          alpha = alpha.value,
          style = drawStyle.value
        )
      })
  }
}

3. drawRect（制造矩形）

@Composable
fun CanvasRect() {
  Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
    val color = remember { mutableStateOf(Color.Blue) }
    val topLeftXOffset = remember { mutableStateOf(0) }
    val topLeftYOffset = remember { mutableStateOf(0) }
    val width = remember { mutableStateOf(200) }
    val height = remember { mutableStateOf(200) }
    val alpha = remember { mutableStateOf(1f) }
    val drawStyle: MutableState<DrawStyle> = remember { mutableStateOf(Fill) }
    ......
    Canvas(
      modifier = Modifier.size(200.dp),
      onDraw = {
        drawRect(
          color = color.value,
          topLeft = Offset(topLeftXOffset.value.toFloat(), topLeftYOffset.value.toFloat()),
          size = Size(width = width.value.toFloat(), height = height.value.toFloat()),
          alpha = alpha.value,
          style = drawStyle.value
        )
      })
  }
}

4. drawArc（制造弧线）

@Composable
fun CanvasArc() {
  val color = remember { mutableStateOf(Color.Blue) }
  val startAngle = remember { mutableStateOf(0f) }
  val sweepAngle = remember { mutableStateOf(180f) }
  val useCenter = remember { mutableStateOf(false) }
  val topLeftXOffset = remember { mutableStateOf(0) }
  val topLeftYOffset = remember { mutableStateOf(0) }
  val width = remember { mutableStateOf(200) }
  val height = remember { mutableStateOf(200) }
  val alpha = remember { mutableStateOf(1f) }
  val drawStyle: MutableState<DrawStyle> = remember { mutableStateOf(Stroke(width = 8f)) }
  Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
    ......
    Canvas(
      modifier = Modifier
        .background(Color.LightGray)
        .width(200.dp)
        .height(200.dp),
      onDraw = {
        drawArc(
          color = color.value,
          startAngle = startAngle.value,
          sweepAngle = sweepAngle.value,
          useCenter = useCenter.value,
          topLeft = Offset(topLeftXOffset.value.toFloat(), topLeftYOffset.value.toFloat()),
          size = Size(width.value.dp.toPx(), height.value.dp.toPx()),
          alpha = alpha.value,
          style = drawStyle.value
        )
      })
  }
}

5. drawPath（制造途径）

@Composable
fun CanvasCustom() {
  Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
    val color = remember { mutableStateOf(Color.Blue) }
    val alpha = remember { mutableStateOf(1f) }
    val drawStyle: MutableState<DrawStyle> = remember { mutableStateOf(Stroke(width = 8f)) }
    ......
    Canvas(
      modifier = Modifier
        .background(Color.LightGray)
        .size(200.dp),
      onDraw = {
        //制造一个五角星
        //指定五角星的5个极点坐标
        val point1 = Offset(100.dp.toPx(), 0.dp.toPx())
        val point2 = Offset(38.dp.toPx(), 200.dp.toPx())
        val point3 = Offset(200.dp.toPx(), 78.dp.toPx())
        val point4 = Offset(0.dp.toPx(), 78.dp.toPx())
        val point5 = Offset(162.dp.toPx(), 200.dp.toPx())
        drawPath(
          path = Path().apply {
            //移动到开端点
            moveTo(point1.x, point1.y)
            //制造直线
            lineTo(point2.x, point2.y)
            lineTo(point3.x, point3.y)
            lineTo(point4.x, point4.y)
            lineTo(point5.x, point5.y)
            //封闭图形（回到开端点）
            close()
          },
          color = color.value,
          alpha = alpha.value,
          style = drawStyle.value
        )
      })
  }
}

二、图形转换

Canvas(
  modifier = Modifier.size(200.dp)
) {
  withTransform({
    scale(scale = scale.value, pivot = center)
    translate(left = translateX.value, top = translateY.value)
    rotate(degrees = degrees.value, pivot = center)
  }) {
    drawImage(image = imageBitmap)
  }
}

只需要单独运用其间一种转换办法的话，可以这样：

scale(scale = scale.value, pivot = center) {
  drawImage(image = imageBitmap)
}
translate(left = translateX.value, top = translateY.value) {
  drawImage(image = imageBitmap)
}
rotate(degrees = degrees.value, pivot = center) {
  drawImage(image = imageBitmap)
}

三、骤变Brush

颜色骤变的办法有很多种，比如线性骤变，发散骤变等。各种办法都有着对应的api，但总结起来所需要的参数无非就是如下三种：颜色集结、开端方位、平铺方式。

fun xxxGradient(颜色集结, 颜色集结作用的开端规模, tileMode(平铺方式))

1. 颜色集结：在开端规模内的颜色骤变次第。其传参类型有两种挑选，Pair<Float, Color>和List<Color>，前者可根据Float的数值对每个颜色的占比进行分配，后者标明每个颜色骤变中地点的方位是以开端方位(0)到中止方位(1)进行均分的方位。

   //开端方位为黄色，到20%的方位骤变为赤色，再到完毕的方位骤变为蓝色
   val colorStops = arrayOf(
       0.0f to Color.Yellow,
       0.2f to Color.Red,
       1f to Color.Blue
   )
   //如下两种办法等价：
   //开端方位为黄色，到20%的方位骤变为赤色，再到完毕的方位骤变为蓝色
   val colors = listOf(Color.Yellow, Color.Red, Color.Blue)
   val colors = arrayOf(
       0.0f to Color.Yellow,
       0.5f to Color.Red,
       1f to Color.Blue
   )
   

2. tileMode：可选值有Clamp、Repeated、Mirror、Decal。

   • Clamp：边沿固定为毕竟的颜色。然后，它会将区域的剩下空间制造为间隔最近的颜色。
   • Repeated：边沿按从终究一种颜色到第一种颜色的次第镜像。
   • Mirror：边沿按从终究一种颜色到第一种颜色的次第镜像。
   • Decal：仅在距离大小的规模内烘托。TileMode.Decal使用通明的黑色对原始距离以外的内容进行采样，而TileMode.Clamp对边沿颜色进行采样。

   

3. 方向

   • linearGradient：线性
   • horizontalGradient：横向
   • verticalGradient：纵向
   • radialGradient：径向
   • sweepGradient：发散