Problem in drawImage

Question

Hi,
We are developing a project where in I need to Place different images in different rectangle . For this i have used JPanel and overrided the paint method. This images are made possible to move when the mouse is beeing dragged. At this stage i am facing problems. I can move the image but the movement of the image is not very smooth. I mean to say there is filckering and Image movement is not synchronised with the movement of the mouse. How can i solve this problem.
If i need to place the code please do let me know.
If any one have solved this problem please do suggest me the workaround for the problem.
Thanks in Advance.
regards
Ravi

Answer 1

Here is the modified code :
I added the background image.
To create a RectangularImage you have to specify the filename of the image, the location point of the initial top left corner location and the dimension of the rectangle.
There is a black line around the rectangle and it is filled with a "dynamic color".
If the image is smaller than the rectangle, it is centered in.
If the image is bigger than the rectangle, it rescaled to fit in.
Each time you click on an image the background color changes randomly.
import java.util.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
import java.awt.image.*;
public class ImageDragging extends JComponent {
     Vector images;
     Image backgroundImage;
     RectangularImage selectedImage;
     final static Color[] colors = new Color[] {Color.blue, Color.red, Color.green, Color.yellow, Color.pink, Color.white, Color.orange };
     final static Random random = new Random(System.currentTimeMillis());
     public ImageDragging() {
          images = new Vector();
          backgroundImage = (new ImageIcon("backgroundImage.jpg")).getImage();
          images.add(new RectangularImage("im1.gif", new Point(10,10), new Dimension(150,150)));
          images.add(new RectangularImage("im1.gif", new Point(20,20), new Dimension(70,70)));
          images.add(new RectangularImage("im1.gif", new Point(30,30), new Dimension(20,20)));
          MyMouseAdapter mouseAdapter = new MyMouseAdapter();
          addMouseListener(mouseAdapter);
          addMouseMotionListener(mouseAdapter);
          setPreferredSize(new Dimension(400,400));
     final static Color getRandomColor() {
          return(colors[random.nextInt(colors.length)]);
     final class MyMouseAdapter extends MouseInputAdapter {
          public void mousePressed(MouseEvent e) {
               selectedImage = getImageAt(e.getPoint());
               if (selectedImage == null) {
                    return;
               else {
                    selectedImage.setMouseLocation(e.getPoint());
                    selectedImage.setColor(getRandomColor()); // change the background color randomly each time we click on the image
                    repaint(selectedImage.getRepaintBounds());
          public void mouseDragged(MouseEvent e) {
               if (selectedImage != null) {
                    repaint(selectedImage.getRepaintBounds());
                    selectedImage.moveTo(e.getPoint());
                    repaint(selectedImage.getRepaintBounds());
          public void mouseReleased(MouseEvent e) {
               if (selectedImage != null) {
                    selectedImage.moveTo(e.getPoint());
                    repaint(selectedImage.getRepaintBounds());
                    selectedImage = null;
     public final void paintComponent(Graphics g) {
          Graphics2D g2D = (Graphics2D)g;
          g2D.drawImage(backgroundImage, 0, 0, this);
          /* if you want to fill all the background and your background image is smaller than it,
          use this instead :
          g2D.drawImage(backgroundImage, 0, 0, getWidth(), getHeight(),this);*/
          RectangularImage im;
          for (Enumeration e = images.elements(); e.hasMoreElements();) {     
               im = (RectangularImage)e.nextElement();
               im.draw(g2D, this);
     public final RectangularImage getImageAt(Point p) {
          RectangularImage im;
          for (ListIterator e = images.listIterator(images.size()); e.hasPrevious();) {     
               im = (RectangularImage)e.previous();
               if (im.contains(p)) {
                    return(im);     
          return(null);
     final class RectangularImage extends Rectangle {
          Image image;     
          Point selectedPoint;
          Color dynamicColor;
          Rectangle repaintBounds;
          int imageX;
          int imageY;
          int imageWidth;
          int imageHeight;
          public RectangularImage(String filename, Point location, Dimension dimension) {
               ImageIcon ic = new ImageIcon(filename);
               image = ic.getImage();
               setBounds((int)location.getX(), (int)location.getY(), (int)dimension.getWidth(), (int)dimension.getHeight());
               repaintBounds = new Rectangle(0,0,(int)getWidth()+1, (int)getHeight()+1);
               /* These following values are used to center the image in the rectangle if the image is smaller than it
               and to rescale the image if it is bigger. */
               imageWidth = (int)ic.getIconWidth();
               imageWidth = imageWidth>width-2?width-2:imageWidth;
               imageHeight = (int)ic.getIconHeight();
               imageHeight = imageHeight>height-2?height-2:imageHeight;
               imageX = imageWidth==width-2?1:(int)((width-2-imageWidth)/2);
               imageY = imageHeight==height-2?1:(int)((height-2-imageHeight)/2);
               selectedPoint = new Point(0,0);
               dynamicColor = Color.blue;
          public void setMouseLocation(Point p) {
               selectedPoint.setLocation((int)(p.getX()-getX()), (int)(p.getY()-getY()));
          public void moveTo(Point p) {
               setLocation((int)(p.getX()-selectedPoint.getX()), (int)(p.getY()-selectedPoint.getY()));
          public void setColor(Color c) {
               dynamicColor = c;
          public Rectangle getRepaintBounds() {
               repaintBounds.setLocation(getLocation());
               return(repaintBounds);
          public void draw(Graphics2D g, ImageObserver observer) {
               g.setColor(dynamicColor);
               g.fill(this);
               g.drawImage(image, (int)getX()+imageX, (int)getY()+imageY, imageWidth, imageHeight, observer);
               g.setColor(Color.black);
               g.draw(this);
     public static void main(String[] args) {
          JFrame frame = new JFrame("Image dragging");
          frame.getContentPane().add(new ImageDragging(), BorderLayout.CENTER);
          frame.pack();
          frame.setVisible(true);
}import java.util.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
import java.awt.image.*;
public class ImageDragging extends JComponent {
     Vector images;
     Image backgroundImage;
     RectangularImage selectedImage;
     final static Color[] colors = new Color[] {Color.blue, Color.red, Color.green, Color.yellow, Color.pink, Color.white, Color.orange };
     final static Random random = new Random(System.currentTimeMillis());
     public ImageDragging() {
          images = new Vector();
          backgroundImage = (new ImageIcon("backgroundImage.jpg")).getImage();
          images.add(new RectangularImage("im1.gif", new Point(10,10), new Dimension(150,150)));
          images.add(new RectangularImage("im1.gif", new Point(20,20), new Dimension(70,70)));
          images.add(new RectangularImage("im1.gif", new Point(30,30), new Dimension(20,20)));
          MyMouseAdapter mouseAdapter = new MyMouseAdapter();
          addMouseListener(mouseAdapter);
          addMouseMotionListener(mouseAdapter);
          setPreferredSize(new Dimension(400,400));
     final static Color getRandomColor() {
          return(colors[random.nextInt(colors.length)]);
     final class MyMouseAdapter extends MouseInputAdapter {
          public void mousePressed(MouseEvent e) {
               selectedImage = getImageAt(e.getPoint());
               if (selectedImage == null) {
                    return;
               else {
                    selectedImage.setMouseLocation(e.getPoint());
                    selectedImage.setColor(getRandomColor()); // change the background color randomly each time we click on the image
                    repaint(selectedImage.getRepaintBounds());
          public void mouseDragged(MouseEvent e) {
               if (selectedImage != null) {
                    repaint(selectedImage.getRepaintBounds());
                    selectedImage.moveTo(e.getPoint());
                    repaint(selectedImage.getRepaintBounds());
          public void mouseReleased(MouseEvent e) {
               if (selectedImage != null) {
                    selectedImage.moveTo(e.getPoint());
                    repaint(selectedImage.getRepaintBounds());
                    selectedImage = null;
     public final void paintComponent(Graphics g) {
          Graphics2D g2D = (Graphics2D)g;
          g2D.drawImage(backgroundImage, 0, 0, this);
          /* if you want to fill all the background and your background image is smaller than it,
          use this instead :
          g2D.drawImage(backgroundImage, 0, 0, getWidth(), getHeight(),this);*/
          RectangularImage im;
          for (Enumeration e = images.elements(); e.hasMoreElements();) {     
               im = (RectangularImage)e.nextElement();
               im.draw(g2D, this);
     public final RectangularImage getImageAt(Point p) {
          RectangularImage im;
          for (ListIterator e = images.listIterator(images.size()); e.hasPrevious();) {     
               im = (RectangularImage)e.previous();
               if (im.contains(p)) {
                    return(im);     
          return(null);
     final class RectangularImage extends Rectangle {
          Image image;     
          Point selectedPoint;
          Color dynamicColor;
          Rectangle repaintBounds;
          int imageX;
          int imageY;
          int imageWidth;
          int imageHeight;
          public RectangularImage(String filename, Point location, Dimension dimension) {
               ImageIcon ic = new ImageIcon(filename);
               image = ic.getImage();
               setBounds((int)location.getX(), (int)location.getY(), (int)dimension.getWidth(), (int)dimension.getHeight());
               repaintBounds = new Rectangle(0,0,(int)getWidth()+1, (int)getHeight()+1);
               /* These following values are used to center the image in the rectangle if the image is smaller than it
               and to rescale the image if it is bigger. */
               imageWidth = (int)ic.getIconWidth();
               imageWidth = imageWidth>width-2?width-2:imageWidth;
               imageHeight = (int)ic.getIconHeight();
               imageHeight = imageHeight>height-2?height-2:imageHeight;
               imageX = imageWidth==width-2?1:(int)((width-2-imageWidth)/2);
               imageY = imageHeight==height-2?1:(int)((height-2-imageHeight)/2);
               selectedPoint = new Point(0,0);
               dynamicColor = Color.blue;
          public void setMouseLocation(Point p) {
               selectedPoint.setLocation((int)(p.getX()-getX()), (int)(p.getY()-getY()));
          public void moveTo(Point p) {
               setLocation((int)(p.getX()-selectedPoint.getX()), (int)(p.getY()-selectedPoint.getY()));
          public void setColor(Color c) {
               dynamicColor = c;
          public Rectangle getRepaintBounds() {
               repaintBounds.setLocation(getLocation());
               return(repaintBounds);
          public void draw(Graphics2D g, ImageObserver observer) {
               g.setColor(dynamicColor);
               g.fill(this);
               g.drawImage(image, (int)getX()+imageX, (int)getY()+imageY, imageWidth, imageHeight, observer);
               g.setColor(Color.black);
               g.draw(this);
     public static void main(String[] args) {
          JFrame frame = new JFrame("Image dragging");
          frame.getContentPane().add(new ImageDragging(), BorderLayout.CENTER);
          frame.pack();
          frame.setVisible(true);
Hope this helps,
Denis