feat: Cat Editor draw logic compatible

hushenghao · hushenghao · commit 2c4b3cea7acc · 2025-04-30T14:03:59.000+08:00
feat: Update Cat Editor guidline
Signed-off-by: Hu Shenghao &lt;dede.hu@qq.com&gt;
diff --git a/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditor.kt b/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditor.kt
@@ -32,11 +32,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Matrix
-import androidx.compose.ui.graphics.drawscope.withTransform
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.toSize
 import com.dede.android_eggs.cat_editor.CaptureControllerDelegate.Companion.rememberCaptureControllerDelegate
 import com.dede.android_eggs.cat_editor.CatParts.VIEW_PORT_SIZE
 import com.dede.android_eggs.cat_editor.Utilities.asAndroidMatrix
@@ -84,8 +85,7 @@ internal fun CatEditor(
         captureController.onPerCapture = {
             // set normal state
             selectedPart = -1
-            scale = 1f
-            offset = Offset.Zero
+            controllerImpl.resetGraphicsLayer()
         }
     }
 
@@ -102,10 +102,15 @@ internal fun CatEditor(
             scale = nextScaleLevel(scale, S_MAX, S_MIN)
         }
 
+        var editorSize by remember { mutableStateOf(Size.Zero) }
+
         Box(
             contentAlignment = Alignment.Center,
             modifier = Modifier
                 .fillMaxSize()
+                .onSizeChanged {
+                    editorSize = it.toSize()
+                }
                 .pointerInput(controllerImpl.isGesturesEnabled) {
                     if (!controllerImpl.isGesturesEnabled) {
                         return@pointerInput
@@ -146,8 +151,15 @@ internal fun CatEditor(
             var canvasSize by remember { mutableStateOf(Size.Zero) }
             val canvasMatrix = remember(canvasSize) { createCanvasMatrix(canvasSize) }
 
+            LaunchedEffect(canvasSize, editorSize) {
+                if (canvasSize != Size.Zero && editorSize != Size.Zero) {
+                    controllerImpl.defaultGraphicsLayerScale =
+                        editorSize.minDimension / canvasSize.maxDimension
+                }
+            }
+
             val bitmap: Bitmap? = remember(canvasSize) {
-                if (needAndroidCanvasDraw) createAndroidBitmap(canvasSize) else null
+                if (useAndroidCanvasDraw) createAndroidBitmap(canvasSize) else null
             }
             Canvas(
                 contentDescription = stringResource(StringR.string.cat_editor),
@@ -188,28 +200,23 @@ internal fun CatEditor(
                         return@Canvas
                     }
 
-                    // native canvas draw
-                    if (needAndroidCanvasDraw && bitmap != null) {
+                    if (useAndroidCanvasDraw && bitmap != null) {
+                        // android canvas draw
                         androidCanvasDraw(
                             canvasMatrix.asAndroidMatrix(),
                             bitmap,
                             controllerImpl.colorList,
                             selectedPart,
                             blendRatio
                         )
-                        return@Canvas
-                    }
-
-                    // compose canvas draw
-                    withTransform({ transform(canvasMatrix) }) {
-                        CatParts.drawOrders.forEachIndexed { index, pathDraw ->
-                            var color = controllerImpl.colorList[index]
-                            if (selectedPart == index) {
-                                val blend = Utilities.getHighlightColor(color)
-                                color = Utilities.blendColor(color, blend, blendRatio)
-                            }
-                            pathDraw.drawLambda.invoke(this, color)
-                        }
+                    } else {
+                        // compose canvas draw
+                        composeCanvasDraw(
+                            canvasMatrix,
+                            controllerImpl.colorList,
+                            selectedPart,
+                            blendRatio
+                        )
                     }
                 }
             )
diff --git a/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorAndroidCanvasDraw.kt b/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorAndroidCanvasDraw.kt
@@ -27,8 +27,7 @@ internal fun createAndroidBitmap(size: Size): Bitmap {
 }
 
 // fix Android N canvas scale
-internal val needAndroidCanvasDraw =
-    Build.VERSION.SDK_INT in Build.VERSION_CODES.N..Build.VERSION_CODES.N_MR1
+internal val useAndroidCanvasDraw = Build.VERSION.SDK_INT <= Build.VERSION_CODES.N_MR1
 
 private val androidPaint = Paint(Paint.ANTI_ALIAS_FLAG)
 
@@ -46,13 +45,8 @@ internal fun DrawScope.androidCanvasDraw(
     // draw bitmap
     bitmap.applyCanvas {
         withMatrix(matrix) {
-            CatParts.drawOrders.forEachIndexed { index, pathDraw ->
-                var color = colorList[index]
-                if (selectedPart == index) {
-                    val blend = Utilities.getHighlightColor(color)
-                    color = Utilities.blendColor(color, blend, blendRatio)
-                }
-                pathDraw.drawLambda2.invoke(this, color, androidPaint)
+            forEachCatDrawPart(colorList, selectedPart, blendRatio) { part, color ->
+                part.androidDrawLambda(this, color, androidPaint)
             }
         }
     }
diff --git a/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorComposeCanvasDraw.kt b/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorComposeCanvasDraw.kt
@@ -0,0 +1,36 @@
+package com.dede.android_eggs.cat_editor
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Matrix
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.withTransform
+
+
+internal fun forEachCatDrawPart(
+    colorList: List<Color>,
+    selectedPart: Int,
+    blendRatio: Float,
+    block: (part: CatParts.PathDraw, color: Color) -> Unit
+) {
+    CatParts.drawOrders.forEachIndexed { index, pathDraw ->
+        var color = colorList[index]
+        if (selectedPart == index) {
+            val blend = Utilities.getHighlightColor(color)
+            color = Utilities.blendColor(color, blend, blendRatio)
+        }
+        block(pathDraw, color)
+    }
+}
+
+internal fun DrawScope.composeCanvasDraw(
+    matrix: Matrix,
+    colorList: List<Color>,
+    selectedPart: Int,
+    blendRatio: Float
+) {
+    withTransform({ transform(matrix) }) {
+        forEachCatDrawPart(colorList, selectedPart, blendRatio) { part, color ->
+            part.drawLambda(this, color)
+        }
+    }
+}
diff --git a/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorController.kt b/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorController.kt
@@ -83,6 +83,12 @@ internal class CatEditorControllerImpl(private val speed: Long) : CatEditorContr
 
     private val colorStateList = mutableStateListOf(*CatPartColors.colors(speed))
 
+    override var defaultGraphicsLayerScale: Float = 1f
+        set(value) {
+            field = value
+            resetGraphicsLayer()
+        }
+
     override val colorList: List<Color> = colorStateList
 
     override var selectPart: Int by selectedPartState
@@ -107,13 +113,15 @@ internal class CatEditorControllerImpl(private val speed: Long) : CatEditorContr
     }
 
     override fun resetGraphicsLayer() {
-        scaleState.floatValue = 1f
+        scaleState.floatValue = defaultGraphicsLayerScale
         offsetState.value = Offset.Zero
     }
 }
 
 internal interface CatEditorController {
 
+    var defaultGraphicsLayerScale: Float
+
     var isSelectEnabled: Boolean
 
     var isGesturesEnabled: Boolean
diff --git a/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorGridLine.kt b/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorGridLine.kt
@@ -12,7 +12,6 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import kotlin.math.roundToInt
 
 /**
  * A grid line for the cat editor.
@@ -22,11 +21,10 @@ import kotlin.math.roundToInt
 internal fun CatEditorGridLine(
     modifier: Modifier = Modifier,
     color: Color = MaterialTheme.colorScheme.tertiary,
-    step: Dp = 20.dp,
+    gridLineCount: Int = 28,
     strokeWidth: Dp = 1.dp,
 ) {
 
-    val stepPx = with(LocalDensity.current) { step.toPx() }
     val strokeWidthPx = with(LocalDensity.current) { strokeWidth.toPx() }
 
     Canvas(
@@ -35,10 +33,12 @@ internal fun CatEditorGridLine(
             .then(modifier),
         onDraw = {
             clipRect {
-                val columns = (size.width / stepPx).roundToInt()
-                val offsetX = (size.width - columns * stepPx) / 2f
+                val step = size.maxDimension / gridLineCount
+
+                val columns = (size.width / step).toInt() + 1
+                val offsetX = (size.width - columns * step) / 2f
                 for (c in 0 until columns) {
-                    val x = offsetX + c * stepPx
+                    val x = offsetX + c * step
                     drawLine(
                         color,
                         start = Offset(x, 0f),
@@ -47,10 +47,10 @@ internal fun CatEditorGridLine(
                     )
                 }
 
-                val rows = (size.height / stepPx).roundToInt()
-                val offsetY = (size.height - rows * stepPx) / 2f
+                val rows = (size.height / step).toInt() + 1
+                val offsetY = (size.height - rows * step) / 2f
                 for (r in 0 until rows) {
-                    val y = offsetY + r * stepPx
+                    val y = offsetY + r * step
                     drawLine(
                         color,
                         start = Offset(0f, y),
diff --git a/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorScreen.kt b/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatEditorScreen.kt
@@ -5,10 +5,9 @@
 
 package com.dede.android_eggs.cat_editor
 
+import android.util.Log
 import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.calculateEndPadding
-import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
@@ -43,7 +42,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asAndroidBitmap
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
@@ -119,6 +117,7 @@ fun CatEditorScreen() {
                 val deferred = captureController.captureAsync()
                 scope.launch {
                     val bitmap = deferred.await().asAndroidBitmap()
+                    Log.i("CatEditorScreen", "saveCatToAlbum, w * h: ${bitmap.width} * ${bitmap.height}")
                     val uri = ShareCatUtils.saveCat(context, bitmap, catName)
                     if (uri != null) {
                         context.toast("🐱")
@@ -240,14 +239,10 @@ fun CatEditorScreen() {
             )
         }
     ) { contentPadding ->
-        val layoutDirection = LocalLayoutDirection.current
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(
-                    start = contentPadding.calculateStartPadding(layoutDirection),
-                    end = contentPadding.calculateEndPadding(layoutDirection)
-                ),
+                .padding(contentPadding),
             contentAlignment = Alignment.Center
         ) {
             CatEditor(
diff --git a/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatParts.kt b/feature/cat-editor/src/main/java/com/dede/android_eggs/cat_editor/CatParts.kt
@@ -368,7 +368,7 @@ internal object CatParts {
 
         val drawLambda: DrawScope.(color: Color) -> Unit = { draw(it) }
 
-        val drawLambda2: AndroidCanvas.(color: Color, paint: Paint) -> Unit = { c, p ->
+        val androidDrawLambda: AndroidCanvas.(color: Color, paint: Paint) -> Unit = { c, p ->
             p.setColor(c.toArgb())
             androidDraw(p)
         }

Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,7 @@ internal fun createAndroidBitmap(size: Size): Bitmap {`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`// fix Android N canvas scale`
`30`		`-internal val needAndroidCanvasDraw =`
`31`		`- Build.VERSION.SDK_INT in Build.VERSION_CODES.N..Build.VERSION_CODES.N_MR1`
	`30`	`+internal val useAndroidCanvasDraw = Build.VERSION.SDK_INT <= Build.VERSION_CODES.N_MR1`
`32`	`31`
`33`	`32`	`private val androidPaint = Paint(Paint.ANTI_ALIAS_FLAG)`
`34`	`33`
`@@ -46,13 +45,8 @@ internal fun DrawScope.androidCanvasDraw(`
`46`	`45`	`// draw bitmap`
`47`	`46`	`bitmap.applyCanvas {`
`48`	`47`	`withMatrix(matrix) {`
`49`		`- CatParts.drawOrders.forEachIndexed { index, pathDraw ->`
`50`		`- var color = colorList[index]`
`51`		`- if (selectedPart == index) {`
`52`		`- val blend = Utilities.getHighlightColor(color)`
`53`		`- color = Utilities.blendColor(color, blend, blendRatio)`
`54`		`- }`
`55`		`- pathDraw.drawLambda2.invoke(this, color, androidPaint)`
	`48`	`+ forEachCatDrawPart(colorList, selectedPart, blendRatio) { part, color ->`
	`49`	`+ part.androidDrawLambda(this, color, androidPaint)`
`56`	`50`	`}`
`57`	`51`	`}`
`58`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -368,7 +368,7 @@ internal object CatParts {`
`368`	`368`
`369`	`369`	`val drawLambda: DrawScope.(color: Color) -> Unit = { draw(it) }`
`370`	`370`
`371`		`- val drawLambda2: AndroidCanvas.(color: Color, paint: Paint) -> Unit = { c, p ->`
	`371`	`+ val androidDrawLambda: AndroidCanvas.(color: Color, paint: Paint) -> Unit = { c, p ->`
`372`	`372`	`p.setColor(c.toArgb())`
`373`	`373`	`androidDraw(p)`
`374`	`374`	`}`