Drehen eines Bildes relativ zur Mauszeigerposition

[Ribbley]

Aaaalso, ich hab den ganzen Vormitag und nun auch schon die hälfte des Nachmittags damit verbracht, aber ich find nichts gescheites dazu.

Ich möchte erreichen das sich mein Bild mit der oberen Kante immer zum Cursor hindreht.
Das ganze hab ich mir gedacht, löse ich mit Vektoren, wie in der Mathematik und hab mir dazu einfach eine Klasse erstellt die eine X und eine Y koordinate speichern (und mit getX/Y wiedergeben) kann.

Wenn die Maus bewegt wird, werden ein x und ein y wert relativ zur mitte des bildes gespeichert.
(=> Maus in der Mitte -> Wert X==0 Y==0)
Anhand dieser Koordinaten und des Mittelpunktes (hab ich nur in pixeln) läst sich der Vektor berechnen.
Der Standartvektor ist praktisch die Y-achse eines koordinatensystems -> (0,1)
Die Rechnung sollte(?) stimmen, um einen Winkel rauszubekommen.

Das bei mehrmaliger Ausführung das ganze nicht hinhaut(und ist auch ein Spiel - dazu wird es kommen) weiß ich , aber ist nicht mein hauptproblem, das krieg ich dann schon hin, was mich wundert ist das ich keine Winkel <80 bekomme z.b. und teilweise ein NaN (Not a Number) beim double-wert des winkels.

