listener repaint() - verschiedene Darstellung

[Gelöschtes Mitglied 72742]

Hallo Foren-Teilnehmer,
habe listener (Components oder Panels) die bei Benachrichtigung ein repaint() machen. Leider schaffe ich es seit einiger Zeit nicht Punkte, Linien, etc. in verschiedenen Darstellungen zu zeichnen. Also die Zeichnung sollten dann in jedem Listener anders aussehen. Hat jemand eine Idee?

 

[KonradN]

Wenn Du uns Details geben würdest, was Du genau versucht hast - dann kann man Ratschläge geben.

Ansonsten kann man nur allgemeine Informationen geben - aber da ist unklar, ob diese Dir helfen.

Generell ist es Sinnvoll, dass man Model und Darstellung trennt. Dann hast Du also die Daten der Zeichnung vorliegen und separat davon hast Du dann eine Komponente, die die Zeichnung darstellt.

Dann müsstest Du "nur" die Daten der Zeichnung anpassen und beim repaint würde dann die geänderte Zeichnung dargestellt.

 

[Gelöschtes Mitglied 72742]

Danke.
Daten der Zeichnung: Z. B. eine Linie.
Wenn ich diese im Model anpasse, dann wird die geänderte Zeichnung in beiden Komponenten gleich verändert.
Das ist mein Problem.

Ich stelle diese Frage im Forum, da ich es schon seit einigen Wochen selbst versuche.

Die einfachste Version des Codes findet sich bei Beitrag - 24. Mai 2021 - unter:
https://www.java-forum.org/thema/gr...rn-gleichzeitig-zeichnen.192205/#post-1256220
Wie würde man das hier z.B. machen?

 

[KonradN]

Wenn dein Code wirklich so aussieht:

    public void run() {
        Drawing drawing = new Drawing();
        drawing.add(new Line2D.Double(100, 100, 150, 150));

        createDrawingFrame(createDrawingPanel(drawing)).setVisible(true);
        createDrawingFrame(createDrawingPanel(drawing)).setVisible(true);
    }

dann hast Du ja nur eine Drawing Instanz und zwei Fenster, die beide diese eine Instanz anzeigen. Wenn Du zwei Drawings haben willst, dann brauchst Du da auch zwei Instanzen. Also z.B. sowas in der Art:

    public void run() {
        Drawing drawing1 = new Drawing();
        drawing1.add(new Line2D.Double(100, 100, 150, 150));
        createDrawingFrame(createDrawingPanel(drawing1)).setVisible(true);
        
        Drawing drawing2 = new Drawing();
        drawing2.add(new Line2D.Double(150, 100, 100, 150));
        createDrawingFrame(createDrawingPanel(drawing2)).setVisible(true);
    }

War das evtl. schon Dein Problem?

 

[Gelöschtes Mitglied 72742]

Ja, das habe ich schon so ähnlich, bis auf

drawing1.add(new Line2D.Double(100, 100, 150, 150));
drawing2.add(new Line2D.Double(150, 100, 100, 150));

Genau das ist der Punkt, den ich nicht lösen kann.

Eigentlich ist es die gleiche Datenbasis in drawing1, drawing2 (also nur z. B. 100, 100, 150, 150), die ich verschieden darstellen möchte, damit man es nicht in beiden Komponenten zeichnen muss.

Ich habe schon einiges getestet, z. B. die Daten zu kopieren - leider mit dem gleichen Resultat.

 

[KonradN]

Ich verstehe gerade nicht das Problem. Du hast zwei Komponenten, die jeweils ein Drawing darstellen.

• was genau passiert
• was genau willst Du anders haben
• was genau ist der Code

Wenn beide Fenster die gleiche Zeichnung darstellen sollen, dann ist in dem Thread ja bereits eine Lösung: Ein Drawing und beide Fenster haben genau dieses. Also eine Änderung und beides wird angepasst.

Wenn die Darstellung genau einer Zeichnung mit unterschiedlichen Optionen dargestellt werden soll, dann kannst Du eine Zeichnung an beide Komponenten geben (=> eine Zeichnung) und zusätzlich hast Du noch eine Klasse mit den Optionen - die ist dann unterschiedlich.

 

[Gelöschtes Mitglied 72742]

Darstellung genau einer Zeichnung mit unterschiedlichen Optionen versuche ich zu programmieren.
"drawing1 und drawing2" habe ich so doch nicht.

