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() 但是没有成功,也没找到问题所在。 我的最终目标是实现这样的效果:类似于消息气泡,当我拖过一定距离时,气泡就会消失。目前,我还没有取得剩余的成果,遇到了困难。问题中的所有英文均来自机器翻译。不知道你能不能看懂我的问题