'How to make the zoom and scrolling function of graph curves made in a custom painter
Good time of day.I wrote a custom vertical line graph using a custom painter, where random values are added in real time and now I need to implement the zoom and scrolling function, how can I do this?Thank you all in advance
This is the grid drawing code
class NetChartPainter extends CustomPainter {
NetChartPainter(this.size, this.verCount, this.horCount);
final Color shadowColor = Colors.black.withOpacity(0.15);
final int verCount;
final Size size;
final int horCount;
@override
void paint(Canvas canvas, Size size) {
int separateLine = ((verCount - 1) / 2).round();
print(separateLine);
double lineX = ((size.width - 20) / verCount);
paintVerticalLines(lineX, size, separateLine, canvas);
double lineY = ((size.height - 10) / horCount);
paintHorizontalLines(lineY, lineX, size, canvas);
}
void paintHorizontalLines(
double lineY, double lineX, Size size, Canvas canvas) {
for (int i = 0; i < horCount; i++) {
double dy = ((i + 1) * lineY);
Offset p1 = Offset(lineX + 20, dy);
Offset p2 = Offset(size.width - 1, dy);
final line1 = Paint()
..color = const Color(0xFF6D5F62)
..shader
..strokeWidth = 3;
canvas.drawLine(p1, p2, line1);
}
}
void paintVerticalLines(
double lineX, Size size, int separateLine, Canvas canvas) {
for (int i = 0; i < verCount; i++) {
double dx = ((i + 1) * lineX) + 20;
Offset p1 = Offset(dx, 1);
Offset p2 = Offset(dx, size.height - 10);
final line1 = Paint()
..color = const Color(0xFF6D5F62)
..shader
..strokeWidth = i == separateLine ? 7 : 2;
canvas.drawLine(p1, p2, line1);
}
}
This code calculates the points and connects them with lines, now conicTo is not used
List<Offset> _computePoints(
Offset c, double width, double height, double hr) {
List<Offset> points = [];
x.forEach((yp) {
final xx = width - (yp - min) * hr;
final dp = Offset(xx, c.dy);
points.add(dp);
c += Offset(0, height);
});
return points;
}
@override
bool shouldRebuildSemantics(CurvesPainter oldDelegate) => false;
Path _computePath(List<Offset> points) {
final path = Path();
for (var i = 0; i < points.length; i++) {
final p = points[i];
if (i == 0) {
path.moveTo(p.dx, p.dy);
} else {
path.lineTo(p.dx, p.dy);
}
}
return path;
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
