Über Bild zeichnen

[sunny01]

Hallo,

es gibt ein Bild (Image map) in meiner GUI, wenn ich mit der Maus in dieses Bild klicke, möchte ich, dass ein kleiner roter Punkt gezeichnet wird. Das habe ich so gelöst:

    private void mapMouseClicked(java.awt.event.MouseEvent evt) {
        int x = evt.getX();
        int y = evt.getY();

        Graphics g = map.getGraphics();
        g.setColor(Color.red);
        g.drawRoundRect(x, y, 3, 3, 3, 3);
        g.fillRoundRect(x, y, 3, 3, 3, 3);
    }

Jetzt hätte ich aber gerne, dass, wenn ich noch einmal mit der Maus in das Bild klicke, dieser rote Punkt wieder entfernt wird, und ein neuer gezeichnet wird.

Ich hatte mir gedacht, ich lege dazu einfach ein transparentes Bild über mein bereits vorhandenes, und "leere" das dann jeweils wieder.

Angefangen hätte ich hierfür so:

BufferedImage img = new BufferedImage(w, h, BufferedImage.TRANSLUCENT);
Graphics2D g = img.createGraphics();
g.drawImage(img, 0, 0, w, h, this);

Das klappt jedoch nicht, die roten Punkte werden dann gar nicht mehr gezeichnet.
Wie kann ich obenstehendes Problem denn am Besten lösen?

Liebe Grüße
sunny

 

[0din]

also ich würd dir vorschlagen die alten koords vom punkt zu speichern,
wenn die != null sind, kannste mit xor (ich mein zumindest, dasset so hieß) nochmal drüber zeichnen, gleiche stelle, gleiche farbe etc.
dann erst den neuen punkt zeichnen...

ich knall warscheinlich glei nochn edit drunter weil ich das nu ma nachschlagn werd ^^ aber damit kannste nu vllt erstma arbeitn

tada, de EDIT:
wenn ich mich nu no immer net vertuhe müssteste einfach g.setXORMode() aufrufen, den alten kreis nochmal zeichen und dann g.setPaintMode() aufrufen un den neuen kreis zeichnen... damit sollte dein alter kreis weg sein un der neue gezeichnet werden... spart am rande au resourcen weil kein komplett neues bild gezeichnet werden muss

 

[Der Müde Joe]

must grad auf ant warten:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.net.URL;
import java.util.LinkedList;
import java.util.List;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.WindowConstants;

public final class PaintPoint {

	private BufferedImage image;
	private JFrame frame;

	final List<Point> points = new LinkedList<Point>();

	public PaintPoint(BufferedImage image) {
		this.image = image;
		init();
	}

	private void init() {
		frame = new JFrame("Screenshot");
		frame.setSize(600, 450);
		final ImagePanel imagePanel = new ImagePanel();
		frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
		frame.getContentPane().add(imagePanel);

		frame.addMouseListener(new MouseAdapter() {

			@Override
			public void mouseClicked(MouseEvent e) {
				Point p = e.getPoint();
				Point found = null;
				for (Point point : points) {
					if (point.x == p.x && point.y == p.y) {
						found = point;
					}
				}
				if (found == null) {
					points.add(p);
					imagePanel.repaint(p.x - 1, p.y - 1, 3, 3);
				} else {
					points.remove(found);
					imagePanel.repaint(found.x - 1, found.y - 1, 3, 3);
				}
			}

		});
		frame.setVisible(true);
	}

	class ImagePanel extends JPanel {

		public ImagePanel() {
		}

		@Override
		public void paintComponent(Graphics g) {
			super.paintComponent(g);
			g.drawImage(image, 0, 0, null);
			g.setColor(Color.YELLOW);
			for (Point p : points) {
				g.drawOval(p.x, p.y, 1, 1);
			}
		}
	}

	public static void main(String[] args) throws Exception {
		File file = new File("1.gif");
		System.out.println(file.getAbsolutePath());
		BufferedImage testImage = ImageIO.read(file);
		new PaintPoint(testImage);
	}
}

 

[sunny01]

Danke für eure Antworten.

Leider komme ich aber mit beiden Ansätzen nicht wirklich klar.

Mit dem setXORMode() wird mir der Kreis ja auch noch einmal gezeichnet ... und nicht wieder gelöscht. Also wenn man am gleichen Bild bleibt, dann müsste man wahrscheinlich irgendeine Art undo()-Funktion haben, um das Zeichnen vom "alten" Kreis wieder rückgängig machen zu können. Weil ja ansonsten die Pixelinformation vom darunterliegenden Bild schon überschrieben wurde. Wenn ich den Kreis transparent setze, nimmt er die Hintergrundfarbe der GUI an, statt der Farben die an der Stelle im Bild waren.

