Android Compose 遮罩层 通过Path自定义 范围,背景颜色,圆角

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.RoundRect
import androidx.compose.ui.geometry.toRect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.PathOperation
import androidx.compose.ui.graphics.drawscope.Stroke
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

@Composable
fun MaskedView(
    startPoint: Offset,
    endPoint: Offset,
    cornerRadius: Dp,
    maskColor: Color
) {
    val cornerRadiusPx = with(LocalDensity.current) { cornerRadius.toPx() }

    Box(modifier = Modifier.fillMaxSize()) {
        // 底部视图
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Transparent)
        )

        // 遮罩层
        Canvas(modifier = Modifier.fillMaxSize()) {
            // 创建圆角矩形遮罩
            val revealedPath = Path().apply {
                val roundRect = RoundRect(
                    left = startPoint.x,
                    top = startPoint.y,
                    right = endPoint.x,
                    bottom = endPoint.y,
                    topLeftCornerRadius = CornerRadius(cornerRadiusPx),
                    topRightCornerRadius = CornerRadius(cornerRadiusPx),
                    bottomLeftCornerRadius = CornerRadius(cornerRadiusPx),
                    bottomRightCornerRadius = CornerRadius(cornerRadiusPx)
                )
                addRoundRect(roundRect)
            }

            // 创建整个画布的矩形遮罩,与圆角矩形遮罩做差集操作
            val maskPath = Path().apply {
                addRect(size.toRect())
                op(this, revealedPath, PathOperation.Difference)
            }

            // 绘制遮罩
            drawPath(
                path = maskPath,
                color = maskColor
            )
        }
    }
}

使用

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaskedView(
                startPoint = Offset(350f, 350f),
                endPoint = Offset(600f, 600f),
                cornerRadius = 17.dp,
                maskColor = Color.Red.copy(alpha = 0.5f)
            )
        }
    }
}

如何获得位置以及大小?

https://blog.csdn.net/mp624183768/article/details/130371504?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22130371504%22%2C%22source%22%3A%22mp624183768%22%7D

猜你喜欢

转载自blog.csdn.net/mp624183768/article/details/130371344