Swing Paint mit Canvas Element

[Fireball]

Hallo Zusammen,

ich hab ein kleines Problem.

Ich hab in einem Panel ein Canvas dort lasse ich ein Bild zeichen. In dem gezeichneten Bild möchte ich mit Hilfe der Maus jetzt zeichnen können.

Mein Problem im moment ist, das ich zwar den gezeichnet Strich/Linie sehe, jedoch sobald ich weiterzeichnen will verschwindet das bereits gezeichnete.

Hab jemand von euch ein Beispiel wie gehts das geht?

Danke

 

[Tomate_Salat]

hmm klingt für mich nach falscher [c]paintComponent();[/c]

Theorie:
das zeichnen mit der Maus auf einem BufferedImage, welches von der [c]paintComponent()[/c]Methode nicht neu initalisiert wird. Beim [c]paintComponent();[/c] das BufferedImage über das Canvas legen und die Mausstriche auf dem BufferedImage speichern.

Habe noch nicht soetwas geschrieben, also das obenstehende ungetestet...vllt postest du einfach mal Quellcode, damit wir sehen können, wie du bis jz das ganze gelöst hast.

 

[Fireball]

hier mal die Source der UI (das ganze spielt im ULC)

public class UIPicturePane extends UIGridBagLayoutPane {

	protected Runtime getBasicRuntime() {
		return (Runtime) getBasicObject();
	}

	byte[] pic;

	protected Object createBasicObject(Object[] args) {

		return new PicturePanel();

	}

	public void setBild(byte[] b) {
		this.pic = b;
	}

	private class PicturePanel extends JPanel implements MouseListener,
			MouseMotionListener {

		boolean reset = true;
		
		private int startX, startY, tempX, tempY;

		private Graphics2D g2;

		private Image img = null;
		
		BufferedImage bufferedImage = null;

		public PicturePanel() {
			super();
			this.addMouseListener(this);
			this.addMouseMotionListener(this);
		}

		private byte[] getPic() {
			return pic;
		}

		public void paint(Graphics g) {
			super.paint(g);
			
			img = createImage();
			g.drawImage(img, 20, 20, this);
			// Begrenzung des Zeichenbereichs
//			g.clipRect(20, 20, bufferedImage.getWidth(), bufferedImage.getHeight());

			g2 = (Graphics2D) g;
 			g.setPaintMode();
			g.drawLine(startX, startY, tempX, tempY);
			startX = tempX;
			startY = tempY;
		}
		
//		public void update(Graphics g)
//		{
//		   paint(g);
//		}
		
		private Image createImage() {
			bufferedImage = new BufferedImage(800, 600,
					BufferedImage.TYPE_INT_RGB);
			Image img = Toolkit.getDefaultToolkit().createImage(getPic());
			Canvas ca = new Canvas();
			controllLoadImage(ca, img);
			bufferedImage.createGraphics().drawImage(img, 0, 0, null);

			return bufferedImage;
		}

		private void controllLoadImage(Canvas a, Image img) {

			MediaTracker mt = new MediaTracker(a);
			mt.addImage(img, 0);
			try {
				mt.waitForID(0);
			} catch (InterruptedException ie) {
				System.err.println("interrupt: " + ie.getMessage());
			}
		}

		public void mouseClicked(MouseEvent e) {
			// TODO Auto-generated method stub

		}

		public void mouseEntered(MouseEvent e) {
			// TODO Auto-generated method stub

		}

		public void mouseExited(MouseEvent e) {
			// TODO Auto-generated method stub

		}

		public void mousePressed(MouseEvent e) {
			startX = e.getX();
			startY = e.getY();

		}

		public void mouseReleased(MouseEvent e) {
			// TODO Auto-generated method stub

		}

		public void mouseDragged(MouseEvent e) {
	        tempX = e.getX();
	        tempY = e.getY();
	        repaint(); 
			
		}

		public void mouseMoved(MouseEvent e) {

		}

	}

in der Paint Methode lasse ich ein Bild zeichnen (das funktioniert soweit), paar Zeilen drunter will ich dann mit drawLine mit Hilfe der Maus zeichnen können.

Wie im Code zu sehen hat das JPanel den MouseListener, eventuell wäre es geschickter den Listener an den Canvas zu geben?!?

 

[Tomate_Salat]

man überschreibt [c]paintComponent();[/c] normalerweise und nicht [c]paint();[/c] und auch nicht [c]update();[/c]. Iwo im FAQ liegt eine Anleitung zum Zeichnen in Swing, allerdings finde ich die gerade nicht.

 

[Fireball]

wenn ich paintComponent() überschreibe, dann wird das Bild garnicht gezeichnet, deswegen bin ich auf paint gegangen.

Update() war nur ein Test meinerseits.

 

[L-ectron-X]

Wenn man mehrere Objekte ohne Löschen zeichnen möchte, kann man die in einer Liste sammeln und beim Zeichnen dann die Liste durchlaufen.

 

[Tomate_Salat]

[...]das zeichnen mit der Maus auf einem BufferedImage[...]

Speichere doch einfach das geladene Bild als BufferedImage ab. Dann gehst du in deine [c]paintComponent();[/c] und führst deine Aktionen nach [c]super.paintComponent(g);[/c] aus. Zuerst lädst du das Bild und danach das BufferedImage, in dem deine Mauslinien sind. Die legst du dann einfach übereinander. Solange du du die BufferedImages nicht in der [c]paintComponent()[/c] neu initalisierst, sollte da kein Problem mehr bei liegen

Update() war nur ein Test meinerseits.

hab ich mir fast gedacht, da es auch auskommentiert wurde, aber ich wollte vorsichtshalbe nochmal darauf hinweisen ;-)

 

