Making a graphics component draggable

Please support our Java advertiser: Programming Forums - DaniWeb Sister Site
Thread Solved
1 2 Last »

•
•
Join Date: Mar 2009
Posts: 62
Reputation: jooa is an unknown quantity at this point 
Solved Threads: 0
jooa jooa is offline Offline
Junior Poster in Training

Making a graphics component draggable

 
0
  #1
Jul 9th, 2009
Hi, I have written some code which when a mouse is clicked, a red circle is drawn at that position. The x,y coordinates are stored in an ArrayList. What I now want to do is enable the circles to be selected and then dragged. When the mouse is released the new coordinates need to replace the old coordinates. I hope someone can help! thanks

Java Syntax (Toggle Plain Text) 
  1.  
  2. ArrayList<Point> pointsLeft = new ArrayList<Point>();
  3. ArrayList<Point> pointsRight = new ArrayList<Point>();
  4.  
  5.     public void mouseClicked(MouseEvent e) {
  6.         if (e.getSource() == picture1) {
  7.             pointsLeft.add(e.getPoint());
  8.             drawCircleLeft(e.getX(), e.getY());
  9.             printPointsLeft();
  10.             repaint();
  11.         }
  12.         if (e.getSource() == picture2) {
  13.             pointsRight.add(e.getPoint());
  14.             drawCircleRight(e.getX(), e.getY());
  15.             printPointsRight();
  16.             repaint();
  17.         }
  18.  
  19.     }
  20.  
  21.     public void printPointsLeft() {
  22.         System.out.println(pointsLeft);
  23.     }
  24.  
  25.         public void printPointsRight() {
  26.         System.out.println(pointsRight);
  27.     }
  28.  
  29.     public void drawCircleLeft(int x, int y) {
  30.         Graphics g1 = picture1.getGraphics();
  31.         g1.setColor(Color.RED);
  32.         g1.drawOval(x - radius, y - radius, 2 * radius, 2 * radius);
  33.         g1.fillOval(x - radius, y - radius, 2 * radius, 2 * radius);
  34.     }
  35.  
  36.     int x,      y;
  37.     int radius = 5;
  38.  
  39.     public void drawCircleRight(int x, int y) {
  40.         Graphics g2 = picture2.getGraphics();
  41.         g2.setColor(Color.RED);
  42.         g2.drawOval(x - radius, y - radius, 2 * radius, 2 * radius);
  43.         g2.fillOval(x - radius, y - radius, 2 * radius, 2 * radius);
  44.     }
  45.  
  46.     public void mousePressed(MouseEvent e) {}
  47.  
  48.     public void mouseReleased(MouseEvent e) {}
  49.  
  50.     public void mouseEntered(MouseEvent e) {}
  51.  
  52.     public void mouseExited(MouseEvent e) {}
  53.  
  54.     public void mouseDragged(MouseEvent e) {}
  55.  
  56.     public void mouseMoved(MouseEvent e) {}
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 996
Reputation: JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice 
Solved Threads: 146
JamesCherrill JamesCherrill is offline Offline
Posting Shark

Re: Making a graphics component draggable

 
0
  #2
Jul 9th, 2009
Here (basically unedited) is some code from an old program I wrote that allows an object to be dragged around the screen. Perhaps you can use it as a start point?

