I have a BufferedImage
that I added to a JPanel
.
I was able to zoom in/out of the image using AffineTransform
.
I can write on top of the image but not on the location that I want.
The line that I draw displays at the wrong location on the image.
I guess it has something to do with the scale but I can't figure out what part of my code is wrong.
This is the screenshot of what I mean.
Here is my code:
public class MouseScaleTest {
int xbegin = 0;
int ybegin = 0;
int xend = 0;
int yend = 0;
boolean isNewLine = true;
int initx;
int inity;
int count = 0;
Line2D linebuffer;
Rectangle2D box;
final ArrayList<Line2D> lineContainer = new ArrayList();
final ArrayList<Rectangle2D> boxContainer = new ArrayList();
public static void main(String[] args) {
new MouseScaleTest();
}
public MouseScaleTest() {
EventQueue.invokeLater(new Runnable() {
@Override
public void run() {
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new BorderLayout());
// JScrollPane
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
private BufferedImage img;
private float scale = 1f;
private float scaleDelta = 0.05f;
JLabel lbl;
JLabel scalePoint;
JLabel begin;
JLabel end;
JLabel aft;
public TestPane() {
try {
img = ImageIO.read(new File("C:\\Users\\John Ebarita\\Documents\\report.jpg"));
} catch (IOException ex) {
ex.printStackTrace();
}
lbl = new JLabel();
lbl.setBounds(0, 0, 50, 10);
scalePoint = new JLabel();
scalePoint.setBounds(50, 0, 50, 10);
begin = new JLabel();
begin.setBounds(150, 0, 50, 10);
end = new JLabel();
end.setBounds(200, 0, 50, 10);
aft = new JLabel();
aft.setBounds(250, 0, 50, 10);
add(lbl);
add(scalePoint);
add(begin);
add(end);
add(aft);
addMouseWheelListener(new MouseWheelListener() {
@Override
public void mouseWheelMoved(MouseWheelEvent e) {
int rotation = e.getWheelRotation();
if (rotation < 0) {
scale -= scaleDelta;
} else {
scale += scaleDelta;
}
if (scale < 0) {
scale = 0;
}
// else if (scale > 1.5) {
// scale = 1;
// }
scalePoint.setText("Scale: " + String.valueOf(scale));
repaint();
// System.out.println(getSize());
}
});
addMouseMotionListener(new MouseMotionListener() {
@Override
public void mouseDragged(MouseEvent e) {
if (isNewLine == false) {
xend = e.getX();
yend = e.getY();
end.setText("End Values : " + xend + " " + yend);
repaint();
}
}
@Override
public void mouseMoved(MouseEvent e) {
lbl.setText("Mouse Point: " + e.getX() + " " + e.getY());
if (isNewLine == false) {
xend = e.getX();
yend = e.getY();
repaint();
}
}
});
addMouseListener(new MouseAdapter() {
@Override
public void mouseReleased(MouseEvent e) {
System.out.println(e.getX() + " " + e.getY() + "mouse");
if (isNewLine == true) {
xbegin = xend = e.getX();
ybegin = yend = e.getY();
isNewLine = false;
box = new Rectangle2D.Float(xend - 5, yend - 5, 12, 12);
boxContainer.add(box);
} else {
linebuffer = new Line2D.Float((float) xbegin, (float) ybegin, (float) xend, (float) yend);
System.out.println("xbegin: " + xbegin + " " + ybegin + " " + xend + " " + yend);
lineContainer.add(linebuffer);
repaint();
xbegin = e.getX();
ybegin = e.getY();
if (box.contains(xend, yend)) {
xend = (int) box.getCenterX();
yend = (int) box.getCenterY();
isNewLine = true;
return;
}
box = new Rectangle2D.Float(xend - 6, yend - 6, 12, 12);
boxContainer.add(box);
return;
}
}
@Override
public void mousePressed(MouseEvent e) {
begin.setText("Begin Values : " + xbegin + " " + ybegin);
}
});
setBorder(new BevelBorder(1));
}
@Override
public Dimension getPreferredSize() {
return img == null ? new Dimension(200, 200) : new Dimension(img.getWidth(), img.getHeight());
}
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (img != null) {
//
Graphics2D g2 = (Graphics2D) g.create();
//
int x = (int) ((getWidth() - (img.getWidth() * scale)) / 2);
int y = (int) (getHeight() - (img.getHeight() * scale)) / 2;
aft.setText("AFT : " + x + " " + y);
AffineTransform at = new AffineTransform();
at.translate(x, y);
// System.out.println(scale);
at.scale(scale, scale);
g2.setTransform(at);
g2.drawImage(img, 0, 0, this);
g2.draw(new Line2D.Float(xbegin, ybegin, xend, yend));
for (int i = 0; i < lineContainer.size(); i++) {
g2.draw(lineContainer.get(i));
}
g2.setStroke(new BasicStroke(3));
for (int i = 0; i < boxContainer.size(); i++) {
g2.setColor(Color.BLUE);
g2.draw(boxContainer.get(i));
}
g2.dispose();
// System.out.println("int x and y " + x + " " + y);
// System.out.println("getWidth and getHeight " + getWidth() + " " + getHeight());
}
}
}
}
This what i want to achieve with my code. Where I can draw dynamically on top of an image and still can zoom in/out while maintaining the lines drawn.