class PathPainter extends CustomPainter {
PathPainter({required this.progress});
final double progress;
@override
void paint(Canvas canvas, Size size) {
var path = createPath(size);
try {
PathMetric pathMetric = path.computeMetrics().first;
Path extractPath =
pathMetric.extractPath(0.0, pathMetric.length * progress);
// drawing circle at the start of path
canvas.drawCircle(
Offset(0, size.height), 8.0, Paint()..color = Colors.green);
canvas.drawPath(extractPath, myPaint);
var metric = extractPath.computeMetrics().first;
final offset = metric.getTangentForOffset(metric.length)!.position;
print(offset);
//if (offset == const Offset(30.5, 275.8)) {
// print("i am matched");
// canvas.drawCircle(Offset(30.5, 275.8), 8.0, Paint()..color = Colors.green);
}
canvas.drawCircle(offset, 8.0, Paint()..color = Colors.green);
} catch (e) {}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}
This is the code I am using to build my path. I am trying to figure out the middle point of this path or how to get the middle point of any custom path.
Why do I need it?
I am trying to add a circle in the middle of path as the path progresses (animates).
What I've tried
if (offset == const Offset(30.5, 275.8)) {
print("i am matched");
canvas.drawCircle(Offset(30.5, 275.8), 8.0, Paint()..color = Colors.green);
}
I've tried this code sample just to put a circle on a static offset from the path, but it didn't work.
Also tried
var length = pathMetric.length / 2;
if (extractPath.computeMetrics().length == length) {
canvas.drawCircle(offset, 8.0, Paint()..color = Colors.green);
}
Any help would be appreciated.
All of this hustle is because I am trying to build the path in this .gif.
https://cdn-images-1.medium.com/max/800/1*OH8yRHjfJhBvRxLlUAqT4Q.gif