[Fireball]

Habs jetzt hinbekommen, kann das Bild im Canvas laden und drüberzeichen.

Jetzt hab ich allerdings ein neues Problem. Das überarbeitete Bild möchte ich in ein BufferedImage speichern und das wiederum in ein byte[].

Ich hab jetzt schon einiges versucht, ich krieg entweder ein komplett schwarzes Bild zurück oder garnicht. Das überarbeitet Original sehe ich nicht...

Wie kann ich mir das Bild aus dem Canvas in ein BufferedImage speichern?? Hab im Netz bereits das eine oder andere Beispiel gefunden, hat aber auch nicht funktioniert.

 

[Tomate_Salat]

Ohne Quellcode können wir dir hier nicht sagen, wo dein Fehler liegt ;-)

 

[Fireball]

		public byte[] getPictureNow() {
	
	        int w = imgCanvas.getWidth();
	        int h = imgCanvas.getHeight();
	        int type = BufferedImage.TYPE_INT_RGB;

 	        Image image = imgCanvas.createImage(w, h);
	        
	        BufferedImage bi  = new BufferedImage(w, h, type);
	
	        bi.getGraphics().drawImage(image, 0, 0, this);
	        
	        ByteArrayOutputStream os = new ByteArrayOutputStream();

	        JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);

	        try {
				encoder.encode(bi);
			} catch (ImageFormatException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}

	        return os.toByteArray(); 

  
		}

Das ist der Code den ich im mom dazu verwende. Jedoch ohne Erfolg..

Das ist meine Canvas Klasse die das Zeichen des Hauptbildes und dann noch der Linien über das MouseEvent übernimmt.

public class ImageCanvas extends Canvas implements MouseListener,
		MouseMotionListener {

	private Image image;

	private MediaTracker media = null;

	private int startX, startY, tempX, tempY;

	private Graphics2D g2;

	boolean zeichnen = false;

	public ImageCanvas(byte[] picture) {
		addMouseListener(this);
		addMouseMotionListener(this);
		setSize(800, 600);

		controllLoadImage(picture);
	}

	public ImageCanvas(ImageProducer imageProducer) {
		image = createImage(imageProducer);
	}

	private void controllLoadImage(byte[] picture) {
		media = new MediaTracker(this);
		image = Toolkit.getDefaultToolkit().createImage(picture);
		media.addImage(image, 0);
		try {
			media.waitForID(0);
		} catch (Exception e) {
		}	}

//	 public void updatePicture(byte[] picture, boolean flag) {
//		 controllLoadImage(picture, true);
//		 repaint();
//	 }

	public void paint(Graphics g) {
		if (zeichnen == false) {
			g.drawImage(image, 0, 0, this);
		}
		else if (zeichnen == true) {
			g2 = (Graphics2D) g;
			Stroke stroke = new BasicStroke(8.0f);
			g2.setStroke(stroke);
			g2.setPaintMode();
			g2.drawLine(startX, startY, tempX, tempY);
			startX = tempX;
			startY = tempY;
		}
	}

	public void update(Graphics g) {
   		paint(g);
	}

	public void mouseClicked(MouseEvent e) {

	}

	public void mouseEntered(MouseEvent e) {
		// TODO Auto-generated method stub

	}

	public void mouseExited(MouseEvent e) {
		// TODO Auto-generated method stub

	}

	public void mousePressed(MouseEvent e) {
		startX = e.getX();
		startY = e.getY();
		zeichnen = true;

	}

	public void mouseReleased(MouseEvent e) {
		// TODO Auto-generated method stub

	}

	public void mouseDragged(MouseEvent e) {
		tempX = e.getX();
		tempY = e.getY();
		repaint();

	}

	public void mouseMoved(MouseEvent e) {
		// TODO Auto-generated method stub

	}
}

Kann es sein das die paint() Methode da etwas verbockt?

 

[Tomate_Salat]

