Making a graphics component draggable

Thread Solved

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
  #21
Aug 17th, 2009
I'm not too sure how I would change the paint method. I however do save the circles drawn in an array list. What method would I then include the code to go through the array list and draw circles at the specified points?

Thanks
Reply With Quote Quick reply to this message  
Join Date: May 2007
Posts: 4,439
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: 510
Moderator
Featured Poster
Ezzaral's Avatar
Ezzaral Ezzaral is offline Offline
Industrious Poster

Re: Making a graphics component draggable

 
0
  #22
Aug 17th, 2009
If you maintain a list of shapes
  1. List<Shape> shapes = new ArrayList<Shape>();
You can override the paintComponent method to paint them like so
  1. public void paintComponent(Graphics g){
  2. Graphics2D g2 = (Graphics2D)g;
  3. for (Shape s : shapes){
  4. g2.draw(s);
  5. }
  6. }
If you want to move one of the shapes, your mouse routines first need to determine which shape is under the cursor. You can do that easily by checking the contains() method of each Shape against your mouse coordinates. Here is a method you could use to check them
  1. private Shape hitTest(Point p){
  2. Shape hitShape = null;
  3. for (Shape testShape : shapes){
  4. if (testShape.contains(p)){
  5. hitShape = testShape;
  6. break;
  7. }
  8. }
  9. return hitShape;
  10. }
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
  #23
Aug 17th, 2009
Currently al I am doing is adding the points where the circles are drawn into an array list. With the array list of shapes how would i then save shapes rather than points? Sorry if this seems an stupid question.
Thank you
Reply With Quote Quick reply to this message  
Join Date: May 2007
Posts: 4,439
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: 510
Moderator
Featured Poster
Ezzaral's Avatar
Ezzaral Ezzaral is offline Offline
Industrious Poster

Re: Making a graphics component draggable

 
0
  #24
Aug 17th, 2009
In your mouse listener methods, create the Shape objects instead of drawing them directly to the screen.
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
  #25
Aug 17th, 2009
This is my mouseclicked method

  1. public void mouseClicked(MouseEvent e) {
  2. if (e.getSource() == pic1) {
  3. if (pointsLeft.isEmpty()) {
  4. eL1 = e.getPoint();
  5. //pointsLeft.add(eL1);
  6. lx = eL1.x;
  7. ly = eL1.y;
  8. drawCircleLeft(eL1.x, eL1.y);
  9. System.out.println("eL1 = " + eL1);
  10.  
  11. } else if (pointsLeft.size() == 1) {
  12. eL2 = e.getPoint();
  13. //pointsLeft.add(eL2);
  14. lx = eL2.x;
  15. ly = eL2.y;
  16. drawCircleLeft(eL2.x, eL2.y);
  17. System.out.println("eL2 " + eL2);
  18. //picture1.removeAll();
  19. } else if (pointsLeft.size() > 1) {
  20. System.out.println("Maximum selections");
  21. }
  22.  
  23. }
  24. if (e.getSource() == pic2) {
  25. if (pointsRight.isEmpty()) {
  26. eR1 = e.getPoint();
  27. pointsRight.add(eR1);
  28. lx = eR1.x;
  29. ly = eR1.y;
  30. drawCircleRight(eR1.x, eR1.y);
  31. System.out.println("eR1 = " + eR1);
  32.  
  33. } else if (pointsRight.size() == 1) {
  34. eR2 = e.getPoint();
  35. pointsRight.add(eR2);
  36. lx = eR2.x;
  37. ly = eR2.y;
  38. drawCircleRight(eR2.x, eR2.y);
  39. System.out.println("eR2 " + eR2);
  40. } else if (pointsRight.size() > 1) {
  41. System.out.println("Maximum selections");
  42. }
  43. }
  44. }

and this is my methods to draw the cirlces

  1. public void drawCircleLeft(int x, int y) {
  2. Graphics2D g1 = (Graphics2D) pic1.getGraphics();
  3. Shape circle = new Ellipse2D.Double(x - radius, y - radius, 2 * radius, 2 * radius);
  4. g1.draw(circle);
  5. g1.setColor(Color.RED);
  6. g1.fill(circle);
  7. shapes.add(circle);
  8. }
  9.  
  10. public void drawCircleRight(int x, int y) {
  11. Graphics2D g2 = (Graphics2D) pic2.getGraphics();
  12. Shape circle = new Ellipse2D.Double(x - radius, y - radius, 2 * radius, 2 * radius);
  13. g2.draw(circle);
  14. g2.setColor(Color.RED);
  15. g2.fill(circle);
  16. shapes.add(circle);
  17. }

You said to create the shapes in my listener method rather than drawing them directly. I'm not sure how I can do this with the methods I have.
Thanks
Reply With Quote Quick reply to this message  
Join Date: May 2007
Posts: 4,439
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: 510
Moderator
Featured Poster
Ezzaral's Avatar
Ezzaral Ezzaral is offline Offline
Industrious Poster

Re: Making a graphics component draggable

 
0
  #26
