如何使用鼠标拖动事件在java小程序上绘制矩形并使其保持不变

How to draw a rectangle on a java applet using mouse drag event and make it stay

提问by Tyler

I have my program that can draw rectangles. I have two problems I can't solve. After I draw the rectangle it won't stay. The only code I have that clears the canvas in under paint, repaint is only called on mouse drag. Why when I mouse release or mouse move does my canvas clear. The second thing isn't as much a problem, but something I can't figure out, when either the height or width of my rectangle is negative the rectangle is filled in black.

我有可以绘制矩形的程序。我有两个问题无法解决。在我绘制矩形后，它不会停留。我拥有的唯一代码可以清除底漆中的画布，仅在鼠标拖动时调用重新绘制。为什么当我释放鼠标或移动鼠标时，我的画布会清除。第二件事不是什么大问题，但我无法弄清楚，当我的矩形的高度或宽度为负数时，矩形填充为黑色。

package pracpapp2;


import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class MouseTracker4July extends JFrame
   implements MouseListener, MouseMotionListener {


  private static final long serialVersionUID = 1L;
  private JLabel mousePosition;
  int x, y;
  int x1, x2, y1, y2;
  int w, h;
  private JLabel recStart;
  private JLabel recStop;
  private JLabel cords;
   // set up GUI and register mouse event handlers
   public MouseTracker4July()
   {
      super( "Rectangle Drawer" );

      mousePosition = new JLabel();
      mousePosition.setHorizontalAlignment(SwingConstants.CENTER);
      getContentPane().add( mousePosition, BorderLayout.CENTER );


      JLabel text1 = new JLabel();
      text1.setText( "At the center the mouse pointer's coordinates will be displayed." );
      getContentPane().add( text1, BorderLayout.SOUTH );

      recStart = new JLabel();
      getContentPane().add(recStart, BorderLayout.WEST);

      recStop = new JLabel();
      getContentPane().add(recStop, BorderLayout.EAST);

      cords = new JLabel();
      getContentPane().add(cords, BorderLayout.NORTH);


      addMouseListener( this );        // listens for own mouse and
      addMouseMotionListener( this );  // mouse-motion events

      setSize( 800, 600 );
      setVisible( true );
   }

   // MouseListener event handlers
   // handle event when mouse released immediately after press
   public void mouseClicked( MouseEvent event )
   {
      mousePosition.setText( "Clicked at [" + event.getX() +
         ", " + event.getY() + "]" );
   }

   // handle event when mouse pressed
   public void mousePressed( MouseEvent event )
   {

      mousePosition.setText( "Pressed at [" +(x1 = event.getX()) +
         ", " + (y1 = event.getY()) + "]" );

      recStart.setText( "Start:  [" + x1 +
         ", " + y1 + "]" );
   }

   // handle event when mouse released after dragging
   public void mouseReleased( MouseEvent event )
   {
     mousePosition.setText( "Released at [" +(x2 = event.getX()) +
         ", " + (y2 = event.getY()) + "]" );

     recStop.setText( "End:  [" + x2 +
         ", " + y2 + "]" );

   }

   // handle event when mouse enters area
   public void mouseEntered( MouseEvent event )
   {
      mousePosition.setText( "Mouse entered at [" + event.getX() +
         ", " + event.getY() + "]" );
   }

   // handle event when mouse exits area
   public void mouseExited( MouseEvent event )
   {
      mousePosition.setText( "Mouse outside window" );
   }

   // MouseMotionListener event handlers
   // handle event when user drags mouse with button pressed
   public void mouseDragged( MouseEvent event )
   {
      mousePosition.setText( "Dragged at [" + (x = event.getX()) + 
         ", " + (y = event.getY()) + "]" );
      // call repaint which calls paint
      repaint();

   }

   // handle event when user moves mouse
   public void mouseMoved( MouseEvent event )
   {
      mousePosition.setText( "Moved at [" + event.getX() +
         ", " + event.getY() + "]" );
   }

   public void paint(Graphics g)
   {
      super.paint(g); // clear the frame surface
      g.drawString("Start Rec Here", x1, y1);
      g.drawString("End Rec Here", x, y);

      w = x1 - x;
      h = y1 - y;
      w = w * -1;
      h = h * -1;

      g.drawRect(x1, y1, w, h);

      cords.setText( "w = " + w + ", h = " + h);
   }

   public static void main( String args[] )
   { 
      MouseTracker4July application = new MouseTracker4July();
      application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
   }

} // end class MouseTracker