man überschreibt NICHT die [c]paint()[/c]-Methode! Ich habe doch mind. 2x geschrieben: überschreibe die [c]paintComponents(Grapics);[/c]-Methode!

Hier mal ein Code-Beispiel was bei mir Funktioniert:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class ImageTest 
{
    private BufferedImage image;
    
    public JFrame frame;
    public JPanel drawOnMe;
    
    public ImageTest() 
    {
        frame   = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new BorderLayout());        
        
        image   = new BufferedImage(300, 300, BufferedImage.TYPE_INT_RGB);
        
        Graphics g = image.getGraphics().create();
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, 300, 300);
        g.setColor(Color.black);
        g.drawString("hallo", 10, 20);
        g.setColor(Color.blue);
        g.fillOval(100, 100, 50, 50);
        g.dispose();
        
        drawOnMe    = new JPanel()
        {
            @Override
            protected void paintComponent(Graphics g) 
            {
                super.paintComponent(g);
                g.drawImage(image, 0, 0, null);
            }
        };
     
        JButton button  = new JButton("speichern");
        button.addActionListener(new ActionListener()
        {
            @Override
            public void actionPerformed(ActionEvent e) 
            {
                ByteArrayOutputStream baos  = new ByteArrayOutputStream();
                JPEGImageEncoder enc        = JPEGCodec.createJPEGEncoder(baos);
                
                try {
                    enc.encode( image );
                    
                    FileOutputStream out        = new FileOutputStream("out.jpeg");
                    out.write( baos.toByteArray() );
                    
                    out.close();
                    baos.close();
                } catch (ImageFormatException e1) {
                    e1.printStackTrace();
                } catch (IOException e1) {
                    e1.printStackTrace();
                }                     
            }
        });
        
        drawOnMe.setPreferredSize(new Dimension(300, 300));
        
        frame.add(drawOnMe);
        frame.add(button, BorderLayout.SOUTH);
    }
    
    public void start()
    {
        frame.pack();
        frame.setVisible(true);
    }
    
    public static void main(String[] args) 
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            @Override
            public void run() 
            {
                new ImageTest().start();
            }
        });
    }
}

Edit: Wieso nimmst du meine Sachen nicht an?! Ich habe dir von Anfang an gesagt: Lass die [c]update()[/c] und die [c]paint();[/c] Methoden in Ruhe, wenn du nach oben scrollst, wird dir auffallen, wie oft ich auf die [c]paintComponent()[/c]-Methode verwiesen habe, ich habe Sie JEDES mal ausdrücklich hervorgehoben, wieso steht in deinem Code nachwievor eine überschriebene [c]paint()[/c]?! Wieso hast du die [c]update()[/c] wieder im Code überschrieben?!

 

[Fireball]

Weil die Canvas kein paintComponent hat nur eine Paint (das ist kein JPanel).

Ich hab meine Mouselistener uns alles in der Canvas Klasse und nicht mehr im Panel. Deswegen hab ich auch die Paint überschrieben. Die Update muss ich ebanfalls überschreiben da ich sonst den gezeichneten Strich nicht sehe.

Mein Problem ist ja auch im moment nicht mehr das Zeichen auf dem geladenen Bild. Das funktioniert prima. Jedoch wenn ich das gezeichnete wieder in ein byte[] um es dann vom Client an den Server zurückzugeben und es später zu speichern kriege ich zwar ein gefülltest byte[]. Wenn ich das dann zeichen will sehe ich nicht das geändert bild....

 

[Tomate_Salat]

Weil die Canvas kein paintComponent hat nur eine Paint (das ist kein JPanel).

Ich hab meine Mouselistener uns alles in der Canvas Klasse und nicht mehr im Panel. Deswegen hab ich auch die Paint überschrieben. Die Update muss ich ebanfalls überschreiben da ich sonst den gezeichneten Strich nicht sehe.

Meines wissens nach sollte man in Swing JPanel anstatt Canvas nehmen, warum: Warum AWT und Swing nicht mischen

Mein Problem ist ja auch im moment nicht mehr das Zeichen auf dem geladenen Bild. Das funktioniert prima. Jedoch wenn ich das gezeichnete wieder in ein byte[] um es dann vom Client an den Server zurückzugeben und es später zu speichern kriege ich zwar ein gefülltest byte[]. Wenn ich das dann zeichen will sehe ich nicht das geändert bild....[/QUOTE]

Dann versuch doch mal den Speichervorgang, wie ich ihn gemacht habe:

FileOutputStream out        = new FileOutputStream("out.jpeg");
out.write( baos.toByteArray() );
                    
out.close();
baos.close()

wie gesagt: das funktioniert bei mir einwandfrei

 

[Fireball]

Ich hab das jetzt mal auch mit dem FileOutputStream versucht. Es funktioniert sogar alles richtig (naja fast).

