Как можно создать кривые линии между блоками?

Рейтинг: 5Ответов: 0Опубликовано: 02.05.2023

Создаю приложение используя Jepack Compose, но столкнулся с проблемой. В приложении требуется рисовать кривые линии и ими соединять блоки друг с другом, встроенного функционала не нашёл, поэтому пришлось самому пытаться придумывать решение

Моя проблема и попытка её исправить: Не могу адекватно рисовать кривые линии между блоками в родительском контейнере. Я попытался генерировать линии между блоками, так:

  • Я начал по удержанию пользователя генерировать полосу, под которой генерируется canvas, чтобы грубо говоря, canvas был над родительским контейнером и его начало и конец соединяли два блока

    @Composable
    fun DrawingScreen() {
     var path by remember { mutableStateOf(Path()) }
     var lineThickness by remember { mutableStateOf(0f) }
     var canvasSize by remember { mutableStateOf(0) }
     var isDrawing by remember { mutableStateOf(false) }
    
     Box(
         modifier = Modifier.fillMaxSize()
     ) {
         Box(
             modifier = Modifier
                 .fillMaxWidth()
                 .height(100.dp)
                 .background(Color.White)
                 .pointerInput(Unit) {
                     detectDragGestures { change, dragAmount ->
                         val x = change.position.x
                         val y = change.position.y
                         if (change.pressure > 0.1f) {
                             path.lineTo(x, y)
                             lineThickness = change.pressure * 30
                             if (!isDrawing) {
                                 isDrawing = true
                                 canvasSize = 0
                             }
                         } else {
                             path.moveTo(x, y)
                         }
                         canvasSize = max(canvasSize, path.getBounds().width.toInt())
                     }
                 }
         )
         if (isDrawing) {
             Canvas(
                 modifier = Modifier
                     .size(canvasSize.dp, canvasSize.dp)
                     .offset(y = 100.dp)
             ) {
                 drawPath(
                     path = path,
                     color = Color.Black,
                     alpha = 1f,
                     style = Stroke(width = lineThickness)
                 )
             }
         }
     }
    }
    

Возможно вы скажете, что это какое-то извращение? Полностью с вами согласен, но не очень понимаю, какой ещё подход можно применить, рефернс брал с Blueprint(скриншот прикрепил ниже). введите сюда описание изображения Проблема: к сожалению адекватно генерировать Canvas под стрелкой у меня не получается. Подскажите, возможно я неверно подошёл к этой задаче или возможно существует готовое api для работы с такого рода вещами

Ответы

Ответов пока нет.