采纳答案by javamonkey79

Ok, after re-reading your question it seems you could care less to have multiple rectangles :)

好的，在重新阅读您的问题后，您似乎不太关心有多个矩形:)

Here is a solution with only one at a time (which is close to what you had to begin with):

这是一次只有一个的解决方案（这与您必须开始的解决方案很接近）：

import java.awt.BorderLayout;
import java.awt.Graphics;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.SwingConstants;

public class MouseTracker4July extends JFrame implements MouseListener, MouseMotionListener {

    private static final long serialVersionUID = 1L;
    private final JLabel mousePosition;
    int x1, x2, y1, y2;
    int x, y, w, h;
    private final JLabel recStart;
    private final JLabel recStop;
    private final JLabel cords; // set up GUI and register mouse event handlers
    boolean isNewRect = true;

    public MouseTracker4July() {
        super( "Rectangle Drawer" );

        this.mousePosition = new JLabel();
        this.mousePosition.setHorizontalAlignment( SwingConstants.CENTER );
        getContentPane().add( this.mousePosition, BorderLayout.CENTER );

        JLabel text1 = new JLabel();
        text1.setText( "At the center the mouse pointer's coordinates will be displayed." );
        getContentPane().add( text1, BorderLayout.SOUTH );

        this.recStart = new JLabel();
        getContentPane().add( this.recStart, BorderLayout.WEST );

        this.recStop = new JLabel();
        getContentPane().add( this.recStop, BorderLayout.EAST );

        this.cords = new JLabel();
        getContentPane().add( this.cords, BorderLayout.NORTH );

        addMouseListener( this ); // listens for own mouse and
        addMouseMotionListener( this ); // mouse-motion events

        setSize( 800, 600 );
        setVisible( true );

    }

// MouseListener event handlers // handle event when mouse released immediately after press 
    public void mouseClicked( final MouseEvent event ) {
        this.mousePosition.setText( "Clicked at [" + event.getX() + ", " + event.getY() + "]" );

        repaint();
    }

// handle event when mouse pressed 
    public void mousePressed( final MouseEvent event ) {

        this.mousePosition.setText( "Pressed at [" + ( this.x1 = event.getX() ) + ", " + ( this.y1 = event.getY() ) + "]" );

        this.recStart.setText( "Start:  [" + this.x1 + ", " + this.y1 + "]" );

        this.isNewRect = true;

        repaint();
    }

// handle event when mouse released after dragging 
    public void mouseReleased( final MouseEvent event ) {
        this.mousePosition.setText( "Released at [" + ( this.x2 = event.getX() ) + ", " + ( this.y2 = event.getY() ) + "]" );

        this.recStop.setText( "End:  [" + this.x2 + ", " + this.y2 + "]" );

        repaint();
    }

// handle event when mouse enters area 
    public void mouseEntered( final MouseEvent event ) {
        this.mousePosition.setText( "Mouse entered at [" + event.getX() + ", " + event.getY() + "]" );
        repaint();
    }

// handle event when mouse exits area 
    public void mouseExited( final MouseEvent event ) {
        this.mousePosition.setText( "Mouse outside window" );
        repaint();
    }

// MouseMotionListener event handlers // handle event when user drags mouse with button pressed 
    public void mouseDragged( final MouseEvent event ) {
        this.mousePosition.setText( "Dragged at [" + ( this.x2 = event.getX() ) + ", " + ( this.y2 = event.getY() ) + "]" ); // call repaint which calls paint repaint();

        this.isNewRect = false;

        repaint();
    }

// handle event when user moves mouse 
    public void mouseMoved( final MouseEvent event ) {
        this.mousePosition.setText( "Moved at [" + event.getX() + ", " + event.getY() + "]" );
        repaint();
    }