Wenn ich die paint() nicht überschreibe und der Canvas z.b. eine Gelbe Hintergrundfarbe gebe. Erhalte ich im File dieses gelbe Bild zurück und im Byte[] ist auch das gelbe Bild drin.

Wenn ich jetzt ein Bild in die Canvas lade (paint überschreibe) und dort was zeichne und es dann wieder auslese, erhalte ich den gelben Hintergrund aber nicht das zuvor geladene Bild mit seinen Änderungen!

D.h. in dem out-file ist alles Geld und wenn ich das byte[] zeichen lasse ist dort auch alles geld.

Was läuft aber dann falsch dort?!?

 

[Tomate_Salat]

ich nehme an, der hintergrund kommt mit [c]setBackground[/c] o.ä. zu stande, da du aber die [c]paint()[/c] komplett überschreibst, geht diese Aktion verloren. Versuche es mal mit:

(ungetestet)

public void paint(Graphics g) {
        super.paint(g);
       	g2 = (Graphics2D) g.create();
		if (zeichnen == false) {
			g2.drawImage(image, 0, 0, this);
		}
		else if (zeichnen == true) {
                        g2.setColor(Color.black);
			Stroke stroke = new BasicStroke(8.0f);
			g2.setStroke(stroke);
			g2.setPaintMode();
			g2.drawLine(startX, startY, tempX, tempY);
			startX = tempX;
			startY = tempY;                       
		}
        g2.dispose();
 	}

Edit nö das löst glaub ich nicht dein problem, du willst ja den Hintergrund auch im Bild haben, ich glaube damit könnte es gehen:

public void paint(Graphics g) {
       	g2 = (Graphics2D) g.create();
        g2.setColor(canvas.getBackground()); 
        g2.fillRect(0, 0, image.getWidth(), image.getHeight());
		if (zeichnen == false) {
			g2.drawImage(image, 0, 0, this);
		}
		else if (zeichnen == true) {
			Stroke stroke = new BasicStroke(8.0f);
			g2.setStroke(stroke);
			g2.setPaintMode();
			g2.drawLine(startX, startY, tempX, tempY);
			startX = tempX;
			startY = tempY;                       
		}
        g2.dispose();
 	}

 

[Fireball]

Die Hintergrundfarbe brauch ich nicht, das Bild das ich dort lade hat die volle Größe somit sieht man die Background Farbe eh nicht.

Das mit der Background Farbe war ein test für mich, da ich vorher immer ein graues Bild zurück bekommen habe (default Background Farbe), ich hab daraufhin den Background in Gelb geändert und hab das dann zurück bekommen. Jetzt wusste ich wenigstens was ich da zurückbekomme

Das Byte[] das ich der Canvas Klasse übergeben ist das Bild. In der Methode controllLoadImage(byte[] picture) wird aus dem Array ein Image, das dann gleich in der paint() gezeichnet wird. Um das nur 1malig zu zeichnen hab ich die boolische variable zeichnen angelegt. Sobald die Maustaste 1mal geklickt wird wird diese dann auf true gesetzt und dadurch kann ich die linie zeichen. die update musste ich ebenfalls überschreiben damit der Strich konstant gezeichnet wird.

Die beiden neuen paint-Methoden lösen das Problem leider immer noch nicht. Mir ist unklar wie ich die ganzen neuen Änderung wieder aus der Canvas kriege. createImage der Canvas klasse scheint da nicht die richtige wahl zu sein. Oder ich muss vorher noch was in der Canvas machen...
hab aber bis jetzt nicht gefunden was mir helfen würde.

 

[Quaxli]

Kurzer Einwurf: Canvas = AWT = paint überschreiben! (paintComponent nur bei Swing!)

 

[Tomate_Salat]

Kurzer Einwurf: Canvas = AWT = paint überschreiben! (paintComponent nur bei Swing!)