Also müsste ich jeweils "drawing drawing1 = new drawing()" und "drawing drawing2 = new drawing()" machen und meine
ursprüngliche Datenbasis dort halten?

Habe es gerade getestet und gesehen, daß die Darstellung momentan nur in einem Fenster zu sehen ist. Wie geht das?

 

[KonradN]

Bitte immer den genauen Code zeigen - dann kann man besser sehen, was Du meinst.

Darstellung genau einer Zeichnung mit unterschiedlichen Optionen versuche ich zu programmieren.

Dann solltest Du das entsprechend modellieren. Dann hast Du nur ein Drawing und zwei Instanzen von Options.

Und dann kann jedes Fenster eine Referenz zu dem Drawing halten und jeweils eine Referenz zu Options. Dann würde eine Änderung an Drawing an allen Stellen gezeigt (so diese neu gemalt werden!)

 

[Gelöschtes Mitglied 72742]

Genauen Code zu zeigen ist schwierig, da es über mehrere Klassen geht.

Momentan hat jedes Fenster diese "Referenz" zu Drawing, also
createDrawingFrame(createDrawingPanel1(drawing)).setVisible(true);
createDrawingFrame(createDrawingPanel2(drawing)).setVisible(true);

Wie würde das mit den Options gehen?

 

[KonradN]

Du machst eine Klasse Options, in der die Informationen zu finden sind, die Du brauchst, erzeugst davon Instanzen und gibst diese an deine Fenster. Und die nutzen beim malen die Informationen aus diesen Instanzen.

 

[Gelöschtes Mitglied 72742]

Danke. Könntest Du ein einfaches Beispiel machen? Meine Punkte sind in drawing zu finden. Als einfachstes
Beispiel ziehe ich in x-Richtung 5 von meinen Punkten ab.

createDrawingFrame(createDrawingPanel1(drawing, options1)).setVisible(true);
createDrawingFrame(createDrawingPanel2(drawing, options2)).setVisible(true);


Was würde in Options stehen? Wie mache ich in meinen Fenstern? Ich kann das technisch nicht.

 

[KonradN]

Kannst Du bitte im Detail beschreiben:

• Was genau willst Du an Verhalten? "in x-Richtung 5 abziehen" beschreibt erst einmal nicht das genaue Verhalten.
• Was hast Du derzeit an Code?

Das ist so nicht / kaum verständlich und mir fehlt etwas die Lust, hier so herum zu raten.

Evtl. meinst Du, dass dieses drawing in den Fenstern verschoben dargestellt werden soll? Dann könnte in Options sowas wie int dx, int dy gespeichert sein. Und beim Malen würdest Du immer bei jedem Punkt statt (x,y) halt (x+dx, y+dy) nehmen.

Aber war das schon, was Du wolltest?

 

[Gelöschtes Mitglied 72742]

Danke. Das meinte ich, es reicht mir möglicherweise auch als Text formuliert.
Was ich nicht zusammenbekomme ist drawing und options.

"Du machst eine Klasse Options, in der die Informationen zu finden sind, die Du brauchst, erzeugst davon Instanzen und gibst diese an deine Fenster. Und die nutzen beim malen die Informationen aus diesen Instanzen."

Da habe ich keine Idee wie das gemacht werden könnte. In den Fenstern steht ja nur "g2.draw(shape);" Die Punkte sind bei mir in drawing zu finden.
Würde ich in drawing dann eine Instanz von Options erzeugen? Ich befürchte, dann bin ich wieder am Anfang, da beide Fenster dann das gleiche darstellen. In drawing kann ich nicht zwischen den Fenstern unterscheiden, diese sind dort unbekannt.

Zumindest weiß ich wie man Punkte ändert, z. B.
int myPointx=(int)(points[0].getX()+10);
int myPointy=(int)(points[0].getY()+10);
Point2D myPoint = new Point(myPointx,myPointy);

Vielleicht kann man das obige Beispiel nehmen. Die einfachste Version wäre die Linie in einem der Fenster verschoben darzustellen beim Malen.

 

[KonradN]

Diese Options sind natürlich nicht im Drawing sondern separat - das hast Du ja auch schon in #11 so gemacht.

Und beim malen musst Du das dann verwenden. Wenn es nur um ein reines Transformieren der Punkte geht, dann kann man das auch so nennen.

