android - 我可以在 Composable 中剪掉路径吗
问题描述
我们可以Path
用here画s Canvas
,但我想知道我是否可以只画一个不规则的闭环,然后在循环内部应用背景。例如,可能只有一个框,填充到屏幕上,背景为白色,然后我绘制一个形状(本质上是一个循环)。现在如何将红色背景仅应用于循环捕获的区域?Composables 似乎本质上是 rects,所以这似乎是不可能的。
解决方案
看起来您正在寻找以不同样式绘制路径。
使用相同的Path
,您可以填充和描边:
Canvas(modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.padding(30.dp)
) {
val path = Path().apply {
addOval(Rect(Offset.Zero, size))
}
drawPath(path = path, color = Color.Yellow, style = Fill)
drawPath(path = path, color = Color.Blue, style = Stroke(width = 15f))
}
如果您需要Path
从 SVG 数据创建一个并对其进行缩放,您可以使用 android Path
,因为 compose one 似乎还不支持转换:
Canvas(modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.padding(30.dp)
) {
val path = PathParser.createPathFromPathData("M20.8221,3.25C18.5096,1.2375 15.5096,0 12.1971,0C6.9971,0 2.5221,3.025 0.3971,7.4125C-0.0029,8.25 0.4471,9.25 1.3346,9.55C2.0721,9.8 2.8721,9.45 3.2096,8.75C4.8346,5.425 8.2471,3.125 12.1971,3.125C14.6346,3.125 16.8596,4.025 18.5971,5.475L16.2096,7.8625C15.4221,8.65 15.9721,10 17.0846,10H24.0721C24.7596,10 25.3221,9.4375 25.3221,8.75V1.7625C25.3221,0.65 23.9721,0.0875 23.1846,0.875L20.8221,3.25Z")
val rectF = RectF()
path.computeBounds(rectF, true)
val matrix = Matrix()
val scale = minOf( size.width / rectF.width(), size.height / rectF.height() )
matrix.setScale(scale, scale)
path.transform(matrix)
val composePath = path.asComposePath()
drawPath(path = composePath, color = Color.Yellow, style = Fill)
drawPath(path = composePath, color = Color.Blue, style = Stroke(width = 15f))
}
推荐阅读
- javascript - 使用 Promise.all 在 for 循环后执行函数
- javascript - json 使用 ajax 在另一个新页面上获取数据,但即使使用 e.preventDefault() 也会重新加载页面;功能
- python - Python字符串格式 - 字符串替换后的百分比符号
- python - openSUSE Leap 42.3 python repo
- linux - 安装软件包时如何解决 Linux 中的冲突?
- c++ - 如何去除QGraphicsView&Scene上添加的QPushButton的边界线
- hyperledger-fabric - Hyperledger Fabric 中私有数据的历史
- node.js - MongoDB save() 每次创建新文档而不是更新现有文档
- leaflet - 在 Leaflet 中组合三个具有不同缩放级别的地图
- django - 我怎样才能得到所有的优惠券