mouseReleased?

**Dean29126** · 01-16-2011, 03:48 PM

What codes should i add to the mouseReleased so when the user drag the image near a certain location, the image will essentially "snap" into that location.

Java Code:

import java.awt.Graphics;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JPanel;

public class StockIndex extends JPanel implements MouseListener,
        MouseMotionListener{
        static String imageFile = "stockindextest.png";//replace with new image
        private static final int w = 87;//getting back here for width
        private static final int h = 15;//getting back here for height
        private BufferedImage buffImage;
    	private boolean _canDrag = false;
    	private int _labelX = 370;// getting back here for x coord
    	private int _labelY = 50;// getting back here for y coord
    	private int _dragFromX = 0;
    	private int _dragFromY = 0;

    	public StockIndex() {
             super();
             initialize();
             this.addMouseListener(this);
             this.addMouseMotionListener(this);
    	}
    	private void initialize(){
    		String filePath = getClass().getResource("images").toString();
    		filePath = filePath.substring(6);
    		File f = new File(filePath + "/stockindextest" + ".png");//replace ? with respective image
    		try {
    			buffImage = ImageIO.read(f);
    		} catch (IOException e2) {
    			e2.printStackTrace();
    		}
    		this.setSize(720,480);
    		this.setLayout(null);
    		this.setOpaque(false);
    	}
    	
    	public void paintComponent(Graphics g){
    		super.paintComponent(g);
    		g.drawImage(buffImage, _labelX, _labelY, w, h, null);
    	}
    	@Override
    	public void mouseDragged(MouseEvent e) {
    		if (_canDrag) {   // True only if button was pressed inside label.
                //--- label pos from mouse and original click displacement
                _labelX = e.getX() - _dragFromX;
                _labelY = e.getY() - _dragFromY;
                
                //--- Don't move the label off the screen sides
                _labelX = Math.max(_labelX, 0);
                _labelX = Math.min(_labelX, getWidth() - w);
                
                //--- Don't move the label off top or bottom
                _labelY = Math.max(_labelY, 0);
                _labelY = Math.min(_labelY, getHeight() - h);
                
                this.repaint(); }
    	}
    	@Override
    	public void mouseMoved(MouseEvent e) {
    		// TODO Auto-generated method stub
    		
    	}
    	@Override
    	public void mouseClicked(MouseEvent e) {
    		// TODO Auto-generated method stub
    		
    	}
    	@Override
    	public void mouseEntered(MouseEvent e) {
    		// TODO Auto-generated method stub
    		
    	}
    	@Override
    	public void mouseExited(MouseEvent e) {
    		_canDrag = false;
    		
    	}
    	@Override
    	public void mousePressed(MouseEvent e) {
    		int x = e.getX();   // Save the x coord of the click
            int y = e.getY();   // Save the y coord of the click
            
            if (x >= _labelX && x <= (_labelX + w)
                    && y >= _labelY && y <= (_labelY + h)) {
                _canDrag = true;
                _dragFromX = x - _labelX;  // how far from left
                _dragFromY = y - _labelY;  // how far from top
            } else {
                _canDrag = false;
            }
    		
    	}
    	@Override
    	public void mouseReleased(MouseEvent e) {
    		// TODO Auto-generated method stub
    		
    	}
    
 }

**JosAH** · 01-16-2011, 04:12 PM

Originally Posted by Dean29126

What codes should i add to the mouseReleased so when the user drag the image near a certain location, the image will essentially "snap" into that location.

Most likely I don't understand your question but I'd say: simply set the coordinates (top/left?) to the coordinates you want to 'snap' to image to. e.g. if those coordinates are multiples of, say, 20 and the coordinates of your image are x,y, snap the image to the coordinate (x+10)/20*20, (y+10)/20*20

kind regards,

Jos

**Dean29126** · 01-16-2011, 04:27 PM

Pardon me for being vague. Basically, users are going to drag the image and once the image is around a certain location, the image will "snap" into the location when the user releases the mouse. Can you provide me with a sample code? Thanks alot.

**JosAH** · 01-16-2011, 04:31 PM

Originally Posted by Dean29126

Pardon me for being vague. Basically, users are going to drag the image and once the image is around a certain location, the image will "snap" into the location when the user releases the mouse. Can you provide me with a sample code? Thanks alot.

If the location you want to 'snap' your image to is known, simply set the top/left coordinates of the image to that position when your MouseReleased event comes in. What example code do you want to see?

kind regards,

Jos

**Fubarable** · 01-16-2011, 04:42 PM

