【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 )

一、Canvas 中绘制超大图片要点

1、设置 JFrame 窗口自动关闭

创建 JFrame 窗口后 , 通过调用 JFrame#setDefaultCloseOperation 可以设置窗口自动关闭 ;

        // 创建 JFrame 窗口
        JFrame frame = new JFrame("Large Canvas");
        // 设置窗口关闭行为 点击右上角关闭按钮 关闭窗口并退出应用
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

2、获取并绘制图片

在 AWT 中 , 使用 Toolkit.getDefaultToolkit().getImage 函数 , 获取 Image 图片对象 ;

        // 获取图片
        Image image = Toolkit.getDefaultToolkit().getImage("image.jpg");

调用 Graphics#drawImage 函数 , 向 Canvas 中绘制图片 ;

        // 绘制图形
        graphics.drawImage(image, 0, 0, this);

绘图的函数原型为 : ImageObserver 就是 Canvas 对象本身 ;

    public abstract boolean drawImage(Image img, int x, int y,
                                      ImageObserver observer);

3、鼠标拖动计算位移

鼠标按下时 , 记录按下的位置 , 保存到 startX 和 startY 变量中 , 这两个变量每次鼠标按下都会更新 ;

        // 为组件设置鼠标监听事件
        addMouseListener(new MouseAdapter() {
            public void mousePressed(MouseEvent e) {
                // 记录鼠标按下时的坐标
                startX = e.getX();
                startY = e.getY();
        });

鼠标移动时 , 记录 移动后的位置 与 当前 ( startX , startY ) 位置 的差值 , 将 该差值累加到 ( startX , startY ) 坐标中 ;

计算一个 Canvas 的画布偏移量 ( offsetX , offsetY ) , 该偏移量持续累加 , 多次鼠标拖动也会累加到一起 ;

        // 添加鼠标动作监听
        addMouseMotionListener(new MouseAdapter() {
            // 鼠标拖动事件
            public void mouseDragged(MouseEvent e) {
                // 统计本次鼠标移动的相对值
                int dx = e.getX() - startX;
                int dy = e.getY() - startY;
                // 偏移量累加
                offsetX += dx;
                offsetY += dy;
                // 重新绘图
                repaint();
                // 记录当前拖动后的位置
                startX += dx;
                startY += dy;
        });

4、画布偏移

初始时 , 画布偏移为 0 ,

但是 在鼠标不断拖动的过程中 , 偏移量 ( offsetX , offsetY ) 一直在累加 ,

每次累加 , 都要重绘画布 ,

重绘时 , 调用 Graphics2D#translate 对画布进行整体偏移 ;

        // 画布进行整体偏移
        Graphics2D g2 = (Graphics2D)g;
        g2.translate(offsetX, offsetY);

二、代码示例

代码示例 :

import javax.swing.*;
import java.awt.*;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
public class LargeCanvas extends JPanel {
    // 鼠标按下时的坐标 以及 更新后的坐标
    private int startX, startY;
    // 当前的位置偏移
    private int offsetX = 0, offsetY = 0;
    public LargeCanvas() {
        // 画布大小设置为 800 x 600
        // 绘制的图片是 2K 大小的图片
        setPreferredSize(new Dimension(800, 600));
        // 为组件设置鼠标监听事件
        addMouseListener(new MouseAdapter() {
            public void mousePressed(MouseEvent e) {
                // 记录鼠标按下时的坐标
                startX = e.getX();
                startY = e.getY();
        // 添加鼠标动作监听
        addMouseMotionListener(new MouseAdapter() {
            // 鼠标拖动事件
            public void mouseDragged(MouseEvent e) {
                // 统计本次鼠标移动的相对值
                int dx = e.getX() - startX;
                int dy = e.getY() - startY;
                // 偏移量累加
                offsetX += dx;
                offsetY += dy;
                // 重新绘图
                repaint();
                // 记录当前拖动后的位置
                startX += dx;
                startY += dy;
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        // 画布进行整体偏移
        Graphics2D g2 = (Graphics2D)g;
        g2.translate(offsetX, offsetY);
        // 获取图片
        Image image = Toolkit.getDefaultToolkit().getImage("image.jpg");
        // 绘制图形
        g2.drawImage(image, 0, 0, this);
    public static void main(String[] args) {
        // 创建 JFrame 窗口
        JFrame frame = new JFrame("Large Canvas");
        // 设置窗口关闭行为 点击右上角关闭按钮 关闭窗口并退出应用
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // 创建画布
        LargeCanvas canvas = new LargeCanvas();
        // 将画布放入滚动布局
        JScrollPane scrollPane = new JScrollPane(canvas);
        // 将滚动布局放入窗口
        frame.getContentPane().add(scrollPane);
        // 窗口自适应
        frame.pack();