Hier der (hoffentlich ausreichende) quellausschnitt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public void doLogic(long delta){
        super.doLogic(delta);
        //ROTATE PLAYER IF THETA != 0
        if(moved){
            playersight=new Vektor(xsight,ysight);
            //COMPUTE THETA!            
            double a = (playersight.getX()*standartsight.getX()+playersight.getY()*standartsight.getY())/
            (Math.sqrt(playersight.getX()*playersight.getX()+playersight.getY()+playersight.getY())*Math.sqrt(standartsight.getX()*standartsight.getX()+standartsight.getY()*standartsight.getY()));
            theta=Math.acos(Math.toRadians(a));
            System.out.println(Math.toDegrees(theta));
            rotatedplayer = rotateImage(player,10);
            moved=false;
        }else
            rotatedplayer = player;

DER GESAMTE CODE (der relevanten Klasse - für alle Fälle):
[spoiler]

1
2
3
4
5
6
7
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
 
public class Player 
extends Sprite implements MouseMotionListener{
 
    private static final long serialVersionUID = 1L;
    int speed = 60;
    Game p;
    
    BufferedImage player;
    BufferedImage rotatedplayer;
    Graphics2D playergraphics;
    
    Vektor standartsight;//(p.getWidth()/2)+2,(p.getHeight()/2)+8+1); = new Vektor(0,1);
    Vektor oldplayersight;
    Vektor playersight;
    double xsight,ysight;
    boolean moved=false;
    double theta=10;
    
    public Player(BufferedImage[] i, double x, double y, long delay, Game p) {
        super(i, x, y, delay, p);
        this.p=p;
        p.frame.addMouseMotionListener(this);
        standartsight =new Vektor(0,1);
        player = pics[currentpic];
    }
    
    public void doLogic(long delta){
        super.doLogic(delta);
        //ROTATE PLAYER IF THETA != 0
        if(moved){
            playersight=new Vektor(xsight,ysight);
            //COMPUTE THETA!            
            double a = (playersight.getX()*standartsight.getX()+playersight.getY()*standartsight.getY())/
            (Math.sqrt(playersight.getX()*playersight.getX()+playersight.getY()+playersight.getY())*Math.sqrt(standartsight.getX()*standartsight.getX()+standartsight.getY()*standartsight.getY()));
            theta=Math.acos(Math.toRadians(a));
            System.out.println(Math.toDegrees(theta));
            rotatedplayer = rotateImage(player,10);
            moved=false;
        }else
            rotatedplayer = player;
        
    }
    public void drawObjects(Graphics g) {
        //Player kriegt fixe x,y werte zum anzeigen!        
        g.drawImage(rotatedplayer, (int) (p.getWidth()/2-getWidth()/2), (int) (p.getHeight()/2-getHeight()/2), null);
        player= rotatedplayer;
    }
    private static BufferedImage rotateImage(BufferedImage src, double degrees) {
        AffineTransform affineTransform = AffineTransform.getRotateInstance(
                Math.toRadians(degrees),
                src.getWidth() / 2,
                src.getHeight() / 2);
        BufferedImage rotatedImage = new BufferedImage(src.getWidth(), src
                .getHeight(), BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = (Graphics2D) rotatedImage.getGraphics();
        g.setTransform(affineTransform);
        g.drawImage(src, 0, 0, null);
        return rotatedImage;
    }
 
    @Override
    public void mouseDragged(MouseEvent arg0) {     
    }
 
    @Override
    public void mouseMoved(MouseEvent arg0) {
        moved = true;
        xsight = arg0.getX()-(p.getWidth()/2)+2;
        ysight = arg0.getY()-(p.getHeight()/2)+8;
        System.out.println("Mouse move detected!("+xsight+"|"+ysight+")");
        
    }
}

[/spoiler]

PS: Sorry für 2 quelltexte, aber offensichtlich ging der spoilerbutton nicht in diesem forum/hab ihn nicht gefunden :x

MfG
Ribbley!

[Marco13]

Die Berechung des benötigten Drehwinkels könnte man wohl mit Math.atan2(dy,dx) machen.

Aber mal unabhängig davon: Ich glaube, es ist KEINE gute Idee, bei jeder Drehung ein neues Bild zu erstellen. Stattdessen sollte vermutlich eher der aktuelle Drehwinkel des Spielers gespeichert werden. Dann kann man in der drawObjects das gedrehte Bild zeichnen. Letzteres würde dann grob so ablaufen, wie jetzt schon, als ETWA

1
2
3
4
AffineTransform oldAT = g.getTransform();
g.rotate(centerX, centerY, angle);
g.drawImage(...);
g.setTransform(oldAT);

aber eben OHNE jedes mal ein neues Bild zu erstellen.

[stKev]

Hi, habe vor einigen Wochen die selbe Idee gehabt. Wobei ich hier mit der AffineTransform gearbeitet habe die mir das bestehende Bild dreht. Wichtig bei der ganzen Sache ist nur das keiner der beiden Vektoren 0,0 werden sollte. Dies fange ich aber in der Methode(calculate) welche calcTheta berechnet ab. Sonst geschieht es, dass das Bild den Bezug verliert wo vorne ist. Um dein NaN Problem zu lösen. Es tritt auf wenn dein Mauszeiger im rotate Ursprung sich befindet.

Würde dir auch empfehlen dein Ursprung in die Mitte des Players zu verschieben.

JPanel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
package player;
 
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
 
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
 
public class Panel extends JPanel implements MouseMotionListener, MouseListener, KeyListener, Runnable {
    
    /* Attribute */
    private JFrame parent;
    private Player p;
    private Thread t;
    private boolean rotate;
    // MausPosi
    private Point mp;
 
    
    /* Konstruktor */
    public Panel(JFrame parent) {
        super();
        this.parent = parent;
        this.setFocusable(true);
        this.addKeyListener(this);
        this.addMouseMotionListener(this);
        this.addMouseListener(this);
        init();
    }
    /* initialisiert Objekte */
    private void init() {
        // Player mit Startkoordinaten
        p = new Player(100, 100);
        
        t = new Thread(this);
    
        // temp MousePosi bis zur ersten MouseTranslation
        mp = new Point(0,0);
        rotate = true;
 
        t.start();
    }
    
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;
        // zeichnet Player
        p.drawPlayer(g2d);
    }
 
    @Override
    public void run() {
        // GAMELOOP
        while (true) {
 
            // Berechnung + Bewegung
            p.calculate(mp);
            if (rotate) {
                p.rotate();
            }
            p.translate();
            repaint();
 
            try {
                Thread.sleep(25);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    /* keyPressed + keyReleased ändern die Translationattribute des Player in Abhängigkeit des Tastendrucks */
    @Override
    public void keyPressed(KeyEvent e) {
        if (e.getKeyCode() == KeyEvent.VK_A) {
            p.setDx(-15);
        }
        if (e.getKeyCode() == KeyEvent.VK_D) {
            p.setDx(15);
        }
        if (e.getKeyCode() == KeyEvent.VK_W) {
            p.setDy(-15);
        }
        if (e.getKeyCode() == KeyEvent.VK_S) {
            p.setDy(15);
        }   
    }
    
    @Override
    public void keyReleased(KeyEvent e) {
        if (e.getKeyCode() == KeyEvent.VK_A) {
            p.setDx(0);
        }
        if (e.getKeyCode() == KeyEvent.VK_D) {
            p.setDx(0);
        }
        if (e.getKeyCode() == KeyEvent.VK_W) {
            p.setDy(0);
        }
        if (e.getKeyCode() == KeyEvent.VK_S) {
            p.setDy(0);
        }
    }
 
    @Override
    public void keyTyped(KeyEvent e) {  
    }
 
    @Override
    public void mouseDragged(MouseEvent e) {
    }
 
    @Override
    public void mouseMoved(MouseEvent me) {
        // ermittelt den Point der MausPosi
        mp = me.getPoint();
    }
    @Override
    public void mouseClicked(MouseEvent arg0) {
        if (rotate == false) {
            rotate = true;
        }else{
            rotate = false;
        }
        
    }
    @Override
    public void mouseEntered(MouseEvent arg0) {
        // TODO Auto-generated method stub
        
    }
    @Override
    public void mouseExited(MouseEvent arg0) {
        // TODO Auto-generated method stub
        
    }
    @Override
    public void mousePressed(MouseEvent arg0) {
        
        
    }
    @Override
    public void mouseReleased(MouseEvent arg0) {
        
    }
}

Player

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
239
240
241
242
244
245
246
247
249
250
251
252
package player;
 
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Point;
import java.awt.geom.AffineTransform;
import java.awt.geom.Point2D;
import javax.swing.ImageIcon;
 
public class Player {
    
    /* Attribute */
    // wird nur für die StartPosition und die Ermittlung des Centers benötigt
    // nach der Initialisierung werden x,y nicht mehr verändert bzw. anhand des Winkel verschoben
    private int x;
    private int y;
    // x,y NICHT VERWENDEN -----> this.center.getX()/getY() verwenden!!!
 
    
    private int dx;
    private int dy;
    private Image skin;
    private Image arrow;
    private Point2D center;
    private Point mp;
    
    private double theta;
    private double dt;
    private double calcTheta;
    private double anchorX;
    private double anchorY;
    
    private AffineTransform tx;
 
    /* Konstruktor */
    public Player(int x, int y) {
        this.x = x;
        this.y = y;
        init();
        
    }
    
    /* initialisiert Objekte */
    private void init() {
        tx = new AffineTransform();
        
        // setzt den Player auf die StartPosi
        tx.setToTranslation(this.x, this.y);
 
        // lädt die Bilder
        // Auto
        skin = new ImageIcon("Image\\tank.png").getImage();
        // Ursprung
        arrow = new ImageIcon("Image\\a.png").getImage();
        
        // verschiedt den rotations anchor in die mitte des Bildes
        anchorX = skin.getWidth(null) / 2;
        anchorY = skin.getHeight(null) / 2;
        
        // repräsentiert den Mittelpunkt des bewegten Objektes als Point2D
        center = new Point2D.Double(this.x + (skin.getWidth(null) / 2), this.y + (skin.getHeight(null) / 2));
    }
    // zeichnet
    public void drawPlayer(Graphics2D g2d) {
        Graphics2D g2d_p = (Graphics2D) g2d.create();
        //g2d_p.drawImage(arrow, (int)(this.center.getX() - arrow.getWidth(null) / 2), (int)(this.center.getY() - arrow.getHeight(null) / 2), null);
        g2d_p.drawImage(skin, tx, null);
        //g2d_p.setColor(Color.BLACK);
        //g2d_p.fill(new Rectangle((int)this.center.getX(), (int)this.center.getY(), 5, 5));
    }
    /*
     * Die Methode erhält alle 25ms die neue Position der Maus, mit Hilfe dieser Position
     * ermittelt sie den MausVektor (von Mittelpunkt des zu bewegenden Objektes bis zur Maus).
     * Ein BezugsVektor der die Front des Objektes repräsentiert, hilft bei der Berechnung
     * des Winkels(calcTheta), den diese beiden Vektoren aufspannen.
     * Da calcTheta max. 1 Pi annehmen kann, wird am Ende der Methode insofern die Maus links vom Objekt ist
     * der Winkel umgerechnet.
     */
    public void calculate(Point mp) {
        // mousePosi
        this.mp = mp;
        
        int[] bezugsVek = {0,-10};
        int[] mVek = new int[2];
        
        // ermittelt den vektor vom mittelpunkt des Objektes zur Maus (quasi wird hier der Ursprung verschoben)
        mVek[0] = (int) (this.mp.x - this.center.getX());
        mVek[1] = (int) (this.mp.y - this.center.getY());
        
        // damit die Winkelberechnung nicht NaN ergibt, wird der MausVek der vom Mittelpunkt bis zur MausPosi zeigt
        // auf (1,1) gesetzt, insofern die Maus sich im Ursprung befindet
        if(mVek[0] == 0) {
            mVek[0] = 1;
        }
        if (mVek[1] == 0) {
            mVek[1] = 1;
        }
        
        // Skalarprodukt aus den Vektorkomponenten (berechnet den winkel zwischen dem bezugsVek und dem vektor der zur maus zeigt)
        calcTheta = Math.acos(
                              ((bezugsVek[0] * mVek[0]) + (bezugsVek[1] * mVek[1]))
                                                        /
                              ((Math.sqrt((bezugsVek[0] * bezugsVek[0]) + (bezugsVek[1] * bezugsVek[1])))
                                                        *
                              (Math.sqrt((mVek[0] * mVek[0]) + (mVek[1] * mVek[1]))))
                             );
        
        // falls die maus link vom Objekt ist, wird die berechnung konvertiert, da calcTheta max 1 pi annimmt. (halberKreis)
        if (mp.x < this.center.getX()) {
            calcTheta = Math.toRadians(360) - calcTheta;
        }   
    }
    /*
     * Diese Methode wird ebenfalls alle 25ms nach der calculate() in der run()(Gameloop) Methode aufgerufen.
     * Sie lässt das Objekt in Abhängigkeit der Differenz des vorherigen Winkels(theta) und des aktuellen Winkels(calcTheta)
     * rotieren. Dazu wird das AffineTransform Objekt, mit dessen Hilfe das Image des Objektes gezeichnet wird, verändert.
     * Am Ende werden die Winkel noch gleichgesetzt.
     */
    public void rotate() {
            // ermittelt die differenz des berechnet winkels und dem vorherigen
            dt = this.calcTheta - this.theta;
            System.out.println(Math.toDegrees(dt));
            tx.rotate(dt, anchorX, anchorY);
            
            // wurde das bild rotiert so werden beide Winkel gleichgesetzt, damit er nicht unendlich um den errechneten Winkel dreht
            // die calculate wird ebenfall im gameloop(25ms) ausgeführt (daher wir calcTheta sofort ein neuer wert zugewiesen)
            // theta enthält den Wert des zuvor berechneten Winkels, da bei dem nächsten Aufruf der Methode vom neu berechneten
            // Winkel der vorherige abgezogen werden muss, damit das Image nur um die Differenz gedreht wird.
            this.theta = calcTheta;
    }
    
    /*
     * Verändert die Koordinaten des AffineTransform Objektes in Abhängigkeit von dx und dy, welche über
     * Tastendruck verändert werden. Insofern eins ungleich 0 ist.
     * Ebenfalls wir der Ursprung der Rotation in Abhängkeit zum Winkel(theta), dx und dy verschoben.
     */
    public void translate() {
        // da die KeyRealeased 0 ja nur so spamed, hier eine prüfung eine bewegung um (0,0) sinnlos..
        if (this.dx != 0 || this.dy != 0) {
 
            tx.translate(dx, dy);
            // der Point2D ist inkompatibel mit der AffineTransform
            // somit alternativ Lösung um den Punkt in Abhänigkeit zum Winkel zuverschieben
            // das auto bewegt sich z.B. 15 pixel 45 grad geneigt
            // und der Ursprung würde ohne diese berechnung ungerichter 15 pixel nach oben bewegt..
            this.center.setLocation(this.center.getX() + (dx * Math.cos(this.theta) - dy * Math.sin(this.theta)),
                                    this.center.getY() + (dx * Math.sin(this.theta) + dy * Math.cos(this.theta)));
        }
    }
 
    /* GETTER & SETTER */
 
    public int getX() {
        return x;
    }
 
    public void setX(int x) {
        this.x = x;
    }
 
    public int getY() {
        return y;
    }
 
    public void setY(int y) {
        this.y = y;
    }
 
    public int getDx() {
        return dx;
    }
 
    public void setDx(int dx) {
        this.dx = dx;
    }
 
    public int getDy() {
        return dy;
    }
 
    public void setDy(int dy) {
        this.dy = dy;
    }
 
    public Image getSkin() {
        return skin;
    }
 
    public void setSkin(Image skin) {
        this.skin = skin;
    }
 
    public Image getArrow() {
        return arrow;
    }
 
    public void setArrow(Image arrow) {
        this.arrow = arrow;
    }
 
    public Point2D getCenter() {
        return center;
    }
 
    public void setCenter(Point2D center) {
        this.center = center;
    }
 
    public double getTheta() {
        return theta;
    }
 
    public void setTheta(double theta) {
        this.theta = theta;
    }
 
    public double getCalcTheta() {
        return calcTheta;
    }
 
    public void setCalcTheta(double calcTheta) {
        this.calcTheta = calcTheta;
    }
 
    public AffineTransform getTx() {
        return tx;
    }
 
    public void setTx(AffineTransform tx) {
        this.tx = tx;
    }
    
    
    public double getAnchorX() {
        return anchorX;
    }
 
    public void setAnchorX(double anchorX) {
        this.anchorX = anchorX;
    }
 
    public double getAnchorY() {
        return anchorY;
    }
 
    public void setAnchorY(double anchorY) {
        this.anchorY = anchorY;
    }
}

Window lasse ich mal weg. Falls du das für ein Spiel verwenden willst, sage ich dir gleich, wirst du relativ wenige Sprites finden. 2D overview ohne Vogelperspektive ist rare.

Edit: Ah, sehe grade du hast ja ebenfall AffineTransform verwendet. Klappt deins den so wie du es dir erwünscht hast oder hast du noch Probleme dabei?