简单的裁剪clip操作

iOrchid · iOrchid · commit d1dc86535f46 · 2024-05-20T20:54:08.000+08:00
diff --git a/compose/src/main/java/org/zhiwei/compose/screen/graphics/CanvasPathOperations.kt b/compose/src/main/java/org/zhiwei/compose/screen/graphics/CanvasPathOperations.kt
@@ -20,11 +20,18 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.ClipOp
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.graphics.PathEffect
 import androidx.compose.ui.graphics.PathOperation
+import androidx.compose.ui.graphics.drawscope.Fill
 import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.clipPath
+import androidx.compose.ui.graphics.drawscope.clipRect
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.zhiwei.compose.ui.widget.Title_Desc_Text
@@ -41,21 +48,26 @@ internal fun CanvasPathOperations_Screen(modifier: Modifier = Modifier) {
     ) {
         Title_Text(title = "Clip Path/Rect")
         Title_Sub_Text(title = "示例演示path的操作符，DrawScope的clipPath/clipRect使用不同的交互模式而形成不同的UI显示效果")
-        Title_Desc_Text(desc = "path.op Stroke")
-        PathOpStroke()
+        Title_Desc_Text(desc = "path.op Stroke Fill，就是演示数学集合中交集、并集、差集、补集等")
+        PathOpStrokeFill()
+        PathOpStrokeFill(true)
+        Title_Desc_Text(desc = "clipPath 根据路径path裁剪")
+        ClipPath()
+        Title_Desc_Text(desc = "clipRect 根据rect矩形裁剪")
+        ClipRect()
     }
 
 }
 
 @Composable
