如何拆分paintComponent方法并重构多NameRecord存储的GUI程序？

Got it, let's fix this—when you scale from single to multiple data points, shoving everything into paintComponent gets messy fast. Splitting into focused classes will make your code way easier to debug, extend, and maintain. Here's a step-by-step approach tailored to your use case:

1. Extract Data-Specific Rendering to a NameRecordRenderer #

First, take all the code that draws a single NameRecord (lines, labels, data points—whatever you're using) and move it into a dedicated class. This class only cares about drawing one record relative to the chart's bounds.

public class NameRecordRenderer {
    private final Color defaultColor;
    private final Font labelFont;

    // Constructor with configurable styles (adjust based on your needs)
    public NameRecordRenderer(Color defaultColor, Font labelFont) {
        this.defaultColor = defaultColor;
        this.labelFont = labelFont;
    }

    // Draw a single NameRecord onto the graphics context
    public void render(Graphics2D g2d, NameRecord record, Rectangle chartBounds, 
                       double xScale, double yScale) {
        // Set up styles for this record (you could even let records have custom colors!)
        g2d.setColor(defaultColor);
        g2d.setFont(labelFont);

        // Example: Draw a line for the record's data points
        List<Point> dataPoints = record.getDataPoints(); // Assume your record has this method
        for (int i = 0; i < dataPoints.size() - 1; i++) {
            Point p1 = dataPoints.get(i);
            Point p2 = dataPoints.get(i + 1);
            // Scale points to fit the chart bounds
            int x1 = chartBounds.x + (int) (p1.x * xScale);
            int y1 = chartBounds.y + chartBounds.height - (int) (p1.y * yScale);
            int x2 = chartBounds.x + (int) (p2.x * xScale);
            int y2 = chartBounds.y + chartBounds.height - (int) (p2.y * yScale);
            g2d.drawLine(x1, y1, x2, y2);
        }

        // Add any other per-record drawing (labels, markers, etc.)
        g2d.drawString(record.getName(), chartBounds.x + 10, chartBounds.y + 20);
    }
}

2. Extract Chart Infrastructure to a ChartBackgroundRenderer #

Next, pull out all the code that draws the non-data parts: axes, grid lines, chart borders, titles. This class handles the "frame" of your chart, regardless of how many records you're showing.

public class ChartBackgroundRenderer {
    private final Color gridColor;
    private final Font axisFont;

    public ChartBackgroundRenderer(Color gridColor, Font axisFont) {
        this.gridColor = gridColor;
        this.axisFont = axisFont;
    }

    public void render(Graphics2D g2d, Rectangle chartBounds, String xLabel, String yLabel) {
        // Draw chart border
        g2d.setColor(Color.BLACK);
        g2d.drawRect(chartBounds.x, chartBounds.y, chartBounds.width, chartBounds.height);

        // Draw grid lines (example: horizontal lines)
        g2d.setColor(gridColor);
        int gridSpacing = 50;
        for (int y = chartBounds.y + gridSpacing; y < chartBounds.y + chartBounds.height; y += gridSpacing) {
            g2d.drawLine(chartBounds.x, y, chartBounds.x + chartBounds.width, y);
        }

        // Draw axis labels
        g2d.setColor(Color.BLACK);
        g2d.setFont(axisFont);
        g2d.drawString(xLabel, chartBounds.x + chartBounds.width/2 - 20, chartBounds.y + chartBounds.height + 20);
        // Rotate for Y-axis label (common trick)
        g2d.rotate(Math.toRadians(-90));
        g2d.drawString(yLabel, -(chartBounds.y + chartBounds.height/2) - 20, chartBounds.x - 10);
        g2d.rotate(Math.toRadians(90)); // Reset rotation
    }
}

3. Simplify Your Main Component's paintComponent #

Now your main JPanel (or whatever component you're using) just acts as a coordinator. It holds the data, handles filtering for search/clear, and delegates drawing to the two renderers.

First, add state to your component:

public class NameChart extends JPanel {
    private List<NameRecord> allRecords;
    private List<NameRecord> filteredRecords;
    private final NameRecordRenderer recordRenderer;
    private final ChartBackgroundRenderer backgroundRenderer;
    private final Rectangle chartBounds = new Rectangle(50, 50, 700, 400); // Adjust to your layout

    public NameChart() {
        // Initialize renderers with your preferred styles
        recordRenderer = new NameRecordRenderer(Color.BLUE, new Font("Arial", Font.PLAIN, 12));
        backgroundRenderer = new ChartBackgroundRenderer(Color.LIGHT_GRAY, new Font("Arial", Font.PLAIN, 10));
        allRecords = new ArrayList<>();
        filteredRecords = new ArrayList<>();
    }

    // Methods for search/clear
    public void search(String query) {
        filteredRecords = allRecords.stream()
            .filter(record -> record.getName().toLowerCase().contains(query.toLowerCase()))
            .collect(Collectors.toList());
        repaint();
    }

    public void clearSearch() {
        filteredRecords = new ArrayList<>(allRecords);
        repaint();
    }

    // Add records to the dataset
    public void addRecord(NameRecord record) {
        allRecords.add(record);
        clearSearch(); // Reset filtered list when adding new data
    }

Then the simplified paintComponent:

@Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g.create(); // Create a copy to avoid messing up the original

        // 1. Draw chart background/axes first
        backgroundRenderer.render(g2d, chartBounds, "Year", "Popularity");

        // 2. Calculate scaling factors (adjust based on your data range)
        double maxX = allRecords.stream()
            .flatMap(r -> r.getDataPoints().stream())
            .mapToInt(Point::getX)
            .max().orElse(1);
        double maxY = allRecords.stream()
            .flatMap(r -> r.getDataPoints().stream())
            .mapToInt(Point::getY)
            .max().orElse(1);
        double xScale = (double) chartBounds.width / maxX;
        double yScale = (double) chartBounds.height / maxY;

        // 3. Draw each filtered record
        for (NameRecord record : filteredRecords) {
            recordRenderer.render(g2d, record, chartBounds, xScale, yScale);
        }

        g2d.dispose(); // Clean up the graphics copy
    }
}

4. Why This Works #

• Separation of Concerns: Each class does one job—no more mixing axis drawing with record drawing with search logic.
• Reusability: You can tweak the NameRecordRenderer to draw records differently (e.g., change colors, add markers) without touching the chart background code.
• Maintainability: If you need to fix a bug in grid lines, you only look at ChartBackgroundRenderer. If search isn't filtering right, you only touch the search() method.
• Extensibility: Want to add different render styles for records? Just create a subclass of NameRecordRenderer and swap it in.

Quick Tips #

• Make sure your NameRecord class exposes all the data needed for rendering (like name, data points, maybe custom colors).
• Cache scaling factors if your data doesn't change often—no need to recalculate them every repaint.
• Use Graphics2D's create() method to avoid modifying the original graphics context (prevents weird side effects).

内容的提问来源于stack exchange，提问作者Yuhe Zhu