可以托拽的图片显示控件，JViewport 用法演示

有人发贴问，一个 JPanel 里的图片太大了，超出了 JPanel 的大小范围，“我想拖动鼠标按住JPanel，拖动JPanel，把那些显示不了的线段“拖回来”。”

这是 JViewport 的典型应用场景，很多人会用 JScrollPane，但是对 JViewport 可能不熟悉，其实 JScrollPane 是整合了几个 JViewport，JScrollBar，以及特别设计的布局的一个控件，其中的 JViewport 单独拿出来也很好用，下面就是示例代码。

为了显示图片，先做一个 panel，如下

/*
* Copyright 2013 (raistlic@gmail.com)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0 *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Insets;
import javax.swing.JPanel;

/**
*
* @author raistlic
*/
public class JImagePanel extends JPanel {

private static final Color GRID_1 = Color.GRAY.brighter();
private static final Color GRID_2 = GRID_1.brighter();
private static final int GRID_SIZE = 10;

private Image image;

public void setImage(Image image) {

// although not checked, this method should be called with-in EDT.

this.image = image;
revalidate();
repaint();
}

@Override
public Dimension getPreferredSize() {

if( image == null )
return getMinimumSize();
else {

Insets i = getInsets();
return new Dimension(
i.left + i.right + image.getWidth(this),
i.top + i.bottom + image.getHeight(this));
}
}

@Override
protected void paintComponent(Graphics g) {

super.paintComponent(g);

int width = getWidth();
int height = getHeight();

g.setColor(GRID_1);
g.fillRect(0, 0, width, height);

g.setColor(GRID_2);
for(int x=0, y=0, line=0; y<height; ) {

g.fillRect(x, y, GRID_SIZE, GRID_SIZE);
x += 2 * GRID_SIZE;
if( x > width ) {

y += GRID_SIZE;
line = (line + 1) % 2;
x = line * GRID_SIZE;
}
}

Insets i = getInsets();
g.drawImage(image, i.left, i.top, this);
}
}

绘制代码中间有大段画格子（类似PS里面对透明部分的表现）的，如果不需要可以无视。

然后做一个可以“鼠标托拽改变其中控件显示位置”的 JViewport:

/*
* Copyright 2013 (raistlic@gmail.com)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0 *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import java.awt.Component;
import java.awt.Dimension;
import java.awt.Point;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.JViewport;

/**
*
* @author raistlic
*/
public class JDragableViewport extends JViewport {

public JDragableViewport() {

MouseDragHandler handler = this.new MouseDragHandler();
addMouseListener(handler);
addMouseMotionListener(handler);
}

@Override
public void setViewPosition(Point p) {

p.x = Math.max(0, p.x);
p.y = Math.max(0, p.y);

Component v = getView();
if( v != null ) {

Dimension d = v.getPreferredSize();
Dimension size = getSize();
p.x = Math.min(d.width - size.width, p.x);
p.y = Math.min(d.height - size.height, p.y);
}

super.setViewPosition(p);
}

private class MouseDragHandler implements MouseListener, MouseMotionListener {

private Point cursor = new Point();
private Point view = new Point();

@Override
public void mouseClicked(MouseEvent e) {}

@Override
public void mouseReleased(MouseEvent e) {}

@Override
public void mouseEntered(MouseEvent e) {}

@Override
public void mouseExited(MouseEvent e) {}

@Override
public void mouseMoved(MouseEvent e) {}

@Override
public void mouseDragged(MouseEvent e) {

Point p = e.getPoint();
int dx = cursor.x - p.x;
int dy = cursor.y - p.y;
view.x += dx;
view.y += dy;

setViewPosition(view);

cursor = p;
view = getViewPosition();
}

@Override
public void mousePressed(MouseEvent e) {

cursor = e.getPoint();
view = getViewPosition();
}
}
}

可以发现，它就是一个普通的 JViewport，加了两个鼠标相关的 listener。

然后写一个小测试，用于打开图片文件并察看：

/*
* Copyright 2013 (raistlic@gmail.com)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0 *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import java.awt.BorderLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.awt.event.ActionEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Arrays;
import javax.imageio.ImageIO;
import javax.swing.AbstractAction;
import javax.swing.Action;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.JViewport;
import javax.swing.SwingUtilities;
import javax.swing.UIManager;
import javax.swing.filechooser.FileFilter;

/**
*
* @author raistlic
*/
public class ImageViewDemo extends JPanel {

public static void main(String[] args) {

SwingUtilities.invokeLater(new Runnable() {

@Override
public void run() {

try {

UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());

JFrame f = new JFrame("Image View Demo");

f.setContentPane(new ImageViewDemo());

f.setSize(800, 600);
f.setLocationRelativeTo(null);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
catch (Exception e) {

e.printStackTrace();
}
}
});
}

private static final String LABEL_OPEN_FILE = "Open Image File";
private static final Iterable<String> SUPPORTED_FILE_EXT = Arrays.asList(

".jpg", ".png"
);

private JImagePanel imagePanel;
private Action openAction;
private JTextField pathField;
private JFileChooser fileChooser;

ImageViewDemo() {

super(new BorderLayout(5, 5));

imagePanel = new JImagePanel();
openAction = new OpenImageFileAction(LABEL_OPEN_FILE);
pathField = new JTextField();
pathField.setEditable(false);
pathField.setOpaque(false);

initLayout();
}

private void initLayout() {

JViewport viewPort = new JDragableViewport();
viewPort.setView(imagePanel);

add(viewPort, BorderLayout.CENTER);

JPanel control = new JPanel(new GridBagLayout());

GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(5, 5, 5, 5);
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.weightx = 1.0;
gbc.gridx = 0;
gbc.gridy = 0;
control.add(pathField, gbc);

gbc.weightx = 0;
gbc.fill = GridBagConstraints.NONE;
gbc.gridx += 1;
control.add(new JButton(openAction), gbc);

control.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));

add(control, BorderLayout.SOUTH);
setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
}

private JFileChooser getFileChooser() {

if( fileChooser == null ) {

fileChooser = new JFileChooser();
fileChooser.setFileFilter(new FileFilter() {

@Override
public boolean accept(File f) {

assert f != null;

if( f.isDirectory() ) {

return true;
}
else {

String fname = f.getName().toLowerCase();
for(String s : SUPPORTED_FILE_EXT)
if( fname.endsWith(s) )
return true;

return false;
}
}

@Override
public String getDescription() {

return "Image Files";
}
});
fileChooser.setDialogTitle(LABEL_OPEN_FILE);
}
return fileChooser;
}

private class OpenImageFileAction extends AbstractAction {

private OpenImageFileAction(String name) {

super(name);
}

@Override
public void actionPerformed(ActionEvent e) {

JFileChooser jfc = getFileChooser();
int openResult = jfc.showOpenDialog(ImageViewDemo.this);
if( openResult == JFileChooser.APPROVE_OPTION ) {

try {

File file = jfc.getSelectedFile();
BufferedImage image = ImageIO.read(file);
imagePanel.setImage(image);
pathField.setText(file.getAbsolutePath());
}
catch (IOException ex) {

JOptionPane.showMessageDialog(ImageViewDemo.this, "Failed to open Image : " + ex.getMessage());
}
}
}
}
}

代码有些凌乱，作为演示用的小测试也将就了……

下面是Win 7下的运行截图：



鼠标可以在图片的任意位置开始托拽，来改变显示的区域。