GUI中的MVC

GUI中动画主要是不断的清除原来的所有控件然后根据新的控件重新布局，形成动画。

为了方便编程我们可以模仿MVC的结构，将程序分层，主要分成视图层和控制层，然后通过调用视图层提前定义好的方法将控制层更新的数据传递给视图层，视图层删除原有的所有控件，根据传递过来的数据对控件进行重新布局。

1. 控制层

对于数据的控制，这里主要分为初始化数据和更新数据，所以我们可以使用设计模式中的模板模式，将通用的部分抽取出来，然后让用户自己实现数据的相关初始化和数据的更改即可。

public abstract class BaseAlgoVisualizer<T> {

    private T t;

    /**
     * 视图层
     */
    private AlgoFrame frame;

    /**
     * 键盘事件
     */
    private KeyAdapter keyAdapter;

    /**
     * 鼠标事件
     */
    private MouseAdapter mouseAdapter;

    /**
     * 是否死循环执行更新数据的方法
     */
    private Boolean always = true;

    /**
     * 程序暂停时间（单位：毫秒），默认为50毫秒
     * 【注意】只有更细数据处于死循环执行状态才生效
     */
    private int pause = 50;

    /**
     * 核心方法，主要用于连接数据的初始化，数据的更新以及数据传递个视图层的工作
     */
    public BaseAlgoVisualizer(AlgoFrame frame){

        // 初始化视图
        EventQueue.invokeLater(() -> {
            this.frame = frame;
            t = this.initData();

            if(null!=keyAdapter) {
                frame.addKeyListener(keyAdapter);
            }
            if(null!=mouseAdapter) {
                frame.addMouseListener(mouseAdapter);
            }
            new Thread(()->{
                while (true){
                    //更新数据
                    this.update(t);
                    //将更新的数据传递给视图层
                    frame.render(t);
                    if(!always){
                        break;
                    }else{
                        AlgoVisHelper.pause(pause);
                    }
                }
            }).start();
        });
    }

    public void setKeyAdapter(KeyAdapter keyAdapter) {
        this.keyAdapter = keyAdapter;
    }

    public void setMouseAdapter(MouseAdapter mouseAdapter) {
        this.mouseAdapter = mouseAdapter;
    }

    /**
     * 更新数据
     */
    public abstract void update(T t);

    /**
     * 初始化数据
     */
    public abstract T initData();

    /**
     * 是否开启更新数据方法死循环执行（默认死循环）
     * @param always true死循环
     */
    public void setAlways(Boolean always) {
        this.always = always;
    }

    public void setKeyAdapter(KeyAdapter keyAdapter) {
        this.keyAdapter = keyAdapter;
    }

    public void setMouseAdapter(MouseAdapter mouseAdapter) {
        this.mouseAdapter = mouseAdapter;
    }

    /**
     * 设置程序暂停时间，只有在更新数据是死循环的情况下才生效
     * @param pause 单位：毫秒
     */
    public void setPause(int pause) {
        this.pause = pause;
    }
}

在具体的开发中，我们只需要继承该抽象类，将数据初始化工作封装在initData方法中，将数据的更新规则封装在update方法中便可以完成数据的控制，如果想要添加键盘，鼠标事件，只需要实现相关的类并调用相关的set方法即可。

2. 视图层

同样对相同的逻辑进行了封装，并采用java8的lambda表达式写具体的控件展示工作。

public class AlgoFrame<T> extends JFrame {
    /**
     * 窗口宽度
     */
    private int canvasWidth;

    /**
     * 窗口高度
     */
    private int canvasHeight;

    /**
     * 数据类型
     */
    private T t;


    /**
     * 画布
     */
    private AlgoCanvas canvas;


    /**
     * 将绘画的逻辑写到consumer的accept中即可
     * @param consumer 用于封装绘画逻辑使用
     */
    public void paint(Consumer<T> consumer){
        this.canvas.consumer = consumer;
    }

    /**
     * 构建一个指定大小，点击‘x’可以关闭的可视化窗口
     * @param title 标题
     * @param canvasWidth 窗口宽度
     * @param canvasHeight 窗口高度
     */
    public AlgoFrame(String title, int canvasWidth, int canvasHeight){

        super(title);

        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;

        canvas = new AlgoCanvas();
        setContentPane(canvas);
        pack();

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setResizable(false);

        setVisible(true);
    }
    /**
     * 默认大小为1024*768
     * @param title 窗口标题
     */
    public AlgoFrame(String title){
        this(title, 1024, 768);
    }

    public int getCanvasWidth(){return canvasWidth;}
    public int getCanvasHeight(){return canvasHeight;}


    /**
     * 该方法会重新清空之前的布局，系统并再次调用paintComponent方法
     * @param t
     */
    public void render(T t){
        this.t = t;
        repaint();
    }

    private class AlgoCanvas extends JPanel{

        private Consumer<T> consumer;