-private fun PathOpStroke() {
+private fun PathOpStrokeFill(fill: Boolean = false) {
 
     var sides1 by remember { mutableFloatStateOf(5f) }
     var radius1 by remember { mutableFloatStateOf(300f) }
 
     var sides2 by remember { mutableFloatStateOf(7f) }
     var radius2 by remember { mutableFloatStateOf(300f) }
-
+    //两图形的交互层叠方式
     var operation by remember { mutableStateOf(PathOperation.Difference) }
 
     val newPath = remember { Path() }
@@ -69,21 +81,21 @@ private fun PathOpStroke() {
         val cy = canvasHeight / 2
 
 
-        val path1 = createPolygonPath(cx1, cy, sides1.roundToInt(), radius1)
-        val path2 = createPolygonPath(cx2, cy, sides2.roundToInt(), radius2)
-
+        val pathA = createPolygonPath(cx1, cy, sides1.roundToInt(), radius1)
+        val pathB = createPolygonPath(cx2, cy, sides2.roundToInt(), radius2)
+        //绘制A图形
         drawPath(
             color = Color.Red,
-            path = path1,
+            path = pathA,
             style = Stroke(
                 width = 2.dp.toPx(),
                 pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f))
             )
         )
-
+        //绘制B图形
         drawPath(
             color = Color.Blue,
-            path = path2,
+            path = pathB,
             style = Stroke(
                 width = 2.dp.toPx(),
                 pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f))
@@ -97,14 +109,16 @@ private fun PathOpStroke() {
             The curve order is reduced where possible so that cubics may be turned into quadratics,
             and quadratics maybe turned into lines.
          */
-        newPath.op(path1, path2, operation = operation)
-
+        newPath.op(pathA, pathB, operation = operation)
+        //触发层叠方式计算后的部分，对应的路径path的绘制
         drawPath(
             color = Color.Green,
             path = newPath,
-            style = Stroke(
+            //style可以是描边，可以是填充
+            style = if (fill) Fill else Stroke(
                 width = 4.dp.toPx(),
             )
+
         )
     }
 
@@ -118,7 +132,13 @@ private fun PathOpStroke() {
                 PathOperation.Xor -> 3
                 else -> 4
             },
-            options = listOf("Difference", "Intersect", "Union", "Xor", "ReverseDifference"),
+            options = listOf(
+                "Difference A与B的差集",
+                "Intersect B与A的交集",
+                "Union 并集",
+                "Xor 交集在并集的补集",
+                "ReverseDifference B与A的差集"
+            ),
             onSelected = {
                 operation = when (it) {
                     0 -> PathOperation.Difference
@@ -160,6 +180,197 @@ private fun PathOpStroke() {
     }
 }
 
+@Composable
+private fun ClipPath() {
+
+    var sides1 by remember { mutableFloatStateOf(5f) }
+    var radius1 by remember { mutableFloatStateOf(400f) }
+
+    var sides2 by remember { mutableFloatStateOf(7f) }
+    var radius2 by remember { mutableFloatStateOf(300f) }
+
+    var clipOp by remember { mutableStateOf(ClipOp.Difference) }
+
+    Canvas(modifier = canvasModifier) {
+        val canvasWidth = size.width
+        val canvasHeight = size.height
+
+        val cx1 = canvasWidth / 3
+        val cx2 = canvasWidth * 2 / 3
+        val cy = canvasHeight / 2
+
+        val path1 = createPolygonPath(cx1, cy, sides1.roundToInt(), radius1)
+        val path2 = createPolygonPath(cx2, cy, sides2.roundToInt(), radius2)
+
+
+        // Draw path1 to display it as reference, it's for demonstration
+        drawPath(
+            color = Color.Red,
+            path = path1,
+            style = Stroke(
+                width = 2.dp.toPx(),
+                pathEffect = PathEffect.dashPathEffect(floatArrayOf(40f, 20f))
+            )
+        )
+
+        // We apply clipPath operation to pah1 and draw after this operation
+        /*
+            Reduces the clip region to the intersection of the current clip and the given path.
+            This method provides a callback to issue drawing commands within the region defined
+            by the clipped path. After this method is invoked, this clip is no longer applied
+         */
+        clipPath(path = path1, clipOp = clipOp) {
+
+            // Draw path1 to display it as reference, it's for demonstration
+            drawPath(
+                color = Color.Green,
+                path = path1,
+                style = Stroke(
+                    width = 2.dp.toPx(),
+                    pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 40f))
+                )
+            )
+
+
+            // Anything inside this scope will be clipped according to path1 shape
+            drawRect(
+                color = Color.Yellow,
+                topLeft = Offset(100f, 100f),
+                size = Size(canvasWidth - 300f, canvasHeight - 300f)
+            )
+
+            drawPath(
+                color = Color.Blue,
+                path = path2
+            )
+
+            drawCircle(
+                brush = Brush.sweepGradient(
+                    colors = listOf(Color.Red, Color.Green, Color.Magenta, Color.Cyan, Color.Yellow)
+                ),
+                radius = 200f
+            )
+
+            drawLine(
+                color = Color.Black,
+                start = Offset(0f, 0f),
+                end = Offset(canvasWidth, canvasHeight),
+                strokeWidth = 10f
+            )
+        }
+    }
+
+    Column(modifier = Modifier.padding(horizontal = 20.dp, vertical = 4.dp)) {
+
+        ExposedSelectionMenu(title = "Clip Operation",
+            index = when (clipOp) {
+                ClipOp.Difference -> 0
+
+                else -> 1
+            },
+            options = listOf("Difference", "Intersect"),
+            onSelected = {
+                clipOp = when (it) {
+                    0 -> ClipOp.Difference
+                    else -> ClipOp.Intersect
+                }
+            }
+        )
+
+        Text(text = "Sides left: ${sides1.roundToInt()}")
+        Slider(
+            value = sides1,
+            onValueChange = { sides1 = it },
+            valueRange = 3f..12f,
+            steps = 10
+        )
+        Text(text = "radius left: ${radius1.roundToInt()}")
+        Slider(
+            value = radius1,
+            onValueChange = { radius1 = it },
+            valueRange = 100f..500f
+        )
+
+        Text(text = "Sides right: ${sides2.roundToInt()}")
+        Slider(
+            value = sides2,
+            onValueChange = { sides2 = it },
+            valueRange = 3f..12f,
+            steps = 10
+        )
+        Text(text = "radius right: ${radius2.roundToInt()}")
+        Slider(
+            value = radius2,
+            onValueChange = { radius2 = it },
+            valueRange = 100f..500f
+        )
+    }
+}
+
+@Composable
+private fun ClipRect() {
+
+    var clipOp by remember { mutableStateOf(ClipOp.Difference) }
+
+    Canvas(modifier = canvasModifier) {
+        val canvasWidth = size.width
+        val canvasHeight = size.height
+
+
+        drawRect(
+            color = Color.Red,
+            topLeft = Offset(100f, 80f),
+            size = Size(600f, 320f),
+            style = Stroke(
+                width = 2.dp.toPx(),
+                pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f))
+            )
+        )
+
+        /*
+            Reduces the clip region to the intersection of the current clip and the
+            given rectangle indicated by the given left, top, right and bottom bounds.
+            This provides a callback to issue drawing commands within the clipped region.
+            After this method is invoked, this clip is no longer applied.
+         */
+        clipRect(left = 100f, top = 80f, right = 700f, bottom = 400f, clipOp = clipOp) {
+
+            drawCircle(
+                center = Offset(canvasWidth / 2 + 100, +canvasHeight / 2 + 50),
+                brush = Brush.sweepGradient(
+                    center = Offset(canvasWidth / 2 + 100, +canvasHeight / 2 + 50),
+                    colors = listOf(Color.Red, Color.Green, Color.Magenta, Color.Cyan, Color.Yellow)
+                ),
+                radius = 300f
+            )
+
+            drawLine(
+                color = Color.Black,
+                start = Offset(0f, 0f),
+                end = Offset(canvasWidth, canvasHeight),
+                strokeWidth = 10f
+            )
+        }
+    }
+
+    Column(modifier = Modifier.padding(horizontal = 20.dp, vertical = 4.dp)) {
+
+        ExposedSelectionMenu(title = "Clip Operation",
+            index = when (clipOp) {
+                ClipOp.Difference -> 0
+
+                else -> 1
+            },
+            options = listOf("Difference", "Intersect"),
+            onSelected = {
+                clipOp = when (it) {
+                    0 -> ClipOp.Difference
+                    else -> ClipOp.Intersect
+                }
+            }
+        )
+    }
+}
 
 private val canvasModifier = Modifier
     .padding(8.dp)