public class Transform {
    private int dx;
    private int dy;
    
    public Transform(int dx, int dy) {
        this.dx = dx;
        this.dy = dy;
    }
    
    public Point2D transform(Point2D point) {
        return new Point2D(
            point.getX() + dx,
            point.getY() + dy
        );
    }
}

Damit könntest Du nun Punkte transformieren zu einem neuen Punkt. Somit musst Du bei der Darstellung nun nur noch jeden Punkt vor der Verwendung transformieren.

Mich irritiert etwas: Du hast Point2D und Point als Klassen? Ggf. macht es Sinn, Punkte in einem Datentyp zu nutzen und nicht unterschiedliche Klassen zu mixen. Das ist aber nur eine Vermutung.

Das alles lässt sich nun natürlich noch weiter strukturieren falls noch andere Transforms benötigt werden wie Skalierungen, Drehungen und all sowas. Das lassen wir aber erst einmal aussen vor.

 

[Gelöschtes Mitglied 72742]

Seltsamerweise macht die Methode transform auf meinem System Ärger: Sie akzeptiert ein
"return new Point(...)" mit int aber kein "return new Point2D(...)" ohne int mit Fehler "Cannot instantiate the type Point2D ..."

public Point2D transform(Point2D point) {
return new Point(
(int)point.getX() + dx,
(int)point.getY() + dy
);
}

Dann habe ich versucht
in der run-Methode zwei Instanzen von Transform aufzurufen und diese zu übergeben:

Transform transform1 = new Transform(40,10);
Transform transform2 = new Transform(0,0);

createDrawingFrame(createDrawingPanel(drawing, transform1)).setVisible(true);
createDrawingFrame(createDrawingPanel(drawing, transform2)).setVisible(true);

Habe es auch mit createDrawingPanel1(drawing, transform1) und createDrawingPanel2(drawing, transform2) versucht:

private DrawingPanel1 createDrawingPanel1(Drawing drawing, Transform transform1) {
        DrawingPanel1 panel = new DrawingPanel1();
        panel.setDrawing(drawing);
        panel.addMouseListener(new MouseAdapter() {
            Point2D[] points = new Point2D[2];
            int count = 0;

            @Override
            public void mouseClicked(MouseEvent e) {
                points[count] = e.getPoint();
                count = (count + 1) % 2;
                if (count == 0) {
                    //drawing.add(new Line2D.Double(points[0], points[1]));
                     drawing.add(new Line2D.Double(transform1(points[0]), transform1(points[1])));
                }
            }
        });
        return panel;
    }

In der Zeile
"drawing.add(new Line2D.Double(transform1(points[0]), transform1(points[1])));"
wird transform nicht akzeptiert mit einem Fehler, daß die Methode undefiniert ist in MouseAdapter.

Also habe ich zwei Methoden eingefügt zum Testen und den Fehler vorerst einmal verschoben:

Point2D transform2(Point2D point2d) {
       
         return new Point(
                 (int)point2d.getX() + 40,
                 (int)point2d.getY() + 60
             );
    }
    Point2D transform1(Point2D point2d) {
       
        return new Point(
                (int)point2d.getX() + -10,
                (int)point2d.getY() + -60
            );
    }

Leider ist die Transformation jeweils in beiden Fenstern zu sehen. Beide Listener werden immer bei jedem Punkt informiert. Das sollen sie ja eigentlich auch. Aber ich möchte gerne daß die Transformation nur in einem Fenster ist. Also ich habe wieder drei Fehler.

 

[KonradN]

Point2D ist eine abstrakte Klasse - das sind so Kleinigkeiten, die man im Forum so nicht sieht und die einem die Entwicklungsumgebung sagen dürfte.

Du solltest einmal schauen, ob Du alle Point2D durch Point ersetzen kannst. MouseEvent.getPoint gibt auch einen Point zurück so dass Point überall funktionieren sollte (so ich jetzt nichts übersehen habe). Dann entfällt auch das Umwandeln von Double zu int.

Ansonsten fallen zwei Dinge auf:
a) Wie ruft man Methoden auf? transform1 ist bei dir der Transform Parameter. Da macht also ein transform1(..) schlicht keinen Sinn.
b) Du gibst dem DrawingPanel nur das drawing und nicht das Transform. Und du nutzt das Transform, um das drawing zu ändern.

