Use Modifier.offset instead of DrawScope.translate to prevent clippin…

…g drop shadow
kubode · Nov 12, 2023 · 354a636 · 354a636
1 parent cb168b7
commit 354a636
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/compose-dropshadow/src/main/kotlin/io/github/kubode/compose/dropshadow/DropShadow.kt b/compose-dropshadow/src/main/kotlin/io/github/kubode/compose/dropshadow/DropShadow.kt
@@ -1,6 +1,7 @@
 package io.github.kubode.compose.dropshadow
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
@@ -20,7 +21,6 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.Paint
 import androidx.compose.ui.graphics.drawscope.draw
-import androidx.compose.ui.graphics.drawscope.translate
 import androidx.compose.ui.graphics.isSpecified
 import androidx.compose.ui.layout.onPlaced
 import androidx.compose.ui.platform.LocalDensity
@@ -148,22 +148,21 @@ private fun DropShadowEffect(
                 width = with(density) { bitmap.width.toDp() },
                 height = with(density) { bitmap.height.toDp() },
             )
+            .offset(
+                x = offset.x,
+                y = offset.y,
+            )
             .blur(
                 radius = radius,
                 edgeTreatment = edgeTreatment,
             ),
     ) {
         debug { "Draw - shadow" }
         drawInvalidationTrigger()
-        translate(
-            left = with(density) { offset.x.toPx() },
-            top = with(density) { offset.y.toPx() },
-        ) {
-            drawImage(
-                image = bitmap,
-                colorFilter = colorFilter,
-            )
-        }
+        drawImage(
+            image = bitmap,
+            colorFilter = colorFilter,
+        )
     }
 }
 

diff --git a/...roidMain/kotlin/io/github/kubode/compose/shadow/sample/shared/DropShadowSample.android.kt b/...roidMain/kotlin/io/github/kubode/compose/shadow/sample/shared/DropShadowSample.android.kt
@@ -7,9 +7,11 @@ import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Phone
@@ -56,15 +58,14 @@ internal actual fun ColumnScope.DropShadowSample() {
         )
     }
     DropShadow(
-        color = DroidColor.copy(alpha = 0.5f),
+        color = Color.Black,
         offset = DpOffset(4.dp, 4.dp),
         radius = 8.dp,
     ) {
-        Image(
-            imageVector = Icons.Outlined.Phone,
-            contentDescription = null,
-            modifier = Modifier.size(48.dp),
-            colorFilter = ColorFilter.tint(DroidColor),
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .border(4.dp, Color.Black, RoundedCornerShape(8.dp)),
         )
     }
     val infiniteTransition = rememberInfiniteTransition(label = "infinite")