Bild von Punkt zu Punkt zeichnen

[Seepferdchen]

Hallihallo,

ich möchte ein Image so skalieren und rotieren, das ich nur die x/y Koordinaten von Start und Ziel angeben und das Image sich dann zwischen beiden aufspannt.

Soweit bin ich mit meinem Code gekommen, aber die Koordinaten stimmen nicht, hat das damit zu tun, das ich erst rotiere und dann skaliere? Jedenfalls über die DrawImage - Methode lässt es sich ja nicht anders rum machen, oder doch? Wäre froh wenn da mal jemand Fachkundiges drüber schauen kann 🙂

public void drawObject(Graphics g) {
		g = rotate(rotation,g);
		g.drawImage(pics[akframe], (int) x, (int) y, scalex, scaley, null);

	}

	public void scaleImageFormTo(int x, int y, int zx, int zy) {
		int disx = zx - x, disy = zy - y;
		double dis = Math.sqrt(disx * disx + disy * disy);
		scalex = (int) dis;
		this.x = x;
		this.y = y;
		rotation = Math.atan2(disy, disx);
		

	}

	private Graphics2D rotate(double degrees,Graphics g) {
		Graphics2D g2 = (Graphics2D) g;
		AffineTransform affineTransform = AffineTransform.getRotateInstance(
				rotation,pics[0].getWidth() / 2, pics[0].getHeight() / 2);
		g2.setTransform(affineTransform);
		return g2;
		
	}

 

[Marco13]

Nur kurz geschaut, KSKB wäre nicht schlecht. Schonmal überlegt ob die AffineTransform nicht die Rotation UND die Skalierung enthalten könnte? Im Moment wird die Rotation bzgl. der Original-Bildgröße gemacht, aber das Zeichnen ist dann skaliert mit scalex und scaley, da könnte was durcheinander gekommen sein.

 

[Seepferdchen]

Hi,
was meinst du mit KSKB? Und so richtig sicher bin ich nicht wie das umsetzen kann, mit einem einfachen

affineTransform.scale(scalex,scaley)

ist die Sache scheinbar nicht getan.

EDIT

Ich habs nun so versucht:

private Graphics2D rotate(double degrees,Graphics g) {
		Graphics2D g2 = (Graphics2D) g;
		//AffineTransform affineTransform = AffineTransform.getRotateInstance();
		AffineTransform affineTransform = new AffineTransform();
		affineTransform.scale(scalex, 1);
		affineTransform.rotate(degrees, getWidth()/2 * scalex, getHeight()/2);
		g2.setTransform(affineTransform);
		return g2;
		
	}

aber nun sieht das bild nicht gedreht sondern eher verzerrt aus, wenn ich nur scale oder nur rotate verwende klappt es allerdings soweit gut.

 

[bERt0r]

Wie soll das funktionieren mit nur 2 Punkten? Es wäre möglich wenn die Vergrößerung proportional zum originalbild geschieht (Breite und Höhe proportional). Das ist einfach: Du rechnest dir die Strecke von Punkt 1 zu Punkt 2 aus, und rechnest dir das Verhältnis zur Höhe des Bildes aus. Fürs neue Bild multiplizierst du Breite und Höhe mit diesem Verhältnis. Rotieren kannst du das Bild danach.

 

[bERt0r]

KSKB ist das was erscheint wenn man mit der Maus drüberfährt. 😉 Beziehungsweise das was im Anhang liegt.

			double dist=p1.distance(p2);
			double prop=1;
			int dx=p2.x-p1.x;
			int dy=p2.y-p1.y;
			
			prop=dist/image.getHeight();
			
			int w=(int) (image.getWidth()*prop);
			int h=(int) dist;
			
			Graphics2D g2=(Graphics2D)g;
			AffineTransform af=new AffineTransform();
			af.rotate(dy,-dx,p1.x,p1.y);
			g2.transform(af);
			g2.drawImage(image,p1.x,p1.y,w,h,null);

 

[Marco13]

Ich bin davon ausgegangen, dass man zwei Eckpunkte wählen können sollte - ihr wißt schon, Multitouch Foto-rumziehen und den ganzen Schmodder. Ich glaube, das ist dann ein bißchen frickeliger, weil man erst aus den beiden Endpunkten der Diagonalen die anderen Punkte ausrechnen muss, aber ... irgendwie glaube ich auch, dass es einfacher sein müßte, als das hier

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.AffineTransform;
import java.awt.geom.Point2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
 