diff --git a/compose/src/main/java/org/zhiwei/compose/screen/graphics/Ui.kt b/compose/src/main/java/org/zhiwei/compose/screen/graphics/Ui.kt
@@ -15,24 +15,24 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ExposedDropdownMenuBox
-import androidx.compose.material.ExposedDropdownMenuDefaults
-import androidx.compose.material.TextField
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.BorderColor
 import androidx.compose.material.icons.filled.Brush
 import androidx.compose.material.icons.filled.ColorLens
 import androidx.compose.material.icons.filled.TouchApp
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
@@ -77,7 +77,7 @@ fun ExposedSelectionMenu(
 
     var expanded by remember { mutableStateOf(false) }
     var selectedOptionText by remember { mutableStateOf(options[index]) }
-
+    //目前material3的ExposedDropdownMenuBox使用有Bug无法弹窗，所以暂时用material 1.6.7的
     ExposedDropdownMenuBox(
         expanded = expanded,
         onExpandedChange = { expanded = expanded.not() },
@@ -86,39 +86,32 @@ fun ExposedSelectionMenu(
             .padding(vertical = 4.dp),
     ) {
         TextField(
+            value = selectedOptionText,
+            onValueChange = {},
             modifier = Modifier.fillMaxWidth(),
             readOnly = true,
-            value = selectedOptionText,
-            onValueChange = { },
-            label = { Text(title) },
             trailingIcon = {
                 ExposedDropdownMenuDefaults.TrailingIcon(
                     expanded = expanded
                 )
             },
-            colors = ExposedDropdownMenuDefaults.textFieldColors(
-                backgroundColor = Color.White,
-                focusedIndicatorColor = Color.Transparent,
-                unfocusedIndicatorColor = Color.Transparent,
-                disabledIndicatorColor = Color.Transparent,
-            )
         )
+
         ExposedDropdownMenu(
             expanded = expanded,
             onDismissRequest = { expanded = false },
             modifier = Modifier.fillMaxWidth(),
         ) {
             options.forEachIndexed { index: Int, selectionOption: String ->
                 DropdownMenuItem(
+                    text = { Text(text = selectionOption) },
                     onClick = {
                         selectedOptionText = selectionOption
                         expanded = false
                         onSelected(index)
                     },
                     modifier = Modifier.fillMaxWidth(),
-                ) {
-                    Text(text = selectionOption)
-                }
+                )
             }
         }
     }