Jo schon klar, hatte seinen (glaub ersten) heutigen Post überflogen gehabt und hatte nicht gesehen dasses sich um Canvas handelt und war deshalb der Meinung es wäre ein JPanel (gewohnheit halt ;( ). Da ich nie mit Canvas bisher was zu tun hatte (aber halt mit Zeichnen) habe ich das wohl iwie nit richtig wahr genommen/vergessen dass in Swing garkein Canvas vorhanden ist.

Habe ja auch mitlerweile aufgehört darüber zu meckern .


@FireBall: Mir ist dein Problem grade nicht wirklich klar: Will er die Linien nicht Zeichnen?

 

[Fireball]

Also ich kann alles zeichnen in das Canvas, das übergebene Bild wird geladen und ich kann dann mit der Maus drüber zeichnen.

Wenn ich jetzt aber die Änderung wieder speichern will (das aktuelle gezeichnete) krieg ich nur den leeren Hintergrund zurück (also das leere Canvas -> wenn beim Canvas z.b. die Hintergrundfarbe Geld ist dann krieg ich ein Gelbes Bild zurück). Aber ich kriege eben nicht das vorher gelade Bild zurück!!

Ich hab das jetzt mal versucht das ganze wieder komplett über das JLabel abzuwickeln (also ohne ein Canvas zu laden). Das übergebene Bild setze ich dann mit setIcon ins Label.
Leider schaff ich es nicht jetzt dort zu zeichnen. Ich sehe zwar den ersten Punkt der Linie, wenn ich dann aber die Mouse bewege sehe ich keinen Strich. Hier mal der Code soweit:

import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Stroke;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;

import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class IconLabel extends JLabel implements MouseListener,	MouseMotionListener {

	static IconLabel lbl = null;

	static Image img;
	
	private int startX, startY, tempX, tempY;

	private Graphics2D g2;

	boolean zeichnen = false;
	

	public IconLabel() {
		super();
		init();
	}

	public void init() {
		setSize(400, 300);
		setBackground(Color.yellow);
		img = Toolkit.getDefaultToolkit().createImage("maus.jpg");
		setIcon(new ImageIcon(img));
		addMouseListener(this);
		addMouseMotionListener(this);

	}

	public static void main(String[] args) {
		JFrame frame = new JFrame();
		frame.setSize(800, 600);
		frame.setTitle("Zeichnen");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setLayout(new BorderLayout());
		lbl = new IconLabel();
		frame.add(lbl, BorderLayout.LINE_START);

		JButton btn = new JButton("Pic");
		btn.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent arg0) {

				ImageIcon ii = (ImageIcon) lbl.getIcon();
				Image image = ii.getImage();

				// Neues Image erzeugen
				BufferedImage bi = new BufferedImage(400, 300,
						BufferedImage.TYPE_INT_RGB);

				// Image auf BufferedImage zeichnen
				bi.getGraphics().drawImage(image, 0, 0, null);

				ByteArrayOutputStream baos = new ByteArrayOutputStream();
				JPEGImageEncoder enc = JPEGCodec.createJPEGEncoder(baos);

				try {
					enc.encode(bi);

					FileOutputStream out = new FileOutputStream("out.jpeg");
					out.write(baos.toByteArray());

					out.close();
					baos.close();
				} catch (ImageFormatException e1) {
					e1.printStackTrace();
				} catch (IOException e1) {
					e1.printStackTrace();
				}

			}
		});
		frame.add(btn, BorderLayout.LINE_END);

		frame.setVisible(true);
	}

	public void paintComponent(Graphics g) {
    	super.paintComponent(g);
       	g2 = (Graphics2D) g;
        Stroke stroke = new BasicStroke(8.0f);
        g2.setStroke(stroke);
        g2.setPaintMode();
        g2.drawLine(startX, startY, tempX, tempY);
        startX = tempX;
        startY = tempY;                       
	}


	@Override
	public void mouseClicked(MouseEvent arg0) {
		// TODO Auto-generated method stub

	}

	@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) {
		startX = arg0.getX();
		startY = arg0.getY();

	}

	@Override
	public void mouseReleased(MouseEvent arg0) {
		// TODO Auto-generated method stub

	}

	@Override
	public void mouseDragged(MouseEvent arg0) {
        tempX = arg0.getX();
        tempY = arg0.getY();
        repaint(); 
	}

	@Override
	public void mouseMoved(MouseEvent arg0) {

	}

}

Was fehlt mir jetzt noch damit ich den Strich wirklich sehe? und was brauch ich dann noch um nach der Änderung das Bild wieder rauszuholen (also das geänderte Icon) dann wieder zu speichern?

 

[Fireball]

Mir kommt es vor als könnte man auf ein JLabel garnicht zeichnen nur auf einem JPanel...

aber einem JPanel kann ich keine Mouselistener hinzufügen... Bin grad verwirrt..

 

[Tomate_Salat]

public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g2 = (Graphics2D) g;
        Stroke stroke = new BasicStroke(8.0f);
        g2.setStroke(stroke);
        g2.setPaintMode();
        g2.drawLine(startX, startY, tempX, tempY);
        startX = tempX;
        startY = tempY;                       
    }

Damit setzt du nur einen Punkt, du musst aber in das BufferedImage reinschreiben, sonst werden die Daten nicht gespeichert

Edit würde das ganze generell über ein JComponent machen, bei dem JLabel musst du daran denken, auch das Bild im Icon immer zu ersetzen.

 

[Fireball]

Hab jetzt ein funktionierendes JPanel das sowas alles zeichnet.

public class PicturePanel extends JPanel implements MouseListener, MouseMotionListener{
	
	private Image image;
	
	Graphics2D g2;
	
	boolean zeichnen = false;
	boolean repaint = false;
	