Wenn das Transform aber doch nur dazu dient, dass die Darstellung unterschiedlich ist, dann darfst Du das eigentliche Drawing nicht anpassen.

Also visueller Vergleich:
An der Wand hängt ein toller Van Gogh (Nehmen wir einfach sein Selbstbildnis von 1887). Nun wollen da viele Fotos von haben. Kein Thema - man nimmt sein Smartphone und macht ein Foto. Soweit so gut.
Nun haben wir aber zwei Gruppen von Menschen:
a) Man will einfach ein Foto haben, so wie das Gemälde halt bei "normalem" Licht aussieht
b) Diese Gruppe will einen ganz massiven Blaustich.

Was macht man also? Man macht ein normales Foto und dann - auf dem Smartphone - wird das Bild transformiert. Gruppe a macht bei der Transformation einfach nichts. Gruppe B verändert das Bild im Smartphone mit entsprechenden Farbfiltern.

Aber es ist doch klar:

• Niemand verändert das Gemälde! Also kein Farbeimer mit blauer Farbe wird über das Gemälde geschüttet!
• Und ist doch auch klar: Sowas würde dafür sorgen, dass Gruppe A kein "normales" Foto mehr machen könnte. Die hätten dann ja auch ein blaues Gemäöde.

Also:

• Das Gemälde (Drawing) selbst wird nicht mit Farbe besprüht (dein Transform verändert Dein Drawing nicht!)
• Lediglich bei der Darstellung wird das entsprechend anders angezeigt.

 

[Gelöschtes Mitglied 72742]

"Wenn das Transform aber doch nur dazu dient, dass die Darstellung unterschiedlich ist, dann darfst Du das eigentliche Drawing nicht anpassen."
"Lediglich bei der Darstellung wird das entsprechend anders angezeigt."

Darf ich fragen wie man das macht? Habe wohl das Drawing geändert, da ich bei der Darstellung (DrawingPanel) keine Idee habe wie sie zu ändern ist.

Ja, bei Point/Point2D ist schon die ganze Zeit irgendwas unklar gewesen. Beim Methodenaufruf befand ich mich wohl im Tiefschlaf. Danke.

 

[KonradN]

Zeige bitte endlich den Code, an dem man Änderungen zeigen könnte. Das ist so extrem blöd, ständig alles zu erläutern nur um dann ständig die Rückfragen zu haben. Hättest du einmal den Code gepostet, dann hätte man da von Anfang an Anpassungen anschaulich zeigen können!

Also: Oberhalb des Eingabefelds den Knopf </> nutzen, dann im Popup prüfen, dass die Sprache stimmt und dann den Inhalt einer Klasse posten. Und das nacheinander für alle Klassen, die hier wichtig sind / sein könnten.

Aus dem anderen Thread habe ich jetzt mal eine Zeile heraus genommen. In einem Paint war da:
[I][I][I]g.fillOval(pointStart.x - 10, pointStart.y - 10, 20, 20);[/I][/I][/I]
Du hast also ein Point pointStart - und den musst Du transformieren. Also wenn Du in der Klasse auch ein Transform transform hast, wäre daraus geworden:

Point transPoint = transform.transform(pointStart);
g.fillOval(transPoint.x - 10, transPoint.y - 10, 20, 20);

 

[Gelöschtes Mitglied 72742]

Danke für die vielen Erklärungen. Verstehe wieso es nicht geht.
Wenn es dem Beispiel aus dem Link oben liefe wäre das völlig ok - denke ich. Das läßt sich auf mein Problem übertragen und das Programm ist sehr kompakt. Aber, das Transformieren mit shape - wie soll das gehen?

for (Shape shape : drawing.getShapes()) {
                g2.draw(shape);
            }

Wenn ich es ändere (siehe nachfolgend), wird nicht in beiden Fenstern gemalt. Möglicherweise geht das nicht gut.