public class TwoPointImage extends JPanel
{
    public static void main(String[] args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            
            @Override
            public void run()
            {
                createAndShowGUI();
                
            }
        });
    }
 
    private static void createAndShowGUI()
    {
        
        BufferedImage image = null;
        try
        {
            image = ImageIO.read(new File("image00.png"));
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
        
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        final TwoPointImage twoPointImage = new TwoPointImage(image);
        twoPointImage.addMouseMotionListener(new MouseAdapter()
        {
            @Override
            public void mouseMoved(MouseEvent e)
            {
                twoPointImage.setPoints(new Point(50,50), e.getPoint());
            }
        });
        
        f.getContentPane().add(twoPointImage);
        f.setSize(1000,1000);
        f.setVisible(true);
    }
    
    private BufferedImage image;
    private AffineTransform affineTransform;
    
    
    public TwoPointImage(BufferedImage image)
    {
        this.image = image;
        this.affineTransform = new AffineTransform();
    }
    
    public static AffineTransform computeTransform(double w, double h, Point2D p0, Point2D p1)
    {
        double pdx = (p1.getX() - p0.getX());
        double pdy = (p1.getY() - p0.getY());
        double dist = Math.hypot(pdx,  pdy);
        
        double a = Math.atan(h/w);
        double ca0 = Math.cos(-a);
        double sa0 = Math.sin(-a);
        double c0x = (ca0 * pdx - sa0 * pdy) * w/dist; 
        double c0y = (sa0 * pdx + ca0 * pdy) * w/dist;

        double ca1 = Math.cos(Math.PI/2-a);
        double sa1 = Math.sin(Math.PI/2-a);
        double c1x = (ca1 * pdx - sa1 * pdy) * h/dist; 
        double c1y = (sa1 * pdx + ca1 * pdy) * h/dist;
        
        double v0x = c0x / w;
        double v0y = c0y / w;
        double len0 = Math.hypot(v0x, v0y);

        double v1x = c1x / h;
        double v1y = c1y / h;
        double len1 = Math.hypot(v1x, v1y);

        double diag = Math.hypot(w,  h);
        double scale = dist/diag;
        
        AffineTransform at = new AffineTransform(new double[]
        {
            v0x/len0*scale, v0y/len0*scale, 
            v1x/len1*scale, v1y/len1*scale, 
            p0.getX(), p0.getY() 
        });
        return at;
    }
    
    
    public void setPoints(Point2D p0, Point2D p1)
    {
        affineTransform = computeTransform(
            image.getWidth(), image.getHeight(), p0, p1);
        repaint();
    }
    
    
    
    @Override
    protected void paintComponent(Graphics gr)
    {
        super.paintComponent(gr);
        Graphics2D g = (Graphics2D)gr;
        g.setColor(Color.BLUE);
        AffineTransform originalAT = g.getTransform();
        g.transform(affineTransform);
        g.drawImage(image, 0, 0, null);
        g.setTransform(originalAT);
    }
 
}

 

[Seepferdchen]

Es ist schon durch aus möglich mit 2 Punkten, die Funktion soll eigentlich eine Art "DrawLine" für Bilder sein nicht mehr und nicht weniger. Also 2 Punkte angeben, das Bild wird dann auf der X Achse skaliert, damit ist den Abstand der Punkte lang ist, die Y Achse bleibt wie sie ist. Dann wird das Bild so rotiert das es an punkt 1 anfängt und an Punkt 2 aufhört. Sorry falls ich mich da nicht verständlich ausgedrückt hab.

Sprich was ich brauche ist einfach die umsetzung von Skalieren und Rotieren in einer Affinentransformation.

@bERt0r
Dein Code scheint mir eigentlich genau das selbe zu sein, was ich auch gemacht hab, das Problem dabei ist, dass der Winkel dann nicht mehr stimmt wenn du es nach der Rotation erst skalierst.

@Marco13
Erstmal, wow danke für die Mühe. Das ist echt eine ziemliche coole Sache, aber leider nicht was ich versuche zu machen.

 

[bERt0r]

Dann hast du dir den code nicht sehr gut angesehen, der macht nämlich genau das was du willst, ein Bild von Punkt A nach Punkt B aufspannen, per drag n drop mit der Maus. Die Distanz von A nach B ist die neue Höhe, das Verhältnis Höhe : Breite bleibt intakt, das Bild wird genau so rotiert, dass Links oben der Punkt, wo anfangs die Maus gedrückt wurde ist und Links unten der Punkt wo die Maus ausgelassen wurde ist.

 

[Seepferdchen]

Hmm stimmt, nur Achsen vertauscht und ohne die Skalierung auf beiden Seiten, aber das sollte nun kein Problem sein. Danke, aber mich würde trotzdem interessieren, wie ich 2 Operartion in einer Transformation machen kann.