Either that or put the image into an ImageIcon and this into a JLabel. Then use a JLayeredPane that holds a grid of JPanels, each small panel cell using GridBagLayout (all held in a JPanel that uses GridLayout and is in the JLayeredPane's default layer). Then add the JLabel into one of the JPanels, and the GridBagLayout will center it there. If you click on that panel, then pop the JLabel into the drag layer of the JLayeredPane, and allow the user to thus drag the JLabel. When the user releases the mouse, removed the JLabel from the drag layer of the JLayeredPane and add it to the overlying JPanel cell.

This may seem like overkill, but it's worked well for me with a small chess program.

For example:
Example Explanation
Example Code

**Fubarable** · 01-16-2011, 04:53 PM

As an aside, when posting code, here, it helps if it is compilable and runnable and requires no dependencies that we have no access to (i.e., images on your disk). I made some changes to your post above to convert it into an SSCCE by adding a main method, and by using an open-domain free image from online. If your future post code conforms to the SSCCE specification, we will greatly appreciate the effort you are putting in to help make our job easier, and you will likely get help faster.

Changes:

Java Code:

import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage; 
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;

@SuppressWarnings("serial")
public class StockIndex extends JPanel {
   // !! static String imageFile = "stockindextest.png";// replace with new
   // image
   public static final String IMAGE_PATH = "http://duke.kenai.com/iconSized/duke4.gif";
   
   //!! private static final int w = 87;// getting back here for width
   //!! private static final int h = 15;// getting back here for height
   
   private int w;
   private int h;
   
   private static final int SIDE = 500;
   private BufferedImage buffImage;
   private boolean _canDrag = false;
   private int _labelX = 370;// getting back here for x coord
   private int _labelY = 50;// getting back here for y coord
   private int _dragFromX = 0;
   private int _dragFromY = 0;

   public StockIndex() {
      super();
      initialize();
      MyMouseAdapter mouseAdapter = new MyMouseAdapter();
      this.addMouseListener(mouseAdapter);
      this.addMouseMotionListener(mouseAdapter);
   }

   private void initialize() {
      //!! String filePath = getClass().getResource("images").toString();
      // filePath = filePath.substring(6);
      // File f = new File(filePath + "/stockindextest" + ".png");
      try {
         URL imageUrl = new URL(IMAGE_PATH);
         // !! buffImage = ImageIO.read(f);
         buffImage = ImageIO.read(imageUrl); //!!
         w = buffImage.getWidth(); //!! 
         h = buffImage.getHeight(); //!!
      } catch (IOException e2) {
         e2.printStackTrace();
      }
      this.setSize(720, 480);
      this.setLayout(null);
      this.setOpaque(false);
   }

   public void paintComponent(Graphics g) {
      super.paintComponent(g);
      g.drawImage(buffImage, _labelX, _labelY, w, h, null);
   }

   private class MyMouseAdapter extends MouseAdapter {
      @Override
      public void mouseDragged(MouseEvent e) {
         if (_canDrag) { // True only if button was pressed inside label.
            // --- label pos from mouse and original click displacement
            _labelX = e.getX() - _dragFromX;
            _labelY = e.getY() - _dragFromY;
            // --- Don't move the label off the screen sides
            _labelX = Math.max(_labelX, 0);
            _labelX = Math.min(_labelX, getWidth() - w);
            // --- Don't move the label off top or bottom
            _labelY = Math.max(_labelY, 0);
            _labelY = Math.min(_labelY, getHeight() - h);
            StockIndex.this.repaint();
         }
      }

      @Override
      public void mouseExited(MouseEvent e) {
         _canDrag = false;
      }

      @Override
      public void mousePressed(MouseEvent e) {
         int x = e.getX(); // Save the x coord of the click
         int y = e.getY(); // Save the y coord of the click
         if (x >= _labelX && x <= (_labelX + w) && y >= _labelY && y <= (_labelY + h)) {
            _canDrag = true;
            _dragFromX = x - _labelX; // how far from left
            _dragFromY = y - _labelY; // how far from top
         } else {
            _canDrag = false;
         }
      }

      @Override
      public void mouseReleased(MouseEvent e) {
      }
   }

   private static void createAndShowUI() {
      StockIndex stockIndex = new StockIndex();
      stockIndex.setPreferredSize(new Dimension(SIDE, SIDE));
      JFrame frame = new JFrame("StockIndex");
      frame.getContentPane().add(stockIndex);
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.pack();
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
   }

   public static void main(String[] args) {
      java.awt.EventQueue.invokeLater(new Runnable() {
         public void run() {
            createAndShowUI();
         }
      });
   }
}

Luck!

**Dean29126** · 01-17-2011, 07:07 AM

i've edited the codes and managed to paint the image on the desired location when user released the mouse. However how do i create an area so when users specifically mouseover this area and releases the mouse, the image will "snap" into this area instead of releasing the mouse anywhere else out of this area.

codes for my paint component