Aug 17th, 2009
You should restructure your code a bit to override the paintComponent() method of the JPanel objects you wish to draw to, rather then calling getGraphics() to obtain the graphics context. I gave an example above of how paintComponent() can loop through and render the shapes. Your mouse methods just need to create or modify shapes in the List and call repaint to update the graphics.

I'd recommend looking through this short tutorial on custom painting in Swing to see how to override paintComponent().
http://java.sun.com/docs/books/tutor...ing/index.html
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
  #27
Aug 17th, 2009
What I don't understand is how I can determine which panel is clicked if I don't use the getGraphics method? I'm not really quite sure how to restructure my code? The problem I am having is that I require separate methods for drawing on the right and left panel.
Reply With Quote Quick reply to this message  
Join Date: May 2007
Posts: 4,439
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: 510
Moderator
Featured Poster
Ezzaral's Avatar
Ezzaral Ezzaral is offline Offline
Industrious Poster

Re: Making a graphics component draggable

 
0
  #28
Aug 17th, 2009
Here's a small example of a custom JPanel class that keeps a List of Shape objects and lets you drag them with the mouse. Perhaps it will clear up some of your uncertainties
  1. import java.awt.BorderLayout;
  2. import java.awt.Dimension;
  3. import java.awt.Graphics;
  4. import java.awt.Graphics2D;
  5. import java.awt.Point;
  6. import java.awt.Shape;
  7. import java.awt.event.MouseEvent;
  8. import java.awt.event.MouseListener;
  9. import java.awt.event.MouseMotionListener;
  10. import java.awt.geom.Ellipse2D;
  11. import java.awt.geom.Rectangle2D;
  12. import java.awt.geom.RectangularShape;
  13. import java.util.ArrayList;
  14. import java.util.List;
  15. import javax.swing.JFrame;
  16. import javax.swing.JPanel;
  17.  
  18. public class DraggableGraphic extends JFrame {
  19.  
  20. private JPanel paintPanel;
  21.  
  22. public DraggableGraphic() {
  23. setDefaultCloseOperation(EXIT_ON_CLOSE);
  24. setMinimumSize(new Dimension(300, 300));
  25.  
  26. paintPanel = new PaintPanel();
  27. getContentPane().add(paintPanel, BorderLayout.CENTER);
  28. pack();
  29. }
  30.  
  31. class PaintPanel extends JPanel implements MouseMotionListener,MouseListener {
  32. private List<Shape> shapes;
  33. private Shape mouseOverShape=null;
  34.  
  35. public PaintPanel(){
  36. super();
  37. addMouseListener(this);
  38. addMouseMotionListener(this);
  39.  
  40. shapes = new ArrayList<Shape>();
  41. shapes.add(new Ellipse2D.Float(25, 15, 60, 30));
  42. shapes.add(new Ellipse2D.Float(75, 35, 60, 30));
  43. }
  44.  
  45. public void paintComponent(Graphics g) {
  46. super.paintComponent(g);
  47. Graphics2D g2 = (Graphics2D)g;
  48. for (Shape s : shapes){
  49. g2.draw(s);
  50. }
  51. }
  52.  
  53. public void mouseDragged(MouseEvent e) {
  54. if (mouseOverShape!=null){
  55. if(mouseOverShape instanceof RectangularShape){
  56. // Move the shape center to the mouse location
  57. RectangularShape rShape = (RectangularShape)mouseOverShape;
  58. float width = (float)rShape.getWidth();
  59. float height = (float)rShape.getHeight();
  60. rShape.setFrame(new Rectangle2D.Float(e.getX()-width/2, e.getY()-height/2, width, height));
  61. }
  62. repaint();
  63. }
  64. }
  65.  
  66. public void mouseMoved(MouseEvent e) {}
  67.  
  68. /** returns the first Shape that contains Point p or null if none contain p */
  69. private Shape hitTest(Point p){
  70. Shape hitShape = null;
  71. for (Shape testShape : shapes){
  72. if (testShape.contains(p)){
  73. hitShape = testShape;
  74. break;
  75. }
  76. }
  77. return hitShape;
  78. }
  79.  
  80.  
  81. public void mousePressed(MouseEvent e) {
  82. // figure out what shape, if any, that we are clicking on
  83. mouseOverShape = hitTest(e.getPoint());
  84. }
  85.  
  86. public void mouseReleased(MouseEvent e) {
  87. mouseOverShape = null;
  88. repaint();
  89. }
  90.  
  91. public void mouseClicked(MouseEvent e) {}
  92. public void mouseEntered(MouseEvent e) {}
  93. public void mouseExited(MouseEvent e) {}
  94. }
  95.  
  96.  
  97.  
  98.  
  99. public static void main(String args[]) {
  100. java.awt.EventQueue.invokeLater(new Runnable() {
  101. public void run() {
  102. new DraggableGraphic().setVisible(true);
  103. }
  104. });
  105. }
  106. }
In your case, with two panels, you would have two instances of this "PaintPanel" and each would be self-contained. Each has its own shapes and handles its own mouse events.
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
  #29
Aug 20th, 2009
Thank you, I now have it working!
Thanks
Reply With Quote Quick reply to this message  
Reply

Tags
graphics

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



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC