JAVA画像の再描画

Question

プログラミング初心者です。JAVAを使いGUI上で画像をドラッグして移動させたいと思うのですが、現在考え付いたのはMouseMotionListennerのmouseDraggedメソッドでカーソルの位置を取得し画像の配置に反映させてrepaintでpaintメソッドを呼び出し再描画させる方法です。この方法だとカーソルを動かすたびに全体を再描画してしまうため動かしていない画像がチカチカしてしまいます。
何かいい方法はないでしょうか？

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

public class mouse extends JFrame implements MouseMotionListener,MouseListener {
    ImageIcon icon;
    Image i;
    Graphics a,b;
    int x1=100;
    int y1=100;
    int x2=100;
    int y2=300;
    int clickx,clicky;
    int comand;
    //位置の微調整
    int distancex=10;
    int distancey=44;

    public static void main(String[] args) {
        new mouse();
    }
    public mouse() {
        setSize(500, 500);
        setLayout(null);
        setVisible(true);
        addMouseMotionListener(this);
        addMouseListener(this);

        icon = new ImageIcon("./image/imsge1.png");
        i = icon.getImage();        
    }

    public void paint(Graphics g) {   
        super.paint(g); 
        a = getContentPane().getGraphics();    
        a.drawImage(i,x1,y1,50,50,this);
        b = getContentPane().getGraphics();    
        b.drawImage(i,x2,y2,50,50,this);
    }
    public void mouseEntered(MouseEvent e){
    }
    public void mouseExited(MouseEvent e){
    }
    public void mousePressed(MouseEvent e){        
    }
    public void mouseReleased(MouseEvent e){
    }
    public void mouseClicked(MouseEvent e){
        //移動させる画像の選択
        clickx=e.getPoint().x;
        clicky=e.getPoint().y;
        if(clickx<x1+50+distancex&&clickx>x1+distancex&&clicky>y1+distancey&&clicky<y1+50+distancey){
            comand=1;          
        }
        if(clickx<x2+50+distancex&&clickx>x2+distancex&&clicky>y2+distancey&&clicky<y2+50+distancey){
            comand=2;           
        }
    }
    public void mouseDragged(MouseEvent e) {    
           
        switch(comand){
            case 1:
                x1=e.getPoint().x-distancex-50/2;
                y1=e.getPoint().y-distancey-50/2;
                repaint();
                break;
            case 2:
                x2=e.getPoint().x-distancex-50/2;
                y2=e.getPoint().y-distancey-50/2;
                repaint();  
                break;             
        }
    }
    public void mouseMoved(MouseEvent e) {
    }
}

Answer 1

JPanelベースにすればダブルバッファリングで描画するので、ちらつかないようになります。

import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;


public class Mouse extends JPanel { // JPanelベースに
    public static void main(String[] args) {
        var frame = new JFrame();
        frame.setSize(500, 500);
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Mouse());
        frame.setVisible(true);
    }

    private Image image = new ImageIcon("./image/imsge1.png").getImage();
    private int x1 = 100;
    private int y1 = 100;
    private int x2 = 100;
    private int y2 = 300;
    private int offsetX; // 画像のつまんだ位置X
    private int offsetY; // 同上Y
    private int command;

    public Mouse() {
        addMouseListener(new MouseAdapter() { // 不要なメソッドが邪魔なのでアダプタで
            @Override public void mousePressed(MouseEvent e) { // ClickedからPressedに変更
                var clickX = e.getPoint().x;
                var clickY = e.getPoint().y;
                
                if (x1 < clickX && clickX < x1 + 50 && y1 < clickY && clickY < y1 + 50) {
                    command = 1;
                    offsetX = clickX - x1; // 画像のつまんだ位置を保存
                    offsetY = clickY - y1;
                }
                if (x2 < clickX && clickX < x2 + 50 && y2 < clickY && clickY < y2 + 50) {
                    command = 2;
                    offsetX = clickX - x2;
                    offsetY = clickY - y2;
                }
            }

            @Override public void mouseReleased(MouseEvent e) {
                command = 0;
            }
        });

        addMouseMotionListener(new MouseAdapter() {
            @Override public void mouseDragged(MouseEvent e) {
                switch (command) {
                    case 1:
                        x1 = e.getPoint().x - offsetX; // 画像のつまんだ位置を考慮し更新
                        y1 = e.getPoint().y - offsetY;
                        repaint();
                        break;
                    case 2:
                        x2 = e.getPoint().x - offsetX;
                        y2 = e.getPoint().y - offsetY;
                        repaint();
                        break;
                }
            }
        });
    }

    @Override
    protected void paintComponent(Graphics g) { // paintからpaintComponentに
        super.paintComponent(g);

        g.drawImage(image, x1, y1, 50, 50, this);
        g.drawImage(image, x2, y2, 50, 50, this);
    }
}

気になった点をいくつか修正させていただきました。

---

画像をJLabelで表示すれば、当たり判定や描画等をSwingに任せられてかなり手を抜けます。

import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import javax.swing.ImageIcon;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class Mouse extends JPanel {
    public static void main(String[] args) {
        var frame = new JFrame();
        frame.setSize(500, 500);
        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Mouse());
        frame.setVisible(true);
    }

    public Mouse() {
        setLayout(null);

        var imageIcon = new ImageIcon("./image/imsge1.png");
        var adapter = new MouseAdapter() {
            private Point offset;

            @Override public void mousePressed(MouseEvent e) {
                offset = e.getPoint();
            }

            @Override public void mouseDragged(MouseEvent e) {
                var component = (JComponent) e.getSource();
                var x = component.getX() + e.getX() - offset.x;
                var y = component.getY() + e.getY() - offset.y;
                component.setLocation(x, y);
            }
        };

        var label1 = new JLabel(imageIcon);
        label1.setBounds(100, 100, 50, 50);
        label1.addMouseListener(adapter);
        label1.addMouseMotionListener(adapter);
        add(label1);

        var label2 = new JLabel(imageIcon);
        label2.setBounds(100, 300, 50, 50);
        label2.addMouseListener(adapter);
        label2.addMouseMotionListener(adapter);
        add(label2);
    }
}

Comments

[destiny_]

コード修正と的確なコメントありがとうございます。

Answer 2

再描画のタイミングを「ドラッグ中」→「マウス離す」に変更してはいかがでしょうか。

Answer 3

動かしていないときは画像の更新を止めるようにすればいいというはなしなんでは