JAVA Syntax (Toggle Plain Text) 
  1.  
  2. private int startDragX, startDragY;
  3. private boolean draggable = false, dragging = false, dragged = false;
  4.  
  5. public void mousePressed(MouseEvent e) {
  6.   startDragX = e.getX(); // in case this is the start of a drag
  7.   startDragY = e.getY();
  8.   dragging = false;
  9.   // System.out.println(startDragX + " x " + startDragY);
  10.  }
  11.  
  12.  public void mouseReleased(MouseEvent e) {
  13.   // System.out.println("we had a move to " + e.getX() + " x " e.getY());
  14.   this.setLocation(this.getX() + (e.getX() - startDragX), this.getY()
  15. 	  + (e.getY() - startDragY));
  16.   repaint();
  17. }
  18.  
  19. public void mouseDragged(MouseEvent e) {
  20.  
  21.   if (!dragging) { // this is the start of a drag event sequence
  22.                  // ignore if drag moves less than a pixel or two...
  23.     if (Math.abs(startDragX - e.getX()) + Math.abs(startDragY - e.getY()) > 4) {
  24.     // System.out.println("we are dragging from " + startDragX + " x
  25.     // " + startDragY);
  26.     }
  27.     dragging = true;
  28.   }
  29.   if (dragging) { // drag in progress
  30.     // System.out.println("we are at " + e.getX() + " x " + e.getY());
  31.     this.setLocation(this.getX() + (e.getX() - startDragX), this.getY()
  32. 	 + (e.getY() - startDragY)); // for user feedback
  33.   }
  34. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 62
Reputation: jooa is an unknown quantity at this point 
Solved Threads: 0
jooa jooa is offline Offline
Junior Poster in Training

Re: Making a graphics component draggable

 
0
  #3
Jul 9th, 2009
I understand the code you have given, but how would I visualise the dragging?
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2007
Posts: 4,500
Reputation: Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of 
Solved Threads: 521
Moderator
Featured Poster
Ezzaral's Avatar
Ezzaral Ezzaral is offline Offline
Industrious Poster

Re: Making a graphics component draggable

 
0
  #4
Jul 9th, 2009
By adding a repaint() call in mouseDragged() as well.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 996
Reputation: JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice 
Solved Threads: 146
JamesCherrill JamesCherrill is offline Offline
Posting Shark

Re: Making a graphics component draggable

 
0
  #5
Jul 9th, 2009
Works for me without the repaint, setLocation will trigger one anyway - the one in the mousereleased is there for a completely different (irrelevant here) reason.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2007
Posts: 4,500
Reputation: Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of Ezzaral has much to be proud of 
Solved Threads: 521
Moderator
Featured Poster
Ezzaral's Avatar
Ezzaral Ezzaral is offline Offline
Industrious Poster

Re: Making a graphics component draggable

 
0
  #6
Jul 9th, 2009
Moving an actual component would trigger a repaint automatically, but it looks like he is "dragging" a shape that's been painted on the component, which would require a repaint() to update the location.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 62
Reputation: jooa is an unknown quantity at this point 
Solved Threads: 0
jooa jooa is offline Offline
Junior Poster in Training

Re: Making a graphics component draggable

 
0
  #7
Jul 9th, 2009
This is the code I have, however I am still unable to drag the circles I have drawn. This isn't the complete code. Thanks!

Java Syntax (Toggle Plain Text) 
  1.     ArrayList<Point> pointsLeft = new ArrayList<Point>();
  2.     ArrayList<Point> pointsRight = new ArrayList<Point>();
  3.  
  4.     public void mouseClicked(MouseEvent e) {
  5.         if (e.getSource() == picture1) {
  6.             pointsLeft.add(e.getPoint());
  7.             drawCircleLeft(e.getX(), e.getY());
  8.             printPointsLeft();
  9.             repaint();
  10.         }
  11.         if (e.getSource() == picture2) {
  12.             pointsRight.add(e.getPoint());
  13.             drawCircleRight(e.getX(), e.getY());
  14.             printPointsRight();
  15.             repaint();
  16.         }
  17.     }
  18.  
  19.     public void printPointsLeft() {
  20.         System.out.println(pointsLeft);
  21.     }
  22.  
  23.         public void printPointsRight() {
  24.         System.out.println(pointsRight);
  25.     }
  26.  
  27.     public void drawCircleLeft(int x, int y) {
  28.         Graphics g1 = picture1.getGraphics();
  29.         g1.setColor(Color.RED);
  30.         g1.drawOval(x - radius, y - radius, 2 * radius, 2 * radius);
  31.         g1.fillOval(x - radius, y - radius, 2 * radius, 2 * radius);
  32.     }
  33.  
  34.     public void drawCircleRight(int x, int y) {
  35.         Graphics g2 = picture2.getGraphics();
  36.         g2.setColor(Color.RED);
  37.         g2.drawOval(x - radius, y - radius, 2 * radius, 2 * radius);
  38.         g2.fillOval(x - radius, y - radius, 2 * radius, 2 * radius);
  39.     }
  40.  
  41.     public void mousePressed(MouseEvent e) {
  42.         startDragX = e.getX();
  43.         startDragY = e.getY();
  44.         dragging = false;
  45.     }
  46.  
  47.     public void mouseReleased(MouseEvent e) {
  48.         this.setLocation(this.getX() + (e.getX() - startDragX), this.getY() 
  49.                 + (e.getY() - startDragY));
  50.         repaint();
  51.     }
  52.  
  53.     public void mouseDragged(MouseEvent e) {
  54.         if (!dragging){
  55.             if(Math.abs(startDragX - e.getX()) + Math.abs(startDragY - e.getY())> 4){
  56.                 System.out.println("We are dragging from" + startDragX + " x" 
  57.                         + startDragY + " y" );
  58.             }
  59.             dragging = true;
  60.         }
  61.         if (dragging){
  62.             System.out.println("We are at" + e.getX() + " x" + e.getY() + " y");
  63.             this.setLocation(this.getX() + (e.getX() - startDragX), this.getY() 
  64.                     + (e.getY() - startDragY));
  65.         }
  66.         repaint();
  67.     }
  68.  
  69.     public void mouseExited(MouseEvent e) {
  70.     }
  71.  
  72.     int x, y;
  73.     int radius = 5;
  74. ImageIcon largeImage;
  75. private int startDragX, startDragY;
  76. private boolean draggable = false, dragging = false, dragged = false;
  77.  
  78.  
  79.     public void mouseMoved(MouseEvent e) {}
  80.  
  81.     public void mouseEntered(MouseEvent e) {
  82.     }
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 996
Reputation: JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice 
Solved Threads: 146
JamesCherrill JamesCherrill is offline Offline
Posting Shark

Re: Making a graphics component draggable

 
0
  #8
Jul 10th, 2009
•
•
•
•
Originally Posted by Ezzaral View Post
Moving an actual component would trigger a repaint automatically, but it looks like he is "dragging" a shape that's been painted on the component, which would require a repaint() to update the location.
Yes, I agree. Like I said, that was just some code that I happened to have that could possibly be a starting point for the OP. I was dragging a whole JFrame.

OP: In the new mouse events you need to re-draw your circle at the new coords - this should replace my this.setLocation calls
Last edited by JamesCherrill; Jul 10th, 2009 at 3:58 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 62
Reputation: jooa is an unknown quantity at this point 
Solved Threads: 0
jooa jooa is offline Offline
Junior Poster in Training

Re: Making a graphics component draggable

 
0
  #9
Jul 10th, 2009
I have adapted the code to redraw the circle at the new positions, however what happens I can click the panel and the circle will be drawn, but when I click the panel again to drag the circle a line of circles are drawn from the left hand corner of the panel, not where I clicked the mouse. Also what I want is to click a cirlce then be able to hold it and move it to another position, while all the time that circle which was originally drawn is still visible.

Java Syntax (Toggle Plain Text) 
  1. /*
  2.  * RunProgram.java
  3.  *
  4.  * Created on 04 November 2008, 17:46
  5.  *
  6.  * To change this template, choose Tools | Template Manager
  7.  * and open the template in the editor.
  8.  */
  9. package finalproject;
  10.  
  11. import java.awt.*;
  12. import java.awt.event.ActionEvent;
  13. import java.awt.event.ActionListener;
  14. import java.awt.event.MouseEvent;
  15. import java.awt.event.MouseListener;
  16. import java.awt.event.MouseMotionListener;
  17. import java.io.File;
  18. import java.util.ArrayList;
  19. import javax.swing.*;
  20. import javax.swing.JLabel;
  21. import javax.swing.event.*;
  22.  
  23. /**
  24.  *
  25.  * @author
  26.  */
  27. public class RunProgram extends JPanel implements ActionListener, ChangeListener, MouseListener, MouseMotionListener {
  28.  
  29.     static JMenuBar bar;
  30.     private JMenuItem fileOpen;
  31.     private JPanel phasePanel;
  32.     static JPanel contentPane;
  33.     private JPanel picture1;
  34.     private JPanel picture2;
  35.     private JFileChooser fileChooser;
  36.     File file;
  37.     private JLabel leftPic;
  38.     private JLabel rightPic;
  39.     private JPanel toolPanel;
  40.     JButton openButton;
  41.     JSlider phaseSlider;
  42.     JButton t;
  43.     private JButton openRight,  openLeft;
  44.  
  45.     /** Creates a new instance of RunProgram */
  46.     public RunProgram() {
  47.         setLayout(new BorderLayout());
  48.         bar = new JMenuBar();
  49.         JMenu fileMenu = new JMenu("File");
  50.         bar.add(fileMenu);
  51.  
  52.         fileOpen = new JMenuItem("Open");
  53.         fileMenu.add(fileOpen);
  54.         fileOpen.addActionListener(this);
  55.  
  56.         //Create a panel and make it the content pane.
  57.         contentPane = new JPanel(new BorderLayout());
  58.         contentPane.setBorder(BorderFactory.createRaisedBevelBorder());
  59.  
  60.         //create panel to show original pictures
  61.         picture1 = new JPanel();
  62.         picture1.addMouseListener(this);
  63.         picture1.addMouseMotionListener(this);
  64.         // picture1.setBackground(Color.BLUE);
  65.         picture1.setBorder(BorderFactory.createLoweredBevelBorder());
  66.         picture1.setPreferredSize(new Dimension(450, 1000));
  67.  
  68.         picture2 = new JPanel();
  69.         picture2.addMouseListener(this);
  70.         picture2.addMouseMotionListener(this);
  71.         //picture2.setBackground(Color.GREEN);
  72.         picture2.setBorder(BorderFactory.createLoweredBevelBorder());
  73.         picture2.setPreferredSize(new Dimension(450, 1000));
  74.  
  75.         JPanel controlPanel = new JPanel();
  76.         //controlPanel.setBackground(Color.GRAY);
  77.         controlPanel.setBorder(BorderFactory.createLoweredBevelBorder());
  78.         controlPanel.setPreferredSize(new Dimension(800, 50));
  79.         controlPanel.setLayout(new FlowLayout());
  80.  
  81.         openLeft = new JButton("<<<Open");
  82.         openLeft.addActionListener(this);
  83.         openRight = new JButton("Open>>>");
  84.         openRight.addActionListener(this);
  85.         picture1.add(openLeft);
  86.         picture2.add(openRight);
  87.  
  88.  
  89.         toolPanel = new JPanel();
  90.         toolPanel.setPreferredSize(new Dimension(100, 50));
  91.  
  92.         //create panel to show the phases
  93.         phasePanel = new JPanel();
  94.  
  95.         //JScrollPane scroller = new JScrollPane(phasePanel);
  96.         //phasePanel.setBackground(Color.DARK_GRAY);
  97.         phasePanel.setBorder(BorderFactory.createRaisedBevelBorder());
  98.         phasePanel.setLayout(new FlowLayout());
  99.         phasePanel.setPreferredSize(new Dimension(1000, 200));
  100.  
  101.         JToolBar toolBar = new JToolBar("Still draggable");
  102.         toolBar = new JToolBar(null, JToolBar.VERTICAL);
  103.         toolBar.setFloatable(false);
  104.  
  105.         //Create the label
  106.         JLabel sliderLabel = new JLabel("Number of Phases", JLabel.CENTER);
  107.         toolBar.add(sliderLabel, BorderLayout.SOUTH);
  108.  
  109.         toolBar.setPreferredSize(new Dimension(100, 50));
  110.         openButton = new JButton("Open");
  111.         toolBar.add(openButton);
  112.         openButton.addActionListener(this);
  113.  
  114.         JButton p = new JButton();
  115.         p.setPreferredSize(new Dimension(150, 150));
  116.  
  117.         JButton q = new JButton();
  118.         q.setPreferredSize(new Dimension(150, 150));
  119.  
  120.         JButton r = new JButton();
  121.         r.setPreferredSize(new Dimension(150, 150));
  122.  
  123.         JButton s = new JButton();
  124.         s.setPreferredSize(new Dimension(150, 150));
  125.  
  126.         contentPane.add(phasePanel, BorderLayout.SOUTH);
  127.         contentPane.add(toolBar, BorderLayout.NORTH);
  128.         contentPane.add(picture1, BorderLayout.WEST);
  129.         contentPane.add(picture2, BorderLayout.EAST);
  130.         contentPane.add(bar, BorderLayout.NORTH);
  131.         contentPane.add(toolBar, BorderLayout.CENTER);
  132.         createPhases(3);
  133.     }
  134.  
  135.     /**
  136.      * @param args the command line arguments
  137.      */
  138.     public static void main(String[] args) {
  139.  
  140.         JFrame frame = new JFrame("ImageViewer");
  141.         frame.add(new RunProgram());
  142.         frame.setSize(1100, 900);
  143.         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  144.         frame.setJMenuBar(bar);
  145.         frame.setContentPane(contentPane);
  146.         frame.setVisible(true);
  147.     }
  148.  
  149.     /** Listen to the slider. */
  150.     public void stateChanged(ChangeEvent e) {
  151.     }
  152.  
  153.     ArrayList<Point> pointsLeft = new ArrayList<Point>();
  154.     ArrayList<Point> pointsRight = new ArrayList<Point>();
  155.  
  156.     public void mouseClicked(MouseEvent e) {
  157.         if (e.getSource() == picture1) {
  158.             pointsLeft.add(e.getPoint());
  159.             drawCircleLeft(e.getX(), e.getY());
  160.             printPointsLeft();
  161.             repaint();
  162.         }
  163.         if (e.getSource() == picture2) {
  164.             pointsRight.add(e.getPoint());
  165.             drawCircleRight(e.getX(), e.getY());
  166.             printPointsRight();
  167.             repaint();
  168.         }
  169.     }
  170.  
  171.     public void printPointsLeft() {
  172.         System.out.println(pointsLeft);
  173.     }
  174.  
  175.         public void printPointsRight() {
  176.         System.out.println(pointsRight);
  177.     }
  178.  
  179.     public void drawCircleLeft(int x, int y) {
  180.         Graphics g1 = picture1.getGraphics();
  181.         g1.setColor(Color.RED);
  182.         g1.drawOval(x - radius, y - radius, 2 * radius, 2 * radius);
  183.         g1.fillOval(x - radius, y - radius, 2 * radius, 2 * radius);
  184.     }
  185.  
  186.     public void drawCircleRight(int x, int y) {
  187.         Graphics g2 = picture2.getGraphics();
  188.         g2.setColor(Color.RED);
  189.         g2.drawOval(x - radius, y - radius, 2 * radius, 2 * radius);
  190.         g2.fillOval(x - radius, y - radius, 2 * radius, 2 * radius);
  191.     }
  192.  
  193.     public void mousePressed(MouseEvent e) {
  194.         startDragX = e.getX();
  195.         startDragY = e.getY();
  196.         dragging = false;
  197.     }
  198.  
  199.     public void mouseReleased(MouseEvent e) {
  200. //        System.out.println("we moved to x: " + e.getX() + "y: " + e.getY());
  201.             if (e.getSource() == picture1) {
  202.             pointsLeft.add(e.getPoint());
  203.             drawCircleLeft(this.getX() + (e.getX() - startDragX), this.getY() 
  204.                     + (e.getY() - startDragY));
  205.             printPointsLeft();
  206.             repaint();
  207.         }
  208.         if (e.getSource() == picture2) {
  209.             pointsRight.add(e.getPoint());
  210.             drawCircleRight(this.getX() + (e.getX() - startDragX), this.getY() 
  211.                     + (e.getY() - startDragY));
  212.             printPointsRight();
  213.             repaint();
  214.         }
  215.         repaint();
  216.     }
  217.  
  218.     public void mouseDragged(MouseEvent e) {
  219.         if (!dragging){//start of a drag evet sequence
  220.             //ignore if drag moves less than a pixel or two...
  221.             if(Math.abs(startDragX - e.getX()) + Math.abs(startDragY - e.getY())> 4){
  222.                 System.out.println("We are dragging from" + startDragX + " x" 
  223.                         + startDragY + " y" );
  224.             }
  225.             dragging = true;
  226.         }
  227.         if (dragging){
  228.             //System.out.println("We are at" + e.getX() + " x" + e.getY() + " y");
  229.             if (e.getSource() == picture1) {
  230.             pointsLeft.add(e.getPoint());
  231.             drawCircleLeft(this.getX() + (e.getX() - startDragX), this.getY() 
  232.                     + (e.getY() - startDragY));
  233.             printPointsLeft();
  234.             repaint();
  235.         }
  236.         if (e.getSource() == picture2) {
  237.             pointsRight.add(e.getPoint());
  238.             drawCircleRight(this.getX() + (e.getX() - startDragX), this.getY() 
  239.                     + (e.getY() - startDragY));
  240.             printPointsRight();
  241.             repaint();
  242.         }
  243.         }
  244.         repaint();
  245.     }
  246.  
  247.     public void mouseExited(MouseEvent e) {
  248.     }
  249.  
  250.     int x, y;
  251.     int radius = 5;
  252. ImageIcon largeImage;
  253. private int startDragX, startDragY;
  254. private boolean draggable = false, dragging = false, dragged = false;
  255.  
  256.  
  257.     public void mouseMoved(MouseEvent e) {}
  258.  
  259.     public void mouseEntered(MouseEvent e) {
  260.     }
  261. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 996
Reputation: JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice JamesCherrill is just really nice 
Solved Threads: 146
JamesCherrill JamesCherrill is offline Offline
Posting Shark

Re: Making a graphics component draggable

 
0
  #10
Jul 11th, 2009
drawCircleLeft(this.getX() + (e.getX() - startDragX), this.getY()

in this line (and any others like it) you need to replace the this.getX() with the original X coord of your circle, ditto the Y coord. You need to store the original coords in the mousePressed event. What we are doing here is computing the latest position of the circle as original position + (distance the mouse has moved)
Reply With Quote Quick reply to this message  
Reply
1 2 Last »

Tags
•
•
•
•
Tags
graphics

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the Java Forum
Thread Tools Search this Thread



Tag cloud for graphics
affinetransform android blackberry c/c++ development dynamic dynamically gaming graphics hardware intel iphone larrabee linux multicore multiple news nvidia opengl opensource overclocking peripherals processor programming progressbar rasterizer rim rotatetext threads transforms wxpython
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC