'Flutter Custom Clipper Radius Octogone
I'm trying to round off the shapes of my clipper but it's impossible. I tried with the path.arcToPoint property but I think I don't really understand how it works to add radius on path. Only with arcToPoint property ?
I put my Clipper class and the code to call the clipper here :
ClipPath(
clipper: Clipper(points: 8),
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
color: Color.red,
),
child: Center(child: Text('1'),
),
);
class Clipper extends CustomClipper<Path> {
Clipper({this.points = 8});
/// The number of points of the star
final int points;
@override
Path getClip(Size size) {
double width = size.width;
double halfWidth = width / 2;
double bigRadius = halfWidth;
double radius = halfWidth / 1.25;
double degreesPerStep = _degToRad(360 / points);
double halfDegreesPerStep = degreesPerStep / 2;
var path = Path();
double max = 2 * math.pi;
path.moveTo(width, halfWidth);
for (double step = 0; step < max; step += degreesPerStep) {
path.lineTo(halfWidth + bigRadius * math.cos(step), halfWidth + bigRadius * math.sin(step));
path.arcToPoint(
Offset(
halfWidth + bigRadius * math.cos(step),
halfWidth + bigRadius * math.sin(step),
),
radius: const Radius.circular(50));
path.lineTo(halfWidth + radius * math.cos(step + halfDegreesPerStep), halfWidth + radius * math.sin(step + halfDegreesPerStep));
path.arcToPoint(
Offset(
halfWidth + radius * math.cos(step + halfDegreesPerStep),
halfWidth + radius * math.sin(step + halfDegreesPerStep),
),
radius: const Radius.circular(50));
}
path.close();
return path;
}
double _degToRad(num deg) => deg * (math.pi / 180.0);
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
Clipper oldie = oldClipper as Clipper;
return points != oldie.points;
}
}
Thanks
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|