	private int startX, startY, tempX, tempY;
	
	public PicturePanel() {
		super();
		addMouseListener(this);
		addMouseMotionListener(this);
	}

//	public PicturePanel(boolean isDoubleBuffered) {
//		super(isDoubleBuffered);
//	}
//
//	public PicturePanel(LayoutManager layout) {
//		super(layout);
//	}
//
//	public PicturePanel(LayoutManager layout, boolean isDoubleBuffered) {
//		super(layout, isDoubleBuffered);
//	}

	public void setBackgroundImage(Image image) {
		this.image = image;
		repaint();
	}

	protected void paintComponent(Graphics g) {
// 		super.paintComponent(g);
		if (image != null && zeichnen == false) {
			g.drawImage(image, 0, 0, this);
		}
		else if (zeichnen == true) {
			g2 = (Graphics2D) g;
	        Stroke stroke = new BasicStroke(8.0f);
	        g2.setStroke(stroke);
	        g2.setPaintMode();
	        g2.drawLine(startX, startY, tempX, tempY);
	        startX = tempX;
	        startY = tempY; 
		}

	}

	@Override
	public void mouseClicked(MouseEvent arg0) {
		// TODO Auto-generated method stub
		
	}

	@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) {
		startX = arg0.getX();
		startY = arg0.getY();
 		zeichnen = true;
		
	}

	@Override
	public void mouseReleased(MouseEvent arg0) {
		
	}

	@Override
	public void mouseDragged(MouseEvent arg0) {
        tempX = arg0.getX();
        tempY = arg0.getY();
        repaint(); 
		
	}

	@Override
	public void mouseMoved(MouseEvent arg0) {
		// TODO Auto-generated method stub
		
	}
}

Hab jetzt noch 2 Probleme.

1. Wenn ich das Fenster vergrößere, was muss ich dann machen damit das Bild nicht verschwindet (also alles wieder richtig angezeigt wird)?

2. Wie krieg ich wieder alles in ein Image / BufferedImage?

 

[Tomate_Salat]

Hier mal ein Beispiel, wie ich es umgesetzt hätte. Habe dabei versucht soviel Code von dir zu verwenden wie es geht ;-)

import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Stroke;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class PicturedPanel   
{
    private JFrame  frame;
    private JPanel  imagePanel;
    private JButton saveButton;
    
    private BufferedImage image;
    
    boolean zeichnen = false;
    boolean repaint = false;    
    
    private int startX, startY, tempX, tempY;
    
    public PicturedPanel() 
    {
        frame   = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setBounds(100, 100, 300, 300);
        frame.setLayout(new BorderLayout());
        
        image       = new BufferedImage(400, 400, BufferedImage.TYPE_INT_RGB);               
        
        Image bild = null;
        try 
        {
            bild = ImageIO.read(new File("maus.jpg"));
        } catch (IOException e) {
            e.printStackTrace();
        }        
        
        
        
        Graphics2D g= (Graphics2D) image.createGraphics();
        g.setColor(Color.white);
        g.fillRect(0, 0, 400, 400);
        g.drawImage(bild, 0, 0, null);
        g.dispose();
        
        imagePanel  = new JPanel()
        {
            @Override
            protected void paintComponent(Graphics g) 
            {
                super.paintComponent(g);
                
                if(zeichnen)
                {
                    Graphics2D g2   = (Graphics2D) image.createGraphics();
                    
                    g2.setColor(Color.blue);
                    Stroke stroke = new BasicStroke(8.0f);
                    g2.setStroke(stroke);
                    g2.setPaintMode();
                    g2.drawLine(startX, startY, tempX, tempY);
                    startX = tempX;
                    startY = tempY;
                    
                    g2.dispose();
                }                
                
                Graphics2D g2d  = (Graphics2D) g.create();
                g2d.drawImage(image, 0, 0, null);
                
                g2d.dispose();
            };
        };
        
        imagePanel.setPreferredSize(new Dimension(400, 400));
        imagePanel.addMouseListener(new MouseListener() {
            
            @Override
            public void mouseClicked(MouseEvent arg0) {
                // TODO Auto-generated method stub
                
            }

            @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) {
                startX = arg0.getX();
                startY = arg0.getY();
                zeichnen = true;
                
            }

            @Override
            public void mouseReleased(MouseEvent arg0) {
                
            }
                        
        });
        
        
        imagePanel.addMouseMotionListener(new MouseMotionListener() {
            
            @Override
            public void mouseDragged(MouseEvent arg0) {
                tempX = arg0.getX();
                tempY = arg0.getY();
                frame.repaint(); 
                
            }

            @Override
            public void mouseMoved(MouseEvent e) {
                // TODO Auto-generated method stub
                
            }
        });
        
        saveButton  = new JButton("Speichern");
        
        saveButton.addActionListener(new ActionListener()
        {
            @Override
            public void actionPerformed(ActionEvent arg0) 
            {
                ByteArrayOutputStream baos  = new ByteArrayOutputStream();
                JPEGImageEncoder enc        = JPEGCodec.createJPEGEncoder(baos);
                
                try {
                    enc.encode( image );
                    
                    FileOutputStream out        = new FileOutputStream("imgOut.jpg");
                    out.write( baos.toByteArray() );
                    
                    out.close();
                    baos.close();
                } catch (ImageFormatException e1) {
                    e1.printStackTrace();
                } catch (IOException e1) {
                    e1.printStackTrace();
                } 
            }
        });
        
        frame.add(imagePanel);
        frame.add(saveButton, BorderLayout.SOUTH);
    }
    
    public void start()
    {
        frame.pack();
        frame.setVisible(true);
    }
    
    public static void main(String[] args) 
    {
        SwingUtilities.invokeLater(new Runnable() 
        {
            @Override
            public void run() 
            {
                new PicturedPanel().start();
            }
        });
    }
}