static class DrawingPanel2 extends JComponent {
        Point pointStart = null;
        Point pointEnd = null;
        private Drawing drawing;
        private Transform transform;
       // private DrawingListener listener = () -> repaint();
        private DrawingListener listener =
                new DrawingListener(){
                    public void modified()
                    {
                            repaint();
                    }
                    
                };
                public DrawingPanel2(Transform transform) {
                    addMouseListener(new MouseAdapter() {
                        public void mousePressed(MouseEvent e) {
                            pointStart = e.getPoint();
                        }

                        public void mouseReleased(MouseEvent e) {
                            pointStart = null;
                        }
                    });

                    addMouseMotionListener(new MouseMotionAdapter() {
                            public void mouseMoved(MouseEvent e) {
                                pointEnd = e.getPoint();
                            }

                            public void mouseDragged(MouseEvent e) {
                                pointEnd = e.getPoint();
                                // repaint();
                                listener.modified();
                            }
                    });
                }

public void paintComponent(Graphics g) {
            super.paintComponent(g);
            if (pointStart != null) {
                g.setColor(Color.BLUE);
                g.drawLine(pointStart.x, pointStart.y, pointEnd.x, pointEnd.y);  //hier geht transform
                
            }
          /**  if (drawing == null) {
                return;
            }

            Graphics2D g2 = (Graphics2D) g;
            for (Shape shape : drawing.getShapes()) {
                g2.draw(shape);
            }**/
        }

Also, geht sowas für das Beispiel oben?

 

[KonradN]

Da es bei dem bisherigen nur um eine Verschiebung geht, kann man dies z.B. auf basis der Graphics Objektes machen um ein neues Graphics Objekt mit create zu erzeugen.

 

[Gelöschtes Mitglied 72742]

create(int x, int y, int width, int height) Creates a new Graphics object based on this Graphics object, but with a new translation and clip area.

Ok, danke. Dann hilft mir vielleicht googlen. Ansonsten, kann ich Dich nochmals fragen wie das mit dem shape Beispiel gemacht wird? Oder hast Du ein einfaches Beispiel?

 

[KonradN]

Shape ist ein Interface, hinter dem viel stecken kann. Das macht es etwas komplizierter.

Aber man kann mit AffineTransform arbeiten. Das kann man beim Graphic Objekt setzen. Da solltest Du Dich dann aber mit der Mathematik dahinter auseinander setzen um das zu verstehen.

 

[Gelöschtes Mitglied 72742]

Oh nein - keine Affine Transformation. Was ich mache ist viel einfacher. Ich male Linien und diese sollen fürs erste verschoben werden können, in einem der Fenster - wobei Sie in beiden Fenstern gezeichnet werden (das ist nur damit ich sie nicht zweimal zeichnen muß - denn die Skala ist lange). In den Fenstern ist die Darstellung unterschiedlich.
Mein Problem ist nicht die Transformation, sondern die unabhängige Transformation in den beiden Fenstern - verschieben kann ich es ja. Schade, habe ich keine Lösung dazu und ich kann's ja auch technisch nicht wirklich. Vielleicht kann ich einen neuen Listener für die Verschiebung machen, der nur für jeweils ein Fenster eine Verschiebung macht.

 

[KonradN]

Sorry, Du willst in jedem Fenster unabhängig etwas Transformieren. Und das kannst Du mit Hilfe von AffineTransformation machen, welche du beim Graphics Objekt in der paint Methode anwenden kannst. Damit ist die Transformation bei beiden Fenstern unabhängig.

Und was willst Du mit dem Listener? Bei einer Entwicklung solltest Du diverse Dinge getrennt halten:
a) Du musst irgendwie die Daten speichern und damit arbeiten -> Du musst also Shapes speichern können und wie diese dargestellt werden sollen.
b) Du brauchst die Darstellung. Die Daten aus a willst Du dann irgendwie darstellen.
c) wäre dann der Benutzer-Input: Der Benutzer soll irgendwas machen können was dann das Model (a) verändert

 

[Gelöschtes Mitglied 72742]

Mit fixen Werten und AffineTransformation funktioniert es nun endlich. Nun brauche ich nur noch Punkt c). Vielen Dank für alle Beiträge.

class Transform {
        private int dx=30;
        private int dy=30;
        AffineTransform tx = new AffineTransform();
        
        public Transform() {   
        }
        
        public Transform(int dx, int dy) {
            this.dx = dx;
            this.dy = dy;
            
        }
        
        public Shape transformiere(Shape shape)
        {
            AffineTransform t = new AffineTransform();
            t.translate(dx, dy);
           // t.scale
            return  t.createTransformedShape(shape); 
         }
        
        public Point2D transform(Point2D point) {
            return new Point(
                (int)point.getX() + dx,
                (int)point.getY() + dy
            );
        }
    }