Я хочу нарисовать линейную диаграмму на холсте в Jetpack Compose с небольшим кругом в каждой точке. Основная проблема возникает, когда я рисую круговую точку в каждой точке. В основном я использую функцию QuadraticBezierto () для идеальной кривой. Код, который я попробую, приведен ниже: < /p>
Canvas(modifier = modifier) {
val spacePerHour = (size.width - spacing) / points.size
var lastX = 0f
val normX = mutableListOf()
val normY = mutableListOf()
val strokePath = Path().apply {
val height = size.height
for (i in points.indices) {
val point = points
val nextInfo = points.getOrNull(i + 1) ?: points.last()
val leftRatio = (height / 100) * point
val rightRatio = (height / 100) * nextInfo
val x1 = spacing + i * spacePerHour
val y1 = height - spacing - leftRatio.toFloat()
val x2 = spacing + (i + 1) * spacePerHour
val y2 = height - spacing - rightRatio.toFloat()
// Circle dot points
normX.add(x1)
normY.add(y1)
if (i == 0) {
moveTo(x1, y1)
}
lastX = (x1 + x2) / 2f
quadraticBezierTo(
x1, y1, lastX, (y1 + y2) / 2f
)
}
}
val fillPath = android.graphics.Path(strokePath.asAndroidPath())
.asComposePath()
.apply {
lineTo(lastX, size.height - spacing)
lineTo(spacing, size.height - spacing)
close()
}
drawPath(
path = fillPath,
brush = Brush.verticalGradient(
colors = listOf(
transparentGraphColor,
Color.Transparent
),
endY = size.height - spacing
)
)
drawPath(
path = strokePath,
color = graphColor,
style = Stroke(
width = 3.dp.toPx(),
cap = StrokeCap.Round
)
)
(normX.indices).forEach {
drawCircle(
Color.White,
radius = 3.dp.toPx(),
center = Offset(normX[it], normY[it])
)
}
}
Подробнее здесь: https://stackoverflow.com/questions/719 ... each-point
