Skip to content

Improve shapes documentation #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 8, 2024
Merged

Improve shapes documentation #240

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc753d7
Remove custom toPath() method in favour of using `toPath().asComposeP…
riggaroo Mar 8, 2024
6b7dd10
Apply Spotless
riggaroo Mar 8, 2024
af0c23e
Remove custom toPath() method in favour of using `toPath().asComposeP…
riggaroo Mar 8, 2024
c3a6d53
Merge branch 'riggaroo/shapes-to-path' of https://github.com/android/…
riggaroo Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 12 additions & 37 deletions compose/snippets/src/main/java/com/example/compose/snippets/graphics/ShapesSnippets.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import androidx.compose.ui.graphics.Matrix
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.asComposePath
import androidx.compose.ui.graphics.drawscope.scale
import androidx.compose.ui.graphics.drawscope.translate
import androidx.compose.ui.graphics.graphicsLayer
Expand Down Expand Up @@ -87,8 +88,7 @@ fun BasicShapeCanvas() {
centerX = size.width / 2,
centerY = size.height / 2
)
val roundedPolygonPath = roundedPolygon.cubics
.toPath()
val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
onDrawBehind {
drawPath(roundedPolygonPath, color = Color.Blue)
}
Expand All @@ -115,8 +115,7 @@ private fun RoundedShapeExample() {
smoothing = 1f
)
)
val roundedPolygonPath = roundedPolygon.cubics
.toPath()
val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
onDrawBehind {
drawPath(roundedPolygonPath, color = Color.Black)
}
Expand All @@ -143,8 +142,7 @@ private fun RoundedShapeSmoothnessExample() {
smoothing = 0.1f
)
)
val roundedPolygonPath = roundedPolygon.cubics
.toPath()
val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
onDrawBehind {
drawPath(roundedPolygonPath, color = Color.Black)
}
Expand Down Expand Up @@ -181,7 +179,7 @@ private fun MorphExample() {

val morph = Morph(start = triangle, end = square)
val morphPath = morph
.toComposePath(progress = 0.5f)
.toPath(progress = 0.5f).asComposePath()

onDrawBehind {
drawPath(morphPath, color = Color.Black)
Expand Down Expand Up @@ -228,7 +226,8 @@ private fun MorphExampleAnimation() {

val morph = Morph(start = triangle, end = square)
val morphPath = morph
.toComposePath(progress = morphProgress.value)
.toPath(progress = morphProgress.value)
.asComposePath()

onDrawBehind {
drawPath(morphPath, color = Color.Black)
Expand Down Expand Up @@ -300,7 +299,7 @@ class MorphPolygonShape(
matrix.scale(size.width / 2f, size.height / 2f)
matrix.translate(1f, 1f)

val path = morph.toComposePath(progress = percentage)
val path = morph.toPath(progress = percentage).asComposePath()
path.transform(matrix)
return Outline.Generic(path)
}
Expand Down Expand Up @@ -351,42 +350,19 @@ private fun MorphOnClick() {
}

// [START android_compose_shapes_polygon_compose_shape]
@JvmOverloads
fun RoundedPolygon.toPath(path: Path = Path()): Path {
pathFromCubics(path, cubics)
return path
}
private fun pathFromCubics(
path: Path,
cubics: List<Cubic>
) {
var first = true
path.rewind()
for (element in cubics) {
if (first) {
path.moveTo(element.anchor0X, element.anchor0Y)
first = false
}
path.cubicTo(
element.control0X, element.control0Y, element.control1X, element.control1Y,
element.anchor1X, element.anchor1Y
)
}
path.close()
}
fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
private val polygon: RoundedPolygon,
private var matrix: Matrix = Matrix()
) : Shape {
private val path = Path()
private var path = Path()
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
): Outline {
path.rewind()
polygon.toPath(path)
path = polygon.toPath().asComposePath()
matrix.reset()
val bounds = polygon.getBounds()
val maxDimension = max(bounds.width, bounds.height)
Expand Down Expand Up @@ -482,7 +458,7 @@ class CustomRotatingMorphShape(
matrix.translate(1f, 1f)
matrix.rotateZ(rotation)

val path = morph.toComposePath(progress = percentage)
val path = morph.toPath(progress = percentage).asComposePath()
path.transform(matrix)

return Outline.Generic(path)
Expand Down Expand Up @@ -596,8 +572,7 @@ private fun CartesianPoints() {
Box(
modifier = Modifier
.drawWithCache {
val roundedPolygonPath = polygon.cubics
.toPath()
val roundedPolygonPath = polygon.toPath().asComposePath()
onDrawBehind {
scale(size.width * 0.5f, size.width * 0.5f) {
translate(size.width * 0.5f, size.height * 0.5f) {
Expand Down