    @Override
    public void paint( final Graphics g ) {
        super.paint( g ); // clear the frame surface 
        g.drawString( "Start Rec Here", this.x1, this.y1 );
        g.drawString( "End Rec Here", this.x2, this.y2 );

        int width = this.x1 - this.x2;
        int height = this.y1 - this.y2;

        this.w = Math.abs( width );
        this.h = Math.abs( height );
        this.x = width < 0 ? this.x1
            : this.x2;
        this.y = height < 0 ? this.y1
            : this.y2;

        if ( !this.isNewRect ) {
            g.drawRect( this.x, this.y, this.w, this.h );
        }

        this.cords.setText( "w = " + this.w + ", h = " + this.h );

    }

    public static void main( final String args[] ) {
        MouseTracker4July application = new MouseTracker4July();
        application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
    }

} // end class MouseTracker

回答by javamonkey79

You need to store your drawn items in some data structure and ensure that each item in the structure is painted to the canvas on repaint.

您需要将绘制的项目存储在某个数据结构中，并确保在重绘时将结构中的每个项目都绘制到画布上。

Also, you need to add repaint to each of your mouse events.

此外，您需要为每个鼠标事件添加重绘。

Like this: (this assumes you want to keep ALL rect's) - you can go with a single rect by eliminating the arraylist and replacing with a single rect instance.

像这样：（这假设您想保留所有矩形）-您可以通过消除数组列表并替换为单个矩形实例来使用单个矩形。

import java.awt.BorderLayout;
import java.awt.Graphics;
import java.awt.Rectangle;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.util.ArrayList;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.SwingConstants;

public class MouseTracker4July extends JFrame implements MouseListener, MouseMotionListener {

    private static final long serialVersionUID = 1L;
    private final JLabel mousePosition;
    int x1, x2, y1, y2;
    int w, h;
    private final JLabel recStart;
    private final JLabel recStop;
    private final JLabel cords; // set up GUI and register mouse event handlers
    private final ArrayList< Rectangle > rectangles = new ArrayList< Rectangle >();
    private boolean isNewRect = true;

    public MouseTracker4July() {
        super( "Rectangle Drawer" );

        this.mousePosition = new JLabel();
        this.mousePosition.setHorizontalAlignment( SwingConstants.CENTER );
        getContentPane().add( this.mousePosition, BorderLayout.CENTER );

        JLabel text1 = new JLabel();
        text1.setText( "At the center the mouse pointer's coordinates will be displayed." );
        getContentPane().add( text1, BorderLayout.SOUTH );

        this.recStart = new JLabel();
        getContentPane().add( this.recStart, BorderLayout.WEST );

        this.recStop = new JLabel();
        getContentPane().add( this.recStop, BorderLayout.EAST );

        this.cords = new JLabel();
        getContentPane().add( this.cords, BorderLayout.NORTH );

        addMouseListener( this ); // listens for own mouse and
        addMouseMotionListener( this ); // mouse-motion events

        setSize( 800, 600 );
        setVisible( true );

    }

// MouseListener event handlers // handle event when mouse released immediately after press 
    public void mouseClicked( final MouseEvent event ) {
        this.mousePosition.setText( "Clicked at [" + event.getX() + ", " + event.getY() + "]" );

        repaint();
    }

// handle event when mouse pressed 
    public void mousePressed( final MouseEvent event ) {

        this.mousePosition.setText( "Pressed at [" + ( this.x1 = event.getX() ) + ", " + ( this.y1 = event.getY() ) + "]" );

        this.recStart.setText( "Start:  [" + this.x1 + ", " + this.y1 + "]" );

        repaint();
    }

// handle event when mouse released after dragging 
    public void mouseReleased( final MouseEvent event ) {
        this.mousePosition.setText( "Released at [" + ( this.x2 = event.getX() ) + ", " + ( this.y2 = event.getY() ) + "]" );

        this.recStop.setText( "End:  [" + this.x2 + ", " + this.y2 + "]" );

        Rectangle rectangle = getRectangleFromPoints();

        this.rectangles.add( rectangle );

        this.w = this.h = this.x1 = this.y1 = this.x2 = this.y2 = 0;
        this.isNewRect = true;

        repaint();
    }

    private Rectangle getRectangleFromPoints() {
        int width = this.x1 - this.x2;
        int height = this.y1 - this.y2;
        Rectangle rectangle = new Rectangle( width < 0 ? this.x1
            : this.x2, height < 0 ? this.y1
            : this.y2, Math.abs( width ), Math.abs( height ) );

        return rectangle;
    }

// handle event when mouse enters area 
    public void mouseEntered( final MouseEvent event ) {
        this.mousePosition.setText( "Mouse entered at [" + event.getX() + ", " + event.getY() + "]" );
        repaint();
    }

// handle event when mouse exits area 
    public void mouseExited( final MouseEvent event ) {
        this.mousePosition.setText( "Mouse outside window" );
        repaint();
    }

// MouseMotionListener event handlers // handle event when user drags mouse with button pressed 
    public void mouseDragged( final MouseEvent event ) {
        this.mousePosition.setText( "Dragged at [" + ( this.x2 = event.getX() ) + ", " + ( this.y2 = event.getY() ) + "]" ); // call repaint which calls paint repaint();

        this.isNewRect = false;

        repaint();
    }

// handle event when user moves mouse 
    public void mouseMoved( final MouseEvent event ) {
        this.mousePosition.setText( "Moved at [" + event.getX() + ", " + event.getY() + "]" );
        repaint();
    }

    @Override
    public void paint( final Graphics g ) {
        super.paint( g ); // clear the frame surface 
        g.drawString( "Start Rec Here", this.x1, this.y1 );
        g.drawString( "End Rec Here", this.x2, this.y2 );

        Rectangle newRectangle = getRectangleFromPoints();
        if ( !this.isNewRect ) {
            g.drawRect( newRectangle.x, newRectangle.y, newRectangle.width, newRectangle.height );
        }

        for( Rectangle rectangle : this.rectangles ) {
            g.drawRect( rectangle.x, rectangle.y, rectangle.width, rectangle.height );
        }

        this.cords.setText( "w = " + this.w + ", h = " + this.h );

    }

    public static void main( final String args[] ) {
        MouseTracker4July application = new MouseTracker4July();
        application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
    }

} // end class MouseTracker

回答by camickr

Read up on these two Custom Painting Approaches. One approach is described above and the second approach shows how to use a BufferedImage. The example used for both approaches allows you to add multiple Rectangles to the frame.

阅读这两种自定义绘画方法。上面描述了一种方法，第二种方法展示了如何使用 BufferedImage。用于这两种方法的示例允许您向框架添加多个矩形。

回答by pianyao

If you don't care some display information, just delete every "mousePosition.setText(...)" in the mouse listeners, they will result the unnecessary repaint() callings.

如果您不关心某些显示信息，只需删除鼠标侦听器中的每个“mousePosition.setText(...)”，它们将导致不必要的 repaint() 调用。

Then, add two fields: "int rx, ry;", add/modify several methods as below:

然后，添加两个字段："int rx, ry;"，添加/修改几个方法如下：

        public void mouseDragged(MouseEvent event) {
//      mousePosition.setText("Dragged at [" + (x = event.getX()) + ", "
//              + (y = event.getY()) + "]");
        // call repaint which calls paint
        x = event.getX();
        y = event.getY();

        compRectPos();
        repaint();
    }

    private void compRectPos()
    {
        rx = x1;
        ry = y1;

        w = x - x1;
        h = y - y1;

        if ( w < 0)
            rx += w;
        if (h < 0)
            ry += h;

        w = Math.abs(w);
        h = Math.abs(h);

    }

    public void paint(Graphics g) {
        super.paint(g); // clear the frame surface
        g.drawString("Start Rec Here", x1, y1);
        g.drawString("End Rec Here", x, y);

        g.drawRect(rx, ry, w, h);

        cords.setText("w = " + w + ", h = " + h);
    }

The only problem I found is, that the rectangle doesn't appear when first drawn.

我发现的唯一问题是，第一次绘制时没有出现矩形。