Improve choose arrow view

Drjacky · Jun 16, 2024 · d3afa93 · d3afa93
1 parent ce8d0fa
commit d3afa93
Showing 1 changed file with 49 additions and 59 deletions.
diff --git a/presentation/src/main/kotlin/app/web/drjackycv/presentation/base/view/ChooseArrowView.kt b/presentation/src/main/kotlin/app/web/drjackycv/presentation/base/view/ChooseArrowView.kt
@@ -9,31 +9,23 @@ import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.absoluteOffset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.graphics.Outline
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.PaintingStyle
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.PathEffect
-import androidx.compose.ui.graphics.StrokeCap
-import androidx.compose.ui.graphics.drawOutline
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.rotate
+import androidx.compose.ui.graphics.drawscope.translate
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import app.web.drjackycv.presentation.base.theme.purple600
-import app.web.drjackycv.presentation.base.theme.red200
-import app.web.drjackycv.presentation.extension.lineTo
-import app.web.drjackycv.presentation.extension.percentOf
 import app.web.drjackycv.presentation.products.choose.CirclePosition
 
 
@@ -78,56 +70,54 @@ fun ChooseArrowAnimation(
             modifier = Modifier
                 .requiredWidth(200.dp)
                 .requiredHeight(100.dp)
+                .size(200.dp, 100.dp)
                 .padding(16.dp)
         ) {
-            val rect = Rect(Offset.Zero, size)
-            val percent = 65.percentOf(rect.minDimension)
-            val ovalPath = Path().apply {
-                with(rect) {
-                    lineTo(topRight)
-                    lineTo(bottomRight)
-                    lineTo(bottomLeft)
-                    lineTo(topLeft)
-                    close()
-                }
-            }
+            val canvasWidth = size.width
+            val canvasHeight = size.height
+            val circleRadius = 30.dp.toPx()
+            val arrowLength = 20.dp.toPx()
+            val arrowThickness = 3.dp.toPx()
+            val padding = 4.dp.toPx() // Add padding to prevent overlap
 
-            drawIntoCanvas { canvas ->
-                canvas.drawOutline(
-                    outline = Outline.Generic(ovalPath),
-                    paint = Paint().apply {
-                        color = purple600
-                        strokeWidth = 10f
-                        pathEffect = PathEffect.cornerPathEffect(percent)
-                        style = PaintingStyle.Stroke
-                    }
-                )
-            }
-        }
-
-        Canvas(
-            modifier = Modifier
-                .requiredWidth(96.dp)
-                .requiredHeight(96.dp)
-                .padding(20.dp)
-                .absoluteOffset(x = offsetAnimation, y = 2.dp)
-                .rotate(angle)
-        ) {
-            drawCircle(red200)
-            drawLine(
+            // Draw the rounded rectangle
+            drawRoundRect(
                 color = purple600,
-                start = Offset(82f, 105f),
-                end = Offset(54f, 77f),
-                strokeWidth = 8f,
-                cap = StrokeCap.Round
-            )
-            drawLine(
-                color = purple600,
-                start = Offset(54f, 77f),
-                end = Offset(82f, 49f),
-                strokeWidth = 8f,
-                cap = StrokeCap.Round
+                size = size,
+                cornerRadius = CornerRadius(50.dp.toPx(), 50.dp.toPx()),
+                style = Stroke(width = 4.dp.toPx())
             )
+
+            // Calculate the circle's position with padding
+            val circleX = padding + circleRadius + offsetAnimation.toPx()
+            val circleY = canvasHeight / 2
+
+            // Draw the red circle
+            translate(left = circleX - circleRadius, top = circleY - circleRadius) {
+                rotate(
+                    angle,
+                    pivot = androidx.compose.ui.geometry.Offset(circleRadius, circleRadius)
+                ) {
+                    drawCircle(
+                        color = Color(0xFFE27170),
+                        radius = circleRadius,
+                        center = androidx.compose.ui.geometry.Offset(circleRadius, circleRadius)
+                    )
+
+                    // Draw the ">" arrow inside the circle
+                    val arrowPath = Path().apply {
+                        moveTo(circleRadius - arrowLength / 4, circleRadius - arrowLength / 2)
+                        lineTo(circleRadius + arrowLength / 4, circleRadius)
+                        lineTo(circleRadius - arrowLength / 4, circleRadius + arrowLength / 2)
+                    }
+
+                    drawPath(
+                        path = arrowPath,
+                        color = Color(0xFF3F0071),
+                        style = Stroke(width = arrowThickness)
+                    )
+                }
+            }
         }
     }