val row = 32
val column = 18
val spaceY = size.height.div(row).dp
val spaceX = size.width.div(column).dp
绘制方格横竖线，间距spaceX和spaceY
绘制横线，特点起始0结束size.width，位置间隔spaceX乘以行数
绘制竖线，特点起始0结束size.height，位置间隔spaceY乘以列数
ini复制代码
for (stepY in 1 until row) {//横线
drawLine(
start = Offset(0f, spaceY.times(stepY).value),
end = Offset(size.width, spaceY.times(stepY).value),
strokeWidth = 1f,
color = Color.Magenta
)
}
for (stepX in 1 until column) {//竖线
drawLine(
start = Offset(spaceX.times(stepX).value, 0f),
end = Offset(spaceX.times(stepX).value, size.height),
strokeWidth = 1f,
color = Color.Magenta
)
}
效果
绘制开始和结束块
按照间距大小绘制块
定义初始开始点位置[0,0]结束点位置[column - 1,row - 1]
ini复制代码
var piece = Size(spaceX.value, spaceY.value)
drawRect(//1run
color = Color.Yellow,
topLeft = Offset(spaceX.times(rawX).value, spaceY.times(rawY).value),
size = piece, style = Fill
)
drawRect(//end
color = Color(0xFFee4866),
topLeft = Offset(spaceX.times(endX).value, spaceY.times(endY).value),
size = piece, style = Fill
)
添加点击点位事件动态调整结束块位置
定义初始结束值Offset(-1f,-1f)，-1是为了初始没点击时不更改endX、endY
单击画布改变初始Offset ，实现pointerInput获取单击事件拾取点击动作X，y坐标
计算单机位置在屏幕第几个格子位置公式：行数=x/行间距，列数=y/列间距
最后赋值给endX，endY
scss复制代码
//定义
var endOffset by remember {
mutableStateOf(Offset(-1f, -1f))
}
//改变
Modifier
.fillMaxSize()
.background(Color.Black)
.pointerInput(Unit) {
detectTapGestures(
onPress = {
if (!stop) {
endOffset = it
}
},
)
}
//赋值
if (endOffset.x != -1f) {
endX = endOffset.x
.div(spaceX.value)
.toInt()
endY = endOffset.y
.div(spaceY.value)
.toInt()
}
在协程中定义起始块运动频次以及前后左右方向
增加运动开关控制动画开始结束
定义rememberCoroutineScope配合LaunchedEffect控制频率方向刷新
scss复制代码
var stop by remember {
mutableStateOf(false)
}
val scope = rememberCoroutineScope()
if (!stop) {
LaunchedEffect(key1 = "piece", block = {
scope.launch {
while (!stop) {
//频次
delay(1000)
//改变位置方向步数
}
}
})
}
