Shapes paths show rendering errors when stroked [313497325]

Assigned

Bug

Status Update

No update yet.

Description

ch...@google.com

created issue #1

Nov 27, 2023 09:39PM

The Shapes library creates cubic bezier curves, which can be turned into Path objects for rendering. This all works visually by default when those paths are filled, but a user discovered a problem with the paths are stroked instead. It looks (from a sample I saw) like we are creating path segments to some of the control points.

Sample code which reproduces the problem in a Compose app:
Canvas(modifier = modifier) {
val halfWidth = size.width * 0.5f
var radius = halfWidth * 0.75f
val center = size.width / 2

radius = radius * 2f;
val pentagonal2Star = RoundedPolygon.star(
numVerticesPerRadius = 4,
rounding = CornerRounding(radius * 0.32f, .0f),
innerRounding = CornerRounding(radius * 0.32f, .0f),
innerRadius = radius*0.352f,
radius = radius,
center = PointF(center, center)
)

drawPath(
pentagonal2Star.toPath().asComposePath(),
Color(0xFF838FE4),style = Stroke(),
)

Comments

ch...@google.com <ch...@google.com> #2Nov 28, 2023 01:43AM

Hi Ed, Thank you so much for these suggestions. I've been reviewing them and merging them in. Hopefully it should be live. I've included a thank you note too in the article.

ch...@google.com <ch...@google.com> #3Nov 28, 2023 03:17PM

Great! Thanks a lot, I'll look for the live updates soon!

ch...@google.com <ch...@google.com> #4Nov 28, 2023 10:49PM

Reassigned to ss...@google.com.

I confirmed that the problem seems to come from the absolute sizing of the shape (vs our default canonical size calculations).
I recreated the shape using the canonical size (not providing a radius and center) and then transformed it into position and it appeared correctly.

Here is the code that creates both shapes (the one causing the problem, shape, and the canonical version without the problem, shape1):
fun Shape() {
Canvas(modifier = Modifier.fillMaxSize(1f)) {
val halfWidth = size.width * 0.5f
var radius = halfWidth * 0.75f * 2f;
val center = size.width / 2
val roundingFactor = .32f

val rounding = CornerRounding(radius * roundingFactor, .0f)
val innerRounding = CornerRounding(radius * roundingFactor, .0f)
val innerRadius = radius * 0.352f
val shape = RoundedPolygon.star(
numVerticesPerRadius = 4,
rounding = rounding,
innerRounding = innerRounding,
innerRadius = innerRadius,
radius = radius,
center = PointF(center, center)
)
val cubics = shape.toCubicShape().cubics
for (cubic in cubics) {
println("Cubic: " + cubic)
}
val shape1 = RoundedPolygon.star(4,
rounding = CornerRounding(roundingFactor),
innerRadius = .352f)
val matrix = Matrix()
matrix.setTranslate(center, center)
matrix.preScale(radius, radius)
shape1.transform(matrix)
val cubics1 = shape1.toCubicShape().cubics
for (cubic in cubics1) {
println("Cubic1: " + cubic)
}

This code produces the following set of data. You can see that the control points for the first shape are not the same as those for the second shape, and that there are extra points in the first shape.

Cubic: p0: PointF(828.4127, 367.15466), p1: PointF(851.5461, 374.82065), p2: PointF(863.1127, 378.65363), p3: PointF(828.4127, 367.15463)
Cubic: p0: PointF(828.4127, 367.15463), p1: PointF(994.8269, 422.3015), p2: PointF(994.8269, 657.6984), p3: PointF(828.4127, 712.84534)
Cubic: p0: PointF(828.4127, 712.84534), p1: PointF(1754.1299, 406.07806), p2: PointF(1445.5575, 508.33383), p3: PointF(828.4127, 712.8454)
Cubic: p0: PointF(828.4127, 712.8454), p1: PointF(828.41266, 712.84534), p2: PointF(828.4127, 712.8454), p3: PointF(828.41266, 712.8454)
Cubic: p0: PointF(828.41266, 712.8454), p1: PointF(713.2715, 751.0013), p2: PointF(655.70087, 770.0793), p3: PointF(828.41266, 712.8454)
Cubic: p0: PointF(828.41266, 712.8454), p1: PointF(773.7947, 730.9449), p2: PointF(730.9449, 773.7947), p3: PointF(712.8454, 828.41266)
Cubic: p0: PointF(712.8454, 828.41266), p1: PointF(754.74066, 701.9874), p2: PointF(740.7756, 744.12915), p3: PointF(712.8454, 828.41266)
Cubic: p0: PointF(712.8454, 828.41266), p1: PointF(712.84534, 828.41266), p2: PointF(712.8454, 828.4127), p3: PointF(712.8454, 828.4127)
Cubic: p0: PointF(712.8454, 828.4127), p1: PointF(636.1556, 1059.8358), p2: PointF(597.8107, 1175.5472), p3: PointF(712.84534, 828.4127)
Cubic: p0: PointF(712.84534, 828.4127), p1: PointF(657.6985, 994.82684), p2: PointF(422.3015, 994.82684), p3: PointF(367.15463, 828.4127)
Cubic: p0: PointF(367.15463, 828.4127), p1: PointF(367.1546, 828.4127), p2: PointF(367.15463, 828.4128), p3: PointF(367.1546, 828.4127)
Cubic: p0: PointF(367.1546, 828.4127), p1: PointF(367.15457, 828.41266), p2: PointF(367.15457, 828.4127), p3: PointF(367.15457, 828.41266)
Cubic: p0: PointF(367.15457, 828.41266), p1: PointF(388.4358, 892.6321), p2: PointF(399.07642, 924.74176), p3: PointF(367.15454, 828.41266)
Cubic: p0: PointF(367.15454, 828.41266), p1: PointF(349.05505, 773.7947), p2: PointF(306.20526, 730.94495), p3: PointF(251.58731, 712.84546)
Cubic: p0: PointF(251.58731, 712.84546), p1: PointF(-513.0047, 459.47217), p2: PointF(-258.1407, 543.92993), p3: PointF(251.58733, 712.8454)
Cubic: p0: PointF(251.58733, 712.8454), p1: PointF(251.5873, 712.84534), p2: PointF(251.58728, 712.8454), p3: PointF(251.58728, 712.8454)
Cubic: p0: PointF(251.58728, 712.8454), p1: PointF(451.20828, 778.9965), p2: PointF(551.0188, 812.0721), p3: PointF(251.58728, 712.84534)
Cubic: p0: PointF(251.58728, 712.84534), p1: PointF(85.17317, 657.6984), p2: PointF(85.17317, 422.30154), p3: PointF(251.58728, 367.15463)
Cubic: p0: PointF(251.58728, 367.15463), p1: PointF(324.09537, 343.12665), p2: PointF(299.926, 351.136), p3: PointF(251.58728, 367.1546)
Cubic: p0: PointF(251.58728, 367.1546), p1: PointF(251.5873, 367.15457), p2: PointF(251.58734, 367.15457), p3: PointF(251.58737, 367.15457)
Cubic: p0: PointF(251.58737, 367.15457), p1: PointF(-420.1438, 589.75507), p2: PointF(-756.0094, 701.05536), p3: PointF(251.58737, 367.15454)
Cubic: p0: PointF(251.58737, 367.15454), p1: PointF(306.20532, 349.05505), p2: PointF(349.05518, 306.20526), p3: PointF(367.15466, 251.58731)
Cubic: p0: PointF(367.15466, 251.58731), p1: PointF(378.94458, 216.00943), p2: PointF(375.01462, 227.86873), p3: PointF(367.15463, 251.58731)
Cubic: p0: PointF(367.15463, 251.58731), p1: PointF(367.15463, 251.5873), p2: PointF(367.15466, 251.58728), p3: PointF(367.15466, 251.58728)
Cubic: p0: PointF(367.15466, 251.58728), p1: PointF(411.13705, 118.863625), p2: PointF(433.12827, 52.5018), p3: PointF(367.15472, 251.5873)
Cubic: p0: PointF(367.15472, 251.5873), p1: PointF(422.30157, 85.17308), p2: PointF(657.69855, 85.17308), p3: PointF(712.8454, 251.5873)
Cubic: p0: PointF(712.8454, 251.5873), p1: PointF(686.2475, 171.32404), p2: PointF(695.11346, 198.07845), p3: PointF(712.84546, 251.58728)
Cubic: p0: PointF(712.84546, 251.58728), p1: PointF(712.84546, 251.5873), p2: PointF(712.84546, 251.58734), p3: PointF(712.84546, 251.58737)
Cubic: p0: PointF(712.84546, 251.58737), p1: PointF(740.77563, 335.87085), p2: PointF(754.7407, 378.01257), p3: PointF(712.84546, 251.58737)
Cubic: p0: PointF(712.84546, 251.58737), p1: PointF(730.94495, 306.20535), p2: PointF(773.79474, 349.0551), p3: PointF(828.4127, 367.1546)
Cubic: p0: PointF(828.4127, 367.1546), p1: PointF(828.4127, 367.15463), p2: PointF(828.4128, 367.15463), p3: PointF(828.4127, 367.15463)
Cubic: p0: PointF(828.4127, 367.15463), p1: PointF(828.41266, 367.15463), p2: PointF(828.4127, 367.15466), p3: PointF(828.4127, 367.15466)

Cubic1: p0: PointF(828.4128, 367.15466), p1: PointF(828.4128, 367.15466), p2: PointF(828.4128, 367.15466), p3: PointF(828.4128, 367.15466)
Cubic1: p0: PointF(828.4128, 367.15466), p1: PointF(994.8269, 422.30157), p2: PointF(994.8269, 657.6985), p3: PointF(828.4128, 712.8454)
Cubic1: p0: PointF(828.4128, 712.8454), p1: PointF(828.4128, 712.84534), p2: PointF(828.4128, 712.84534), p3: PointF(828.4128, 712.84534)
Cubic1: p0: PointF(828.4128, 712.84534), p1: PointF(828.4127, 712.8454), p2: PointF(828.4127, 712.8454), p3: PointF(828.4127, 712.8454)
Cubic1: p0: PointF(828.4127, 712.8454), p1: PointF(828.4127, 712.8454), p2: PointF(828.4127, 712.8454), p3: PointF(828.4127, 712.8454)
Cubic1: p0: PointF(828.4127, 712.8454), p1: PointF(773.7947, 730.9449), p2: PointF(730.9449, 773.7947), p3: PointF(712.8454, 828.4127)
Cubic1: p0: PointF(712.8454, 828.4127), p1: PointF(712.8454, 828.4127), p2: PointF(712.8454, 828.4127), p3: PointF(712.8454, 828.4127)
Cubic1: p0: PointF(712.8454, 828.4127), p1: PointF(712.8454, 828.4127), p2: PointF(712.8454, 828.4127), p3: PointF(712.8454, 828.4127)
Cubic1: p0: PointF(712.8454, 828.4127), p1: PointF(657.6985, 994.827), p2: PointF(422.3015, 994.827), p3: PointF(367.1546, 828.4127)
Cubic1: p0: PointF(367.1546, 828.4127), p1: PointF(367.1546, 828.4127), p2: PointF(367.1546, 828.4127), p3: PointF(367.1546, 828.4127)
Cubic1: p0: PointF(367.1546, 828.4127), p1: PointF(367.1546, 828.4127), p2: PointF(367.1546, 828.4127), p3: PointF(367.1546, 828.4127)
Cubic1: p0: PointF(367.1546, 828.4127), p1: PointF(349.0551, 773.7947), p2: PointF(306.20532, 730.9449), p3: PointF(251.58731, 712.8454)
Cubic1: p0: PointF(251.58731, 712.8454), p1: PointF(251.58731, 712.8454), p2: PointF(251.58731, 712.8454), p3: PointF(251.58731, 712.8454)
Cubic1: p0: PointF(251.58731, 712.8454), p1: PointF(251.58731, 712.8454), p2: PointF(251.58731, 712.8454), p3: PointF(251.58728, 712.8454)
Cubic1: p0: PointF(251.58728, 712.8454), p1: PointF(251.58725, 712.8454), p2: PointF(251.58728, 712.8454), p3: PointF(251.58728, 712.84534)
Cubic1: p0: PointF(251.58728, 712.84534), p1: PointF(85.173065, 657.6984), p2: PointF(85.17313, 422.30145), p3: PointF(251.58731, 367.15457)
Cubic1: p0: PointF(251.58731, 367.15457), p1: PointF(251.58731, 367.15457), p2: PointF(251.58731, 367.15454), p3: PointF(251.58731, 367.15457)
Cubic1: p0: PointF(251.58731, 367.15457), p1: PointF(251.58731, 367.15457), p2: PointF(251.58731, 367.15457), p3: PointF(251.58731, 367.15457)
Cubic1: p0: PointF(251.58731, 367.15457), p1: PointF(251.58731, 367.15454), p2: PointF(251.58731, 367.15457), p3: PointF(251.58731, 367.15454)
Cubic1: p0: PointF(251.58731, 367.15454), p1: PointF(306.20532, 349.05505), p2: PointF(349.0551, 306.20526), p3: PointF(367.1546, 251.58728)
Cubic1: p0: PointF(367.1546, 251.58728), p1: PointF(367.15463, 251.58728), p2: PointF(367.15463, 251.58725), p3: PointF(367.15463, 251.58728)
Cubic1: p0: PointF(367.15463, 251.58728), p1: PointF(367.15463, 251.58728), p2: PointF(367.15463, 251.58728), p3: PointF(367.15463, 251.58728)
Cubic1: p0: PointF(367.15463, 251.58728), p1: PointF(367.15463, 251.58725), p2: PointF(367.15463, 251.58728), p3: PointF(367.1546, 251.58728)
Cubic1: p0: PointF(367.1546, 251.58728), p1: PointF(422.3015, 85.173004), p2: PointF(657.69855, 85.173004), p3: PointF(712.8454, 251.58728)
Cubic1: p0: PointF(712.8454, 251.58728), p1: PointF(712.84546, 251.58728), p2: PointF(712.84546, 251.58725), p3: PointF(712.84546, 251.58728)
Cubic1: p0: PointF(712.84546, 251.58728), p1: PointF(712.84546, 251.58731), p2: PointF(712.84546, 251.58731), p3: PointF(712.84546, 251.58737)
Cubic1: p0: PointF(712.84546, 251.58737), p1: PointF(712.84546, 251.5874), p2: PointF(712.84546, 251.58737), p3: PointF(712.84546, 251.58737)
Cubic1: p0: PointF(712.84546, 251.58737), p1: PointF(730.94495, 306.20535), p2: PointF(773.7948, 349.05518), p3: PointF(828.4127, 367.15466)
Cubic1: p0: PointF(828.4127, 367.15466), p1: PointF(828.4127, 367.15466), p2: PointF(828.4127, 367.15466), p3: PointF(828.4127, 367.15466)
Cubic1: p0: PointF(828.4127, 367.15466), p1: PointF(828.4127, 367.15466), p2: PointF(828.4128, 367.15466), p3: PointF(828.4128, 367.15466)

ch...@google.com <ch...@google.com> #5Nov 28, 2023 10:50PM

Over to Sergio, since you have more working familiarity with the corner-shaping/cutting code where the problem (I believe) lies.
I would look specifically for code that assumes either the canonical size or a default center of (0,0)

ap...@google.com <ap...@google.com> #6Dec 4, 2023 07:10PM

Project: platform/frameworks/support
Branch: androidx-main

commit b2312d641b7cbdc3c3e9028fce6dcbc5d7bf9052
Author: Sergio Sancho <ssancho@google.com>
Date: Mon Dec 04 18:08:16 2023

Ensure creating shapes at different sizes is equivalent.

Since we had an absolute epsilon for checking when something is close to
0, when the values where bigger there was fewer of them meeting the
threshold than they should be. Now we check the relative value.
Relnote: "Fixed bug when creating big shapes."
Bug:

http://b/313497325
Test: Added

Change-Id: I4fd6696643cc3725425cf7b55536a1242fa896c6

M graphics/graphics-shapes/src/androidInstrumentedTest/kotlin/androidx/graphics/shapes/RoundedPolygonTest.kt
M graphics/graphics-shapes/src/commonMain/kotlin/androidx/graphics/shapes/RoundedPolygon.kt

https://android-review.googlesource.com/2856631

Issue 313497325