change rect shape implementation

alexzhirkevich · May 31, 2024 · 539ae92 · 539ae92
1 parent 086ea4d
commit 539ae92
Show file tree

Hide file tree

Showing 5 changed files with 353 additions and 22 deletions.
diff --git a/compottie/src/commonMain/kotlin/io/github/alexzhirkevich/compottie/LottiePainter.kt b/compottie/src/commonMain/kotlin/io/github/alexzhirkevich/compottie/LottiePainter.kt
@@ -173,7 +173,6 @@ private class LottiePainter(
 
         scale(scale.scaleX, scale.scaleY) {
             translate(offset.x.toFloat(), offset.y.toFloat()) {
-
                 drawIntoCanvas { canvas ->
                     composition.lottieData.layers.fastForEachReversed {
                         if (it is DrawingContent) {

diff --git a/.../commonMain/kotlin/io/github/alexzhirkevich/compottie/internal/schema/shapes/RectShape.kt b/.../commonMain/kotlin/io/github/alexzhirkevich/compottie/internal/schema/shapes/RectShape.kt
@@ -1,7 +1,6 @@
 package io.github.alexzhirkevich.compottie.internal.schema.shapes
 
 import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.geometry.RoundRect
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.util.fastForEach
 import io.github.alexzhirkevich.compottie.internal.content.Content
@@ -12,6 +11,7 @@ import io.github.alexzhirkevich.compottie.internal.schema.shapes.util.CompoundTr
 import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.Transient
+import kotlin.math.min
 
 @Serializable
 @SerialName("rc")
@@ -62,28 +62,72 @@ internal class RectShape(
 
         val position = position.interpolated(frame)
         val size = size.interpolated(frame)
-        val radius = roundedCorners?.interpolated(frame)
-
-        path.rewind()
-
-        val rect = Rect(
-            top = position.x - size.x/2,
-            left = position.y - size.y/2,
-            bottom = position.x + size.x/2,
-            right = position.y + size.y/2,
-        )
-
-        if (radius != null) {
-            path.addRoundRect(
-                RoundRect(
-                    rect = rect,
-                    radiusX = radius,
-                    radiusY = radius
-                )
+        var radius = roundedCorners?.interpolated(frame) ?: 0F
+
+        val halfWidth = size.x / 2f
+        val halfHeight = size.y / 2f
+
+        val maxRadius = min(halfWidth.toDouble(), halfHeight.toDouble()).toFloat()
+        if (radius > maxRadius) {
+            radius = maxRadius
+        }
+
+        path.moveTo(position.x + halfWidth, position.y - halfHeight + radius)
+
+        path.lineTo(position.x + halfWidth, position.y + halfHeight - radius)
+
+        if (radius > 0) {
+            path.arcTo(
+                Rect(
+                    position.x + halfWidth - 2 * radius,
+                    position.y + halfHeight - 2 * radius,
+                    position.x + halfWidth,
+                    position.y + halfHeight
+                ), 0f, 90f, false
+            )
+        }
+
+        path.lineTo(position.x - halfWidth + radius, position.y + halfHeight)
+
+        if (radius > 0) {
+            path.arcTo(
+                Rect(
+                    position.x - halfWidth,
+                    position.y + halfHeight - 2 * radius,
+                    position.x - halfWidth + 2 * radius,
+                    position.y + halfHeight
+                ), 90f, 90f, false
+            )
+        }
+
+        path.lineTo(position.x - halfWidth, position.y - halfHeight + radius)
+
+        if (radius > 0) {
+
+            path.arcTo(
+                Rect(
+                    position.x - halfWidth,
+                    position.y - halfHeight,
+                    position.x - halfWidth + 2 * radius,
+                    position.y - halfHeight + 2 * radius
+                ), 180f, 90f, false
+            )
+        }
+
+        path.lineTo(position.x + halfWidth - radius, position.y - halfHeight)
+
+        if (radius > 0) {
+
+            path.arcTo(
+                Rect(
+                    position.x + halfWidth - 2 * radius,
+                    position.y - halfHeight,
+                    position.x + halfWidth,
+                    position.y - halfHeight + 2 * radius
+                ), 270f, 90f, false
             )
-        } else {
-            path.addRect(rect)
         }
+        path.close()
 
         trimPaths.apply(path, frame)
 

diff --git a/example/shared/src/commonMain/composeResources/files/rect.json b/example/shared/src/commonMain/composeResources/files/rect.json
@@ -0,0 +1,143 @@
+{
+  "v": "5.5.7",
+  "ip": 0,
+  "op": 180,
+  "nm": "Animation",
+  "mn": "{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}",
+  "fr": 60,
+  "w": 512,
+  "h": 512,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ty": 4,
+      "ind": 0,
+      "st": 0,
+      "ip": 0,
+      "op": 180,
+      "nm": "Layer",
+      "mn": "{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}",
+      "ks": {
+        "a": {
+          "a": 0,
+          "k": [
+            256,
+            256
+          ]
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            256,
+            256
+          ]
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100
+          ]
+        },
+        "r": {
+          "a": 0,
+          "k": 0
+        },
+        "o": {
+          "a": 0,
+          "k": 100
+        }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "nm": "Group",
+          "it": [
+            {
+              "ty": "rc",
+              "nm": "Rectangle",
+              "p": {
+                "a": 0,
+                "k": [
+                  256,
+                  256
+                ]
+              },
+              "s": {
+                "a": 0,
+                "k": [
+                  256,
+                  256
+                ]
+              },
+              "r": {
+                "a": 0,
+                "k": 0
+              }
+            },
+            {
+              "ty": "st",
+              "nm": "Stroke",
+              "mn": "{0930ce27-c8f9-4371-b0cf-111a859abfaf}",
+              "o": {
+                "a": 0,
+                "k": 100
+              },
+              "c": {
+                "a": 0,
+                "k": [
+                  1,
+                  0.9803921568627451,
+                  0.2823529411764706
+                ]
+              },
+              "lc": 2,
+              "lj": 2,
+              "ml": 0,
+              "w": {
+                "a": 0,
+                "k": 30
+              }
+            },
+            {
+              "ty": "tr",
+              "a": {
+                "a": 0,
+                "k": [
+                  249.3134328358209,
+                  254.47164179104476
+                ]
+              },
+              "p": {
+                "a": 0,
+                "k": [
+                  249.3134328358209,
+                  254.47164179104476
+                ]
+              },
+              "s": {
+                "a": 0,
+                "k": [
+                  100,
+                  100
+                ]
+              },
+              "r": {
+                "a": 0,
+                "k": 0
+              },
+              "o": {
+                "a": 0,
+                "k": 100
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "meta": {
+    "g": "Glaxnimate 0.4.6-26-g7b05e75c"
+  }
+}