Die Methode

Toolkit.getDefaultToolkit().createImage(String);

empfehle ich hier nicht, da du bei (meiner Methode) sonst nicht rechtzeitig das Bild geladen bekommst. Ich verwende generell immer [c]ImageIO[/c] oder wenn die den [c]ClassLoader[/c] um externe Inhalte zu laden.

Ich habe einfach die Linien direkt auf das Bild zeichnen lassen und lasse immer nur das Bild wieder als Hintergrund setzen beim repaint, so verschwindet bei mir auch nichts ;-)

Mfg

Tomate_Salat

 

[Fireball]

Vielen Dank das ist genau das was ich suche.

Hab das jetzt für meine weiteren Zwecke noch erweitert und es funktioniert prima.

Echt vielen Dank.

Würde jetzt noch folgendes realisieren wollen. wenn das Bild z.b. richtig groß ist dann würde ich gerne dort Scrollbars sehen. Wie müsste ich das dann dort einbauen?

Habs es zwar versucht, ich sehe aber keine Scrollbars bzw. wenn ich das über die JScrollpane machen will dann wird nicht gezeichnet?!?

 

[Fireball]

Habs jetzt hinbekommen, jedoch gibts noch ein kleines Problem.

Wenn ich zuerste ein Großes Bild geladen habe und danach ein kleines. Sehe ich zwar das kleine Bild jedoch entspricht die gezeichnete Größe dem alten bild.

Anderst ausgedrückt: Beim großen Bild musste ich scrollen (so auch gewünscht). Jetzt zeichne ich ein kleines Bild bei dem ich nicht scrollen müsste (weil es kleiner als das Fenster ist), es werden aber dennoch die Scrollbalken angezeigt. Es sieht aus als ob das Bild gezeichnet wird und die übrige Fläche aufgefüllt wird (in der Hintergrundfarbe des Panels) bis sie der Größe des 1sten bildes entspricht.

Wie kann ich das korrigieren?

Nachtrag: Wenn ich zuerste das kleine Bild lade und dann das Große dann hab ich keine Scrollbalken

 

[Fireball]

Habs jetzt hinbekommen, jedoch gibts noch ein kleines Problem.

Wenn ich zuerste ein Großes Bild geladen habe und danach ein kleines. Sehe ich zwar das kleine Bild jedoch entspricht die gezeichnete Größe dem alten bild.

Anderst ausgedrückt: Beim großen Bild musste ich scrollen (so auch gewünscht). Jetzt zeichne ich ein kleines Bild bei dem ich nicht scrollen müsste (weil es kleiner als das Fenster ist), es werden aber dennoch die Scrollbalken angezeigt. Es sieht aus als ob das Bild gezeichnet wird und die übrige Fläche aufgefüllt wird (in der Hintergrundfarbe des Panels) bis sie der Größe des 1sten bildes entspricht.

Wie kann ich das korrigieren?

Nachtrag: Wenn ich zuerste das kleine Bild lade und dann das Große dann hab ich keine Scrollbalken

GELÖST!!! ich musste nach dem setzen der neuen PreferedSize noch die UI update.

 

[Tomate_Salat]

^^ na dann herzlichen Glückwunsch ;-). Wenn das erledigt ist, markiere bitte noch das Thema als erledigt

 

[André Uhres]

in dem out-file ist alles Geld

Hurra! Jetzt kannst du Tomate_Salat auch noch das Geld überweisen :lol:

 

[Tomate_Salat]

Hurra! Jetzt kannst du Tomate_Salat auch noch das Geld überweisen :lol:

hehe hätte nix dagegen

 

[L-ectron-X]