        public AlgoCanvas(){
            // 双缓存
            super(true);
        }

        @Override
        public void paintComponent(Graphics g) {
            super.paintComponent(g);

            Graphics2D g2d = (Graphics2D)g;

            // 抗锯齿
            RenderingHints hints = new RenderingHints(
                    RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON);
            hints.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
            g2d.addRenderingHints(hints);

            // 具体绘制
            if(consumer!=null&&t!=null){
                consumer.accept(g2d, t);
            }
        }

        @Override
        public Dimension getPreferredSize(){
            return new Dimension(canvasWidth, canvasHeight);
        }

    }
}

通过这样的封装，我们只需要写Consumer中的lambda表达式即可完成数据的展示规则。大大减少开发难度。

3.工具

这部分不属于刚刚说的GUI的MVC，这里提供的小工具主要封装了平时用到的一些控件，只是为了简化开发。

public class AlgoVisHelper {

    private AlgoVisHelper(){}

    public static final Color Red = new Color(0xF44336);
    public static final Color Pink = new Color(0xE91E63);
    public static final Color Purple = new Color(0x9C27B0);
    public static final Color DeepPurple = new Color(0x673AB7);
    public static final Color Indigo = new Color(0x3F51B5);
    public static final Color Blue = new Color(0x2196F3);
    public static final Color LightBlue = new Color(0x03A9F4);
    public static final Color Cyan = new Color(0x00BCD4);
    public static final Color Teal = new Color(0x009688);
    public static final Color Green = new Color(0x4CAF50);
    public static final Color LightGreen = new Color(0x8BC34A);
    public static final Color Lime = new Color(0xCDDC39);
    public static final Color Yellow = new Color(0xFFEB3B);
    public static final Color Amber = new Color(0xFFC107);
    public static final Color Orange = new Color(0xFF9800);
    public static final Color DeepOrange = new Color(0xFF5722);
    public static final Color Brown = new Color(0x795548);
    public static final Color Grey = new Color(0x9E9E9E);
    public static final Color BlueGrey = new Color(0x607D8B);
    public static final Color Black = new Color(0x000000);
    public static final Color White = new Color(0xFFFFFF);

    /**
     * 绘制一个空心圆
     * @param g 画笔
     * @param x 圆心横坐标
     * @param y 圆心纵坐标
     * @param r 圆半径
     */
    public static void strokeCircle(Graphics2D g, int x, int y, int r){

        Ellipse2D circle = new Ellipse2D.Double(x-r, y-r, 2*r, 2*r);
        g.draw(circle);
    }

    /**
     * 绘制一个实心圆
     * @param g 画笔
     * @param x 圆心横坐标
     * @param y 圆心纵坐标
     * @param r 圆半径
     */
    public static void fillCircle(Graphics2D g, int x, int y, int r){

        Ellipse2D circle = new Ellipse2D.Double(x-r, y-r, 2*r, 2*r);
        g.fill(circle);
    }

    public static void strokeRectangle(Graphics2D g, int x, int y, int w, int h){

        Rectangle2D rectangle = new Rectangle2D.Double(x, y, w, h);
        g.draw(rectangle);
    }

    public static void fillRectangle(Graphics2D g, int x, int y, int w, int h){

        Rectangle2D rectangle = new Rectangle2D.Double(x, y, w, h);
        g.fill(rectangle);
    }

    /**
     * 设置画笔颜色
     * @param g 画笔
     * @param color 颜色
     */
    public static void setColor(Graphics2D g, Color color){
        g.setColor(color);
    }

    /**
     * 设置线条粗细
     * @param g 画笔
     * @param w 线条粗细，单位（像素）
     */
    public static void setStrokeWidth(Graphics2D g, int w){
        int strokeWidth = w;
        g.setStroke(new BasicStroke(strokeWidth, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
    }

    /**
     * 程序暂停指定时间
     * @param t 暂停时间（单位：毫秒）
     */
    public static void pause(int t) {
        try {
            Thread.sleep(t);
        }
        catch (InterruptedException e) {
            System.out.println("Error sleeping");
        }
    }

    public static void putImage(Graphics2D g, int x, int y, String imageURL){

        ImageIcon icon = new ImageIcon(imageURL);
        Image image = icon.getImage();

        g.drawImage(image, x, y, null);
    }

    /**
     * 抗锯齿
     * @param g2d 画笔
     */
    public static void addRenderingHints(Graphics2D g2d){
        RenderingHints hints = new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.addRenderingHints(hints);
    }

    public static void drawText(Graphics2D g, String text, int centerx, int centery){

        if(text == null) {
            throw new IllegalArgumentException("Text is null in drawText function!");
        }
        FontMetrics metrics = g.getFontMetrics();
        int w = metrics.stringWidth(text);
        int h = metrics.getDescent();
        g.drawString(text, centerx - w/2, centery + h);
    }
}

完整代码