学习贝塞尔曲线的时候,这条曲线并没有像我想象的那样变化

问题描述 投票:0回答:0
data class DragStatus(
    //是否正在拖动
    val onDrag: Boolean = false,
    //拖动大于一定距离,气泡消失
    val onDragComplete: Boolean = false
)

class MainActivity : ComponentActivity() {

    companion object {
        const val RADIUS = 30f
        const val MIN_DRAG_DISTANCE = 110
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var offsetX by remember { mutableStateOf(0f) }
            var offsetY by remember { mutableStateOf(0f) }
            var controlX by remember { mutableStateOf(0f) }
            var controlY by remember { mutableStateOf(0f) }
            var sin by remember { mutableStateOf(0f) }
            var cos by remember { mutableStateOf(0f) }
            var circleStartX by remember { mutableStateOf(0f) }
            var circleStartY by remember { mutableStateOf(0f) }
            var bubbleEndX by remember { mutableStateOf(0f) }
            var bubbleEndY by remember { mutableStateOf(0f) }
            var bubbleStartX by remember { mutableStateOf(0f) }
            var bubbleStartY by remember { mutableStateOf(0f) }
            var circleEndX by remember { mutableStateOf(0f) }
            var circleEndY by remember { mutableStateOf(0f) }
            var dragStatus by remember {
                mutableStateOf(DragStatus())
            }
            var circleRadius by remember { mutableStateOf(RADIUS) }
            val bubbleRadius by remember { mutableStateOf(RADIUS) }
            var minDragDistance by remember { mutableStateOf(0f) }
            var previousDistance by remember { mutableStateOf(0f) }
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Canvas(modifier = Modifier.offset(), onDraw = {
                    //消息数量的圆
                    //什么时候圆显示:1.拖动没超过一定距离
                    if (!dragStatus.onDragComplete) {
                        drawCircle(Color.Red, circleRadius)
                    }
                })
                val path = Path()
                Canvas(
                    modifier = Modifier
                        .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                        .pointerInput(Unit) {
                            detectDragGestures(
                                onDrag = { change, dragAmount ->
                                    offsetX += dragAmount.x
                                    offsetY += dragAmount.y
                                    minDragDistance = sqrt(
                                        (offsetX
                                            .toDouble()
                                            .pow(2.0) + offsetY
                                            .toDouble()
                                            .pow(2.0)).toFloat()
                                    )
                                    if (minDragDistance > previousDistance) {
                                        circleRadius -= ((minDragDistance - previousDistance) / 5)
                                    } else if (minDragDistance < previousDistance) {
                                        circleRadius += ((previousDistance - minDragDistance) / 5)
                                    }
                                    previousDistance = minDragDistance
                                    dragStatus = dragStatus.copy(onDrag = true)
                                },
                                onDragEnd = {
                                    dragStatus = dragStatus.copy(onDrag = false)
                                    if (minDragDistance < MIN_DRAG_DISTANCE) {
                                        offsetX = 0f
                                        offsetY = 0f
                                    } else {
                                        dragStatus = dragStatus.copy(onDragComplete = true)

                                    }
                                    minDragDistance = 0f
                                    circleRadius = RADIUS
                                }
                            )
                        }, onDraw = {
                        path.reset()
                        if (dragStatus.onDrag) {
                            //画可以拖动的圆
                            drawCircle(Color.Green, bubbleRadius)
                            //画两个圆之间的连接效果
                            controlX = (offsetX + 0) / 2
                            controlY = (offsetY + 0) / 2
                            sin = offsetY / minDragDistance
                            cos = offsetX / minDragDistance
                            circleStartX = circleRadius * sin - 0f
                            circleStartY = 0f - circleRadius * cos
                            bubbleEndX = offsetX + bubbleRadius * sin
                            bubbleEndY = offsetY - bubbleRadius * cos
                            bubbleStartX = offsetX - bubbleRadius * sin
                            bubbleStartY = offsetY + bubbleRadius * cos
                            circleEndX = 0f - circleRadius * sin
                            circleEndY = 0f + circleRadius * cos
                            println(
                                "------------------------------\noffsetX: $offsetX offsetY: $offsetY \n" +
                                        "controlX: $controlX controlY: $controlY\nminDragDistance: $minDragDistance\nsin: $sin cos: $cos\n" +
                                        "circleStartX: $circleStartX circleStartY: $circleStartY\nbubbleEndX: $bubbleEndX bubbleEndY: $bubbleEndY\n" +
                                        "bubbleStartX: $bubbleStartX bubbleStartY: $bubbleStartY\ncircleEndX: $circleEndX circleEndY: $circleEndY\n" + "------------------------------\n"
                            )
                            path.moveTo(-circleStartX, -circleStartY)
                            path.quadraticBezierTo(-controlX, -controlY, -bubbleEndX, -bubbleEndY)
                            path.lineTo(-bubbleStartX, -bubbleStartY)
                            path.quadraticBezierTo(-controlX, -controlY, -circleEndX, -circleEndY)
                            path.close()
                            drawPath(path, Color.Green)
                        }
                    })
            }
        }
    }
}

我用了两种不同的颜色来区分。现在,一个画布画了一个圆,另一个画布画了一个可以拖动的圆,以及连接两个圆的路径。当我拖动绿色圆圈时,红色圆圈的半径逐渐减小。绿色部分左边的两个点应该在小圆的半径上。打印log,发现(circleStartX, circleStartY) (circleEndX, circleEndY)的值确实变了,但是UI并没有因为红圈半径变小而变,还是在原来的位置

以上就是所有的代码,效果就是当我移动红点的时候,移动的红点和原点之间有一个连线效果。上面的代码可以直接运行,请帮我找出问题所在。谢谢。现在的效果是有问题的,找了半天也没发现什么问题。我太傻了。 现在的效果是我拖动红点的时候改变了起点和终点的值,打印确实改变了,但是path画出来的效果没有改变。我叫路径。 reset() 但是没有成功,也没找到问题所在。 我的最终目标是实现这样的效果:类似于消息气泡,当我拖过一定距离时,气泡就会消失。目前,我还没有取得剩余的成果,遇到了困难。问题中的所有英文均来自机器翻译。不知道你能不能看懂我的问题

kotlin android-jetpack-compose android-canvas bezier cubic-bezier
© www.soinside.com 2019 - 2024. All rights reserved.