Einen Nachteil sehe ich jedoch in deiner Lösung.
Es ist nicht ohne Weiteres möglich, das Gezeichnete zu verändern, wenn es erst mal in einem BufferedImage steht, oder?

 

[Tomate_Salat]

nein, natürlich nicht, es ist eigentl. garnicht Änderbar. Dafür bräuchte das ganze Programm Ebenen (z.B. wie bei Photoshop), in Form von BufferedImages. Aber ich denke das ist für den Anfang für Ihn zu schwer zu managen, vor allem das Zusammenführen der Sichtbaren Elementen auf ein Bild.

Dann doch eher ein MS-Paint-Klon erstmal schreiben.

 

[L-ectron-X]

Dafür bräuchte das ganze Programm Ebenen (z.B. wie bei Photoshop), in Form von BufferedImages.

Nicht unbedingt, ich habe dazu mal eine Liste geschrieben, die die Typen und Daten der gezeichneten Objekte speichert. Beim Zeichnen wird diese Liste durchlaufen und alle Objekte sind mit deren Methoden veränderbar.

 

[Tomate_Salat]

Achso, du meinst du hast ein hintergrundbild und in einem Objekt (hier) die linien-punkte gespeichert und diese werden dann drauf gezeichnet?

Ja gut soetwas ähnliches hatte ich mal als MVC-Test-projekt gemacht. So eine Art schiesstand indem das Model die löcher, deren durchmesser und koordinaten gespeichert hat. In der [c]paintComponent[/c] wurde dann eine map durchgelaufen und die löcher gezeichnet.

Ja klar so geht es auch, aber da stellt sich die frage: was ist später einfacher/effiktiver und performencegünstiger?

Das ganze Bild neu zeichnen lassen oder Ebenen?

Ich würde mal sagen: eine Kombination aus beidem.

 

[Fireball]

Hallo zusammen,

hab jetzt noch den Rest des Thread verfolgt. So etwas wie löschen des gezeichneten bräuchte ich natürlich auch.

Im mom wollte ich das einfach so realisieren das ich das Ursprungsbild einfach nochmal zeichne (neu lade). Das ganze soll ja keine 2tes Photoshop werden, es soll nur die Möglichkeite bieten dort ein paar striche zu zeichnen.

Aber wenn jemand von euch noch eine Idee hätte wie ich das eventuell noch verbessern kann dann bin ich ganz ohr. z.B. wenn jemand 2 Striche zeichnet, das er nur den letzten entfernen kann...

 

[Tomate_Salat]

Spontaner lösungsvorschlag:

Du hast einen [c]Vector<Object> lines[/c] und einen [c]Vector<Point> currentLine[/c].

Wenn du einen Mausklick machst, initalisierst du [c]currentLine[/c] (neu) und setzt eine boolsche Variable true. Dort speicherst du dann die Punktkoordinaten der Maus bei einer Bewegung.

Wird die maus losgelassen, addest du in [c]lines[/c] eine KOPIE!!! (machst du keine, gehst du die Gefahr ein, nur eine Referenz zu übergeben!) von [c]currentLine[/c].
Somit enhält [c]lines[/c] lauter Vectoren mit Koordinaten.

in deiner paintComponent gehst du einfach deine [c]lines[/c] durch. Holst dir die einzelnen Vectoren raus, liest die Punktkoordinaten aus und verbindest diese Miteinander. Somit enspricht jeder Vector den du aus [c]lines[/c] holst, einer linie.

Damit du auch die aktuelle linie siehst, die vom Benutzer generiert wird, würde ich noch die boolsche variable abfragen, die du vorher true gesetzt hast. Ist das der Fall dann zeichnest du zum schluss noch die linie die in [c]currentLine[/c] beschrieben wurde.

Edit logischerweise funktioniert dein "löschen" von Linien, indem du die Einträge aus [c]lines[/c] löscht.

MFG

Tomate_Salat

 

[Fireball]

das war ja ne schnelle Antwort Danke.

Ok hab das verstanden.

OOT:
Hab im mom noch ein kleines Problem -> Meine Anwendung ist eine Client/Server Anwendung (Half-Object Pattern).

Zurzeit hab ich noch ein Synchronisations Problem zu lösen das wie folgt aussieht. Wenn ich das Bild bearbeitet habe und dann wieder speichern will in der DB, wird eine update Fkt. aufgerufen, in dieser Update Fkt ruf ich eine andere Funktion auf das mir von der Client-Seite das aktuelle (bearbeitete) Bild besorgen soll. mit invokeUI ruf ich auf der Client Seite eine Funktion auf das mir das neue Bild zurückgeben soll. Jedoch wird diese erst nach der kompletten updateFuktion auf der ServerSeite verarbeitet. D.h. das update läuft durch und wenn das durch ist dann wird die Fkt auf der Client Seit aufgerufen und ich erhalte das neue Bild..

Wie kann sowas am besten lösen?