Fix rounded rect corners computation

Handle the case where corner radius > height/2 (or width/2)

Fix: b/264264761
Test: npm run build:all && npm run test:all
Change-Id: I9327189a3b9a59128d9ed3cc885f5887900a952a
This commit is contained in:
Kean Mariotti
2023-01-04 08:24:00 +00:00
parent a9f2d0567d
commit fbec45f115

View File

@@ -249,26 +249,32 @@ export class Canvas {
const bottomLeft: Point3D = {x: rect.topLeft.x, y: rect.bottomRight.y, z: rect.topLeft.z};
const topRight: Point3D = {x: rect.bottomRight.x, y: rect.topLeft.y, z: rect.bottomRight.z};
// Limit corner radius if larger than height/2 (or width/2)
const height = rect.bottomRight.y - rect.topLeft.y;
const width = rect.bottomRight.x - rect.topLeft.x;
const minEdge = Math.min(height, width);
const cornerRadius = Math.min(rect.cornerRadius, minEdge / 2);
// Create (rounded) rect shape
return new THREE.Shape()
.moveTo(rect.topLeft.x, rect.topLeft.y + rect.cornerRadius)
.lineTo(bottomLeft.x, bottomLeft.y - rect.cornerRadius)
.quadraticCurveTo(bottomLeft.x, bottomLeft.y, bottomLeft.x + rect.cornerRadius, bottomLeft.y)
.lineTo(rect.bottomRight.x - rect.cornerRadius, rect.bottomRight.y)
.moveTo(rect.topLeft.x, rect.topLeft.y + cornerRadius)
.lineTo(bottomLeft.x, bottomLeft.y - cornerRadius)
.quadraticCurveTo(bottomLeft.x, bottomLeft.y, bottomLeft.x + cornerRadius, bottomLeft.y)
.lineTo(rect.bottomRight.x - cornerRadius, rect.bottomRight.y)
.quadraticCurveTo(
rect.bottomRight.x,
rect.bottomRight.y,
rect.bottomRight.x,
rect.bottomRight.y - rect.cornerRadius
rect.bottomRight.y - cornerRadius
)
.lineTo(topRight.x, topRight.y + rect.cornerRadius)
.quadraticCurveTo(topRight.x, topRight.y, topRight.x - rect.cornerRadius, topRight.y)
.lineTo(rect.topLeft.x + rect.cornerRadius, rect.topLeft.y)
.lineTo(topRight.x, topRight.y + cornerRadius)
.quadraticCurveTo(topRight.x, topRight.y, topRight.x - cornerRadius, topRight.y)
.lineTo(rect.topLeft.x + cornerRadius, rect.topLeft.y)
.quadraticCurveTo(
rect.topLeft.x,
rect.topLeft.y,
rect.topLeft.x,
rect.topLeft.y + rect.cornerRadius
rect.topLeft.y + cornerRadius
);
}