我对Android Compose比较陌生,作为一个项目,我正在try 设计一个条形图.收集各种示例,我现在正try 在可用DrawScope合成的画布中设计轴.一旦我画了线,我的下一个任务就是在画布的右侧创建y轴的标签.但如图所示,在try 将文本与y轴上的适当分隔线对齐时,我遇到了一个障碍,即最终的DraText在画布底部.然而,它可以画在画布的顶部.我不知道为什么,但这可能是我写下面的Composable的方式的一个缺陷.
@OptIn(ExperimentalTextApi::class)
@Composable
fun BarGraphAxes(modifier: Modifier,
verticalLines: Int,
horizontalLines : Int) {
val barAxisColor = colorResource(id = R.color.grey)
val textColor = colorResource(id = R.color.textprimary)
val configuration = LocalConfiguration.current
Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Top) {
Box(modifier = Modifier
.width(configuration.screenWidthDp.dp)
.height(300.dp)
.padding(start = 30.dp, top = 20.dp)
) {
val textMeasurer = rememberTextMeasurer()
Canvas(modifier = Modifier.fillMaxSize()) {
val barWidthPx =
1.dp.toPx() //calculate in DP before converting to Px is the Compose preferred way to draw
val yAxisBottomExtraOffset = 20.dp.toPx()
val dashPathEffect =
PathEffect.dashPathEffect(
intervals = floatArrayOf(10f, 10f),
phase = 0f
)
val myWidth = (size.width.toDp() - 50.dp).toPx()
val topPaddingForAxes = 15
//draw X-Axis
drawLine(
color = barAxisColor,
start = Offset(0f, size.height),
end = Offset(myWidth, size.height),
strokeWidth = barWidthPx,
)
//draw Y-Axis right hand
drawLine(
color = barAxisColor,
start = Offset(myWidth, 0f),
end = Offset(myWidth, size.height + yAxisBottomExtraOffset),
strokeWidth = barWidthPx,
pathEffect = dashPathEffect
)
//draw Y-Axis left hand
drawLine(
color = barAxisColor,
start = Offset(0f, 0f),
end = Offset(0f, size.height + yAxisBottomExtraOffset),
strokeWidth = barWidthPx,
pathEffect = dashPathEffect
)
//draw X-Axis top
drawLine(
color = barAxisColor,
start = Offset(0f, 0f),
end = Offset(myWidth, 0f),
strokeWidth = barWidthPx,
)
val horizontalSize = size.height / (horizontalLines + 1)
val verticalSize = myWidth / (verticalLines + 1) //distance between the axes
//Note, this is not where the final drawText will be at, just experimenting with static positioning.
drawText(textMeasurer, text = "Label", style = TextStyle(fontSize = 12.sp, color = textColor), overflow = TextOverflow.Ellipsis, topLeft = Offset(myWidth, 0f - 20f))
drawText(textMeasurer, text = "Label", style = TextStyle(fontSize = 12.sp, color = textColor), overflow = TextOverflow.Ellipsis, topLeft = Offset(myWidth, horizontalSize - 20f))
drawText(textMeasurer, text = "Label", style = TextStyle(fontSize = 12.sp, color = textColor), overflow = TextOverflow.Ellipsis, topLeft = Offset(myWidth, (horizontalSize * 2) - 20f))
drawText(textMeasurer, text = "Label", style = TextStyle(fontSize = 12.sp, color = textColor), overflow = TextOverflow.Ellipsis, topLeft = Offset(myWidth, (horizontalSize * 3) - 20f))
//draw the dividing vertical axes
repeat(verticalLines) { i ->
val startXCoordinate = verticalSize * (i + 1) //start at 0
drawLine(
color = barAxisColor,
start = Offset(startXCoordinate, 0f),
end = Offset(
startXCoordinate,
size.height + yAxisBottomExtraOffset
),
strokeWidth = barWidthPx,
pathEffect = dashPathEffect
)
}
//draw the dividing horizontal axes
repeat(horizontalLines) { i ->
val startYCoordinate = horizontalSize * (i + 1)
drawLine(
color = barAxisColor,
start = Offset(0f, startYCoordinate),
end = Offset(myWidth, startYCoordinate),
strokeWidth = barWidthPx
)
}
}
}
}
}
如果有人能给我指明正确的方向,解释为什么draText在底部,而不是在顶部,我将不胜感激.