Den zweiten Code habe ich mir kopiert und ausprobiert, allerdings werden die Punkte im Bild bei mir nicht gelöscht ... sondern es passiert dasselbe wie mit meinem Ursprungscode: Die Pixel werden eingefärbt, und bei erneutem Klick werden neue Pixel eingefärbt.

Was ich suche, ist eine Möglichkeit, die beim ersten Klick eingefärbten Pixel wieder zu "löschen". Also sodass das Bild wieder wie ursprünglich aussieht. Und dann die Pixel an der neu angeklickten Stelle zu färben.

Darum habe ich an ein zweites transparentes Bild zum Darüberlegen gedacht.
Aber das bekomme ich leider ebenfalls nicht hin.

Liebe Grüße
sunny

 

[Der Müde Joe]

hast wohl eine etwas zittrige Hand. ;-)
drum mal ein wenig grösser:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.net.URL;
import java.util.LinkedList;
import java.util.List;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.WindowConstants;

public final class PaintPoint {

	private BufferedImage image;
	private JFrame frame;
	
	static final int POINT_SIZE = 10;

	final List<Point> points = new LinkedList<Point>();

	public PaintPoint(BufferedImage image) {
		this.image = image;
		init();
	}

	private void init() {
		frame = new JFrame("Screenshot");
		frame.setSize(600, 450);
		final ImagePanel imagePanel = new ImagePanel();
		frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
		frame.getContentPane().add(imagePanel);

		frame.addMouseListener(new MouseAdapter() {

			@Override
			public void mouseClicked(MouseEvent e) {
				Point p = e.getPoint();
				Point found = null;
				for (Point point : points) {
					if ( (Math.abs(point.x - p.x) < POINT_SIZE ) && 
							(Math.abs(point.y- p.y) < POINT_SIZE)  ) {
						found = point;
					}
				}
				if (found == null) {
					points.add(p);
					imagePanel.repaint(p.x -POINT_SIZE, p.y - POINT_SIZE,2* POINT_SIZE, 2* POINT_SIZE);
				} else {
					points.remove(found);
					imagePanel.repaint(found.x - POINT_SIZE, found.y - POINT_SIZE, 2* POINT_SIZE, 2* POINT_SIZE);
				}
			}

		});
		frame.setVisible(true);
	}

	class ImagePanel extends JPanel {

		public ImagePanel() {
		}

		@Override
		public void paintComponent(Graphics g) {
			super.paintComponent(g);
			g.drawImage(image, 0, 0, null);
			g.setColor(Color.YELLOW);
			for (Point p : points) {
				g.fillOval(p.x, p.y, POINT_SIZE, POINT_SIZE);
			}
		}
	}

	public static void main(String[] args) throws Exception {
		File file = new File("1.gif");
		System.out.println(file.getAbsolutePath());
		BufferedImage testImage = ImageIO.read(file);
		new PaintPoint(testImage);
	}
}

 

[sunny01]

Hallo müder Joe,

hast wohl eine etwas zittrige Hand. ;-)

eigentlich nicht ... dafür keine Ahnung von Java.

Also auf jeden Fall produziert mir der Code auf meinem Bild immer noch so viele Punkte wie ich Mausklicks mache. Ich hätte gerne immer nur einen Punkt im Bild. Immer an der Stelle, wo ich aktuell hingeklickt habe.

Kann es an meiner Java-Version liegen, dass das nicht funktioniert?
Java(TM) SE Runtime Environment version 1.6.0_20-b0216.3-b01

Bei mir bleiben da immer alle gezeichneten Punkte bestehen ???:L

Danke aber auf jeden Fall für die Mühe.

EDIT: Ach jetzt verstehe ich! Jetzt habe ich den Code auch mal gelesen ... Da wird der Punkt ja nur "gelöscht" wenn man wieder an dieselbe Stelle klickt ...
Ich will ja, dass der "vorangegangene" Punkt immer gelöscht wird! Egal wo ich hinklicke - alten löschen - neuen zeichnen.
Werde mir den Code mal genauer ansehen, vielleicht kann ich das ummodeln.

EDIT2: Mhh, so "kompliziert" brauche ich das ja gar nicht ... mit Liste usw.
Müsste mir nicht eigentlich repaint alleine schon weiterhelfen? Blöd ist nur, dass ich kein Image über mein Image bekomme ...

Liebe Grüße
sunny

 

[Der Müde Joe]

Kann ich mir grad nicht vorstellen??

Nun gut. Die ein Punkt holzhacker Variante mit repaint alles:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.File;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.WindowConstants;

public final class PaintPoint {

	private BufferedImage image;
	private JFrame frame;

	static final int POINT_SIZE = 10;

	Point point = null;

	public PaintPoint(BufferedImage image) {
		this.image = image;
		init();
	}

	private void init() {
		frame = new JFrame("Screenshot");
		frame.setSize(600, 450);
		final ImagePanel imagePanel = new ImagePanel();
		frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
		frame.getContentPane().add(imagePanel);

		frame.addMouseListener(new MouseAdapter() {

			@Override
			public void mouseClicked(MouseEvent e) {
				point = e.getPoint();
				imagePanel.repaint();
			}

		});
		frame.setVisible(true);
	}

	class ImagePanel extends JPanel {

		public ImagePanel() {
		}

		@Override
		public void paintComponent(Graphics g) {
			super.paintComponent(g);
			g.drawImage(image, 0, 0, null);
			g.setColor(Color.YELLOW);
			if (point != null) {
				g.fillOval(point.x, point.y, POINT_SIZE, POINT_SIZE);
			}
		}
	}

	public static void main(String[] args) throws Exception {
		File file = new File("1.gif");
		System.out.println(file.getAbsolutePath());
		BufferedImage testImage = ImageIO.read(file);
		new PaintPoint(testImage);
	}
}

EDIT:
ok. war wohl ein missverständis..

>Egal wo ich hinklicke - alten löschen - neuen zeichnen.

siehe code oben, der macht genau das..

 

[sunny01]

Jetzt haben wir uns überschnitten mit dem Antworten!

ImagePanel habe ich bei mir ja keines ... ich wollte eigentlich nur über mein Image (ist eingebunden über ein JLabel mit ImageIcon) ein zweites Image legen, bzw. ein BufferedImage ... und dann eben irgendwie mit einer Art repaint oder delete oder was es eben geben könnte ...

Vielleicht sollte ich mal versuchen, ein ImagePanel anzulegen, denn mit dem BufferedImage habe ich es nicht hinbekommen.

Dein Code ist glaube ich zu umständlich für meinen Zweck, ich brauche ja die "alten" Punkte gar nicht verspeichern, die können gleich wieder verworfen werden, wenn man noch einmal klickt. Danke aber trotzdem auf jeden Fall dafür. Werde mir das mit dem ImagePanel mal genauer ansehen.

Lg
sunny

 

[Der Müde Joe]

>ist eingebunden über ein JLabel mit ImageIcon

Auch ein JLabel ist eine JComponent in die man zeichnen kann ;-)
(wobei das JPanel wohl besser dafür geeignet ist)

>ein zweites Image legen

Wieso so kompliziert. Der EDT ruft immer wenn es nötig ist auf den Komponenten paintComponent auf (auch bei repaint). Darin kann man dann schön malen. (Und nur Malen!!)

>ich brauche ja die "alten" Punkte gar nicht verspeichern

eben der letzte Code genau.. immer neuen Punkt nehmen und neu zeichenen

EDIT:
links:
http://www.java-forum.org/awt-swing-swt/43939-zeichnen-swing-tutorial.html
malen:
Trail: 2D Graphics (The Java™ Tutorials)
Swing:
Trail: Creating a GUI With JFC/Swing (The Java™ Tutorials)

 

[sunny01]

Ist es denn auch möglich, das zu realisieren, ohne dass ich dafür eine extra Klasse baue?

Ich hätte mir jetzt mit Deinen Hinweisen gedacht, dass es doch funktionieren müsste, einfach ein repaint() auf das JLabel zu machen, bevor ich den neuen Punkt einzeichne. Jedoch wird dann der neue Punkt auch weggelöscht, obwohl dieser erst gezeichnet wird, nachdem repaint() augerufen wurde.

Gibt es dafür eine einfache Lösung?

 

[sunny01]

Also jetzt funktioniert es zumindest ... ob das so in Ordnung ist, bin ich mir aber nicht ganz sicher:

    private void mapMouseClicked(java.awt.event.MouseEvent evt) {
        int x = evt.getX();
        int y = evt.getY();
        Graphics g = map.getGraphics();
        paintPoint(g, x, y);
    }

    private void paintPoint(Graphics g, int x, int y) {
        g.drawImage(mapImg, 0, 0, null);
        g.setColor(Color.red);
        g.drawRoundRect(x, y, 3, 3, 3, 3);
        g.fillRoundRect(x, y, 3, 3, 3, 3);
    }

Lg
sunny

 

[0din]

die feine art isses nich... also auf dauer dürfte das ziemlich in die leistung gehn... wenns schnell gehn soll wirds das auf dauer sicher au net machn... aber als notlösung ok

 

[sunny01]

Also gegen Verbesserungsvorschläge hab ich nichts einzuwenden ... ich möchte nur nicht für diese Kleinigkeit unbedingt noch eine eigene Klasse dazubauen, wenn es nicht absolut erforderlich ist.

Sonderlich performant muss es nicht sein, normalerweise klickt der User nur einmal um so einen Punkt zu wählen. Aber falls er eben ein zweites Mal klickt, dann muss der erste Punkt weg.

Liebe Grüße
sunny

 

[Der Müde Joe]

Deine Lösung hat ein paar Probleme:

1. getGraphcis --> NIE aufrufen. (siehe oben link 1)
2. du zeichnest den Punkt einfach mal ins Graphics rein. (eben über getGraphics)

Daraus ergibt sich, dass sobald der EDT meint, er müsse repainten, dein Punkt verschwindet. Wieso? Nun, der EDT ruft beim reapint immer die paintComponent-Methode der Componenten auf, übergibt der das aktuelle Graphics-Objekt in die Methode und malt mal. Dein Punkt wird darin aber nicht gezeichnet, drum verschwindet er. Kann man testen, wenn man das Fenster mal in die Leiste verschwinden lässt und wieder hervorholt).

>ich möchte nur nicht für diese Kleinigkeit unbedingt noch eine eigene Klasse dazubauen, wenn es nicht absolut erforderlich ist.

Für eine einigemassen gut funktionierende Lösung, wird das wohl sein müssen. Ohne die paintComponent nach deinen wünschen zu überschreiben, wirds wohl kaum sauber gehen.

 

[Marco13]

1. getGraphcis --> NIE aufrufen. (siehe oben link 1)
2. du zeichnest den Punkt einfach mal ins Graphics rein. (eben über getGraphics)

Das "map" ist in diesem Fall ein BufferedImage, dort ist das OK. (Ob es eine "schöne" Lösung ist, habe ich jetzt aber nicht genau nachvollzogen...)

Trotzdem sollte man auch bei einem BufferedImage eher sowas machen wie

Graphics g = map.createGraphics();
g.draw...
g.dispose();

 

[sunny01]

Hmm, danke für eure Antworten.
Also "map" ist eigentlich ein JLabel und map.createGraphics() funktioniert nicht.
Ich weiß jetzt auch nicht genau, wie ich das lösen soll, oder ob ich das Ganze einfach so belassen soll ...

Ich werde mir wohl die Klasse von Joe nochmal ansehen.

Liebe Grüße
sunny

 

[Marco13]

OK, dann hatte ich den Einstigessatz
es gibt ein Bild (Image map)
falsch verstanden. Auf einem JLabel ist getGraphics in der Tat "böse". Sag' ggf. nochmal bescheid, wenn's nicht klappt.

 

[erazor2106]

hey,

bin neu hier und habe ein sehr ähnliches Problem wie das beschriebene hier.
Undzwar möchte ich auch auf ein Bild zeichnen, nur möchte ich dass wenn man in das Bild klickt ein Punkt erzeugt wird und wenn ich an eine andere Stelle klicke soll dort auch ein Punkt entstehen plus eine Verbindungslinie zwischen den beiden Punkten.

ist es auch möglich diese Punkte und Linien als Objekte ansprechen zu können, d.h. dass ich Ihnen Werte und Namen zuordnen kann auf die ich später zugreifen kann? Das Ziel soll sein Entscheidungsbäume bzw. Graphen zeichnen zu können.
Ich hoffe ihr könnt mir da weiterhelfen.

VIele Grüße erazor

 

[Marco13]

Hm. Für Graphen und Bäume wäre händisches rum-gemale auf einem Bild wohl zu low-level. Da sollte man eher eine Graphen-Zeichen-Bibliothek verwenden...Java, AJAX and Flash Graph Visualization and Layout oder JUNG - Java Universal Network/Graph Framework oder so...

 

[erazor2106]

Hab mir vorhin mal prefuse angeschaut. die möglichkeiten die man damit hat sind wirklich riesig, aber glaube ich zu komplex um mich da für die eine sache einzuarbeiten.
kennt sich jemand damit aus oder mit den anderen genannten varianten um das problem zu lösen?

 

[Marco13]

Kann sein dass das hier nicht mehr so viele mitkreigen... vielleicht mal einen eigenen Thread dafür aufmachen (ist aber nur geraten, vielleicht hat auch einfach keiner eine Idee...)

 

[erazor2106]

ich sag nur, 2 Dumme ein Gedanke
hatte gerade die gleiche Idee.
dank dir trotzdem