JPanel - zeichnen eines Arrays

[redbomber]

Hi zusammen,
vielleicht könnt ihr mir ja auf die Sprünge helfen.

Ich möchte einen Array, der mit Werten gefüllt ist (Integer oder Double) zeichnen.
Soll so etwas wie ein Plot werden.

In der paintComponent Methode meines JPanels, mache ich dies, indem ich den array durchlaufe und immer zwischen zwei Zeichen eine g.drawLine Linie ziehe.

Ok, das was ich dann habe entspricht aber der "negativ" Zeichnung.

Jetzt meine Frage.
Muss ich davor den Min/Max Wert des Arrays bestimmen und dann für jeden Punkt komplizierte Berechnungen durchführen, damit ich für jeden Punkt die korrekten Koordinaten heraus bekomme?

Oder gibt es da eine einfacher Möglichkeit?

 

[Marco13]

Was meinst du mit "negativ"? Kann es sein, dass du nur überall statt
g.drawLine(x0,y0,x1,y1);
sowas schreiben musst wie
g.drawLine(x0,getHeight()-y0,x1,getHeight()-y1);

!?

 

[redbomber]

also mit "negativ" meine ich, dass er ja immer die linke obere Ecke als (0,0) Ursprung ansieht.

Also muss ich mir vermutlich erst einmal berechnen, wie groß mein Wertebereich ist.
Ich probiere das gleich mal mit getHeight();

 

[redbomber]

das hat leider nicht funktioniert.

Aber gibt es in Swing nicht schon irgend etwas vorgefertigtes, welches das zeichnen von Plots vereinfacht?

 

[Ebenius]

Aber gibt es in Swing nicht schon irgend etwas vorgefertigtes, welches das zeichnen von Plots vereinfacht?

Bei Swing ist nix dabei. Gibt aber ne ganze Menge Zeugs was man benutzen könnte: Java+Swing+Plot.

Ansonsten mit AffineTransform den Zeichenbereich transformieren und dann einfach im Wertebereich zeichnen. In etwa so (im Browser getippt und ungetestet):

protected void paintComponent(Graphics g) {
  final Graphics2D g2d = (Graphics2D) g;
  final AffineTransform orgTf = g2d.getTransform();
  try {
    g2d.scale(myMaxX * 1. / getWidth, myMaxY * -1. / getHeight);
    // do your painting in target coord system here
  } finally {
    g2d.setTransform(orgTf);
  }
}

Ebenius

 

[redbomber]

hey, ja hatte auch schon gegoogelt.
Aber es werden entweder nur fertige Anwendungen angeboten, oder man findet Code für komplexe scatter Plots.

Aber ein einfaches Beispiel in dem einfach ein paar (x,y) Punkte gezeichnet werden ist leider nicht dabei.

 

[redbomber]

sorry aber bekomms leider noch immernicht hin...

kann mir vielleicht jemand erklären was das Prinzip des ganzen ist?

Also ich habe meinen Array mit Daten.
Von diesem bestimme ich folgende Werte:

maxX
maxY
minX
minY

also kann ich damit schon einmal eine Fläche aufspannen

Ok, dann weiter:
Ich besitze ein JPanel mit bestimmter Größe, also besitze ich auch folgendes:

gethHeight()
getWidth()

So und nun blick ich es nicht mehr.

Wie setzte ich das ganze Fenster auf meinen Wertebereich? Wie zeichne ich die einzelnen Werte aus meinem Array in das JPanel?

 

[Marco13]

Du hast Werte (x,y) und die besagten xMin...yMax und width und height. Jetzt kommt das, was man glaubich "Dreisatz" nennt: Man rechnet den Wert (x,y) so um, dass man seine eine "Relative Position" innerhalb des (von xMin...yMax) aufgespannten Recheteckes bekommt. Die Position des Punktes innerhalb dieses Rechteckes wird also mit Koordinaten (rx,ry) beschrieben, die beide zwischen 0 und 1 liegen:

float rx = (x-xMin)/(xMax-xMin);
float ry = (y-yMin)/(yMax-yMin);

Oder an einem Beispiel: Bei xMin = 50 und xMax = 150 liegt ein Punkt, der bei x=100 liegt, genau in der Mitte des Rechtecks - in diesem fall sollte rx=0.5 sein (und das ist auch so :wink: )

Diese relativen Positionen kann man dann wieder auf die Fenstergröße hochrechnen:

int fx = (int)(rx*getWidth());
int fy = (int)(ry*getHeight());

Ein Punkt, der vorher in der Mitte des Rechtecks (also bei x=0.5) lag, liegt dann in der Mitte des Fensters (eben bei getWidth()*0.5)

Diese beiden Schritte kann man auch zu einem Schritt zusammenfassen, aber wenn man sie getrennt läßt, ist es intuituver und kann einige Vorteile bezüglich Flexibilität bringen. (Optimierungen zum Vermeiden überflüssiger Zwischenschritte kann man später machen...)

 

[redbomber]

also meine paintComponent Methode sieht nun wie folgt aus:

 public void paintComponent (Graphics g)
    {
    	super.paintComponent(g);
    	  final Graphics2D g2d = (Graphics2D) g;
    	  final AffineTransform orgTf = g2d.getTransform();
    	  try {
    	    g2d.translate(5., 5.);
    	    for (int i = 0; i < data.size() - 1; i++) {
    			double rx1 = ((i) - minx) / (maxx - minx);
    			double ry1 = (data.get(i) - miny) / (maxy - miny);
    			double rx2 = ((i + 1) - minx) / (maxx - minx);
    			double ry2 = (data.get(i + 1) - miny) / (maxy - miny);

    			int fx1 = (int) (rx1 * getWidth());
    			int fy1 = (int) (ry1 * getHeight());
    			int fx2 = (int) (rx2 * getWidth());
    			int fy2 = (int) (ry2 * getHeight());

    			g2d.setColor(Color.GREEN);
    			g2d.drawLine(fx1, fy1, fx2, fy2);

    		}
    	    
    	    if(drawLine){
    			g2d.setColor(Color.CYAN);
    			g2d.drawLine((int)xLinePos, 0, (int)xLinePos, getWidth()); 
    		}
    	    
    	  } finally {
    	    // reset old transform
    	    g2d.setTransform(orgTf);
    	  }

	}

Trotzdem wird aber der Plot immernoch horizontal gespiegelt dargestellt.

Das ganze habe ich auch verwendet um mittels ToolTipText mit die Position in x,y Koordinaten anzeigen zu lassen.
Hier bestätigt sich, dass ich links oben meinen Ursprung habe.

 

[Marco13]

Wahrscheinlich ist es vertikal gespiegelt, und da reicht meine erste Antwort.

 

[Ebenius]

redbomber, Du musst die Beispiele schon lesen. Ich hab oben doch scale geschrieben... Für y negativ!

 

[redbomber]

ja aber wenn ich

g2d.scale(1., -1.);

oder auch

g2d.scale(myMaxX * 1. / getWidth(), myMaxY * -1. / getHeight());

verwende, dann bekomme ich überhaupt keine Koordinaten gezeichnet.

Brauche ich denn die scale Methode überhaupt wenn ich die Koordinaten so umrechne wie Marco13 es beschrieben hat?

Die Koordinaten werden schon horizontal gespiegelt.

Also wenn meine Datenwerte zu Beginn ansteigen, dann fallen sie im Plot entsprechend ab (und umgekehrt)

 

[Marco13]

Poste ein kleines, compilierbares(!!!!) sofort ausführbares Beispielprogramm (mit irgendwelchen "Dummy-Werten" in einem Test-Array, und meinetwegen festen min/max Werten und so). Dann füge ich dir das fehlende "getHeight()-" ein :bae:

 

[redbomber]

sekunde, kommt gleich!!

 

[redbomber]

sodele

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;
import java.util.ArrayList;

import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;




public class Test {

	protected static ArrayList<Double> data = new ArrayList();
	static double miny=Double.MAX_VALUE, minx=Double.MAX_VALUE, maxy=Double.MIN_VALUE, maxx=Double.MIN_VALUE;
	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		JFrame frame = new JFrame();
		frame.setTitle("Plotting Window");
		frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
		frame.setVisible(true);
		// Kann man hiermit in der Mitte positionieren
		frame.setLocation(0,0);
		frame.setResizable(false);
		setData();
		JScrollPane scrollPane = new JScrollPane(new MyPanel());
		scrollPane.setVisible(true);
		scrollPane.setBackground(Color.WHITE);
		
		
		//scrollPane.setViewport(panel);
		frame.add(scrollPane);
    	frame.pack();
    	
		
	}
	
	public static class MyPanel extends JPanel{
		
		public MyPanel(){
			this.setBackground(Color.WHITE);
			this.setPreferredSize(new Dimension(5000, 200));
                        this.setSize(5000, 200);
	    	//buffer = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
			this.setOpaque(true);
			
			this.setVisible(true);
			this.setBorder(BorderFactory.createLineBorder(Color.black, 1));

	    	setMinMaxValues(this);
		}
		
		 public void paintComponent (Graphics g)
		    {

				super.paintComponent(g);
				
				final Graphics2D g2d = (Graphics2D) g;
				final AffineTransform orgTf = g2d.getTransform();
				try {
					g2d.setColor(Color.GREEN);
					for (int i = 0; i < data.size() - 1; i++) {
						// this.setForeground(Color.RED);
						double rx1 = ((i) - minx) / (maxx - minx);
						double ry1 = (data.get(i) - miny) / (maxy - miny);
						double rx2 = ((i + 1) - minx) / (maxx - minx);
						double ry2 = (data.get(i + 1) - miny) / (maxy - miny);

						int fx1 = (int) (rx1 * getWidth());
						int fy1 = (int) (ry1 * getHeight());
						int fx2 = (int) (rx2 * getWidth());
						int fy2 = (int) (ry2 * getHeight());

						g2d.setColor(Color.GREEN);
						g2d.drawLine(fx1, fy1, fx2, fy2);
					}

				} finally {
					// reset old transform
					g2d.setTransform(orgTf);
				}

			}
		 
		 protected void setMinMaxValues(MyPanel panel){	
				minx = 0;
				maxx = data.size();
				
		    	for(int i = 1; i < data.size(); i++){
		    		miny = miny<data.get(i)?miny:data.get(i);
		    		maxy = maxy>data.get(i)?maxy:data.get(i);
		    	}

		    	System.out.println("minx: " + minx);
		    	System.out.println("maxx: " + maxx);
		    	System.out.println("miny: " + miny);
		    	System.out.println("maxy: " + maxy);
		    	System.out.println("width: " + panel.getWidth());
		    	System.out.println("height: " + panel.getHeight());
		    }
	}
	
	
	
	protected static void setData(){
		data.add(10.);
		data.add(14.);
		data.add(15.);
		data.add(20.);
		data.add(14.);
		data.add(12.);
		data.add(9.);
		data.add(7.);
		data.add(4.);
		data.add(2.);
		data.add(-3.);
		data.add(-9.);
		data.add(-12.);
		data.add(-9.);
		data.add(-3.);
		data.add(2.);
		data.add(6.);
		data.add(13.);
		data.add(17.);
		data.add(22.);
	}

}

 

[redbomber]

dabie habe ich dann die folgenden Werte:

minx: 0.0
maxx: 20.0
miny: -12.0
maxy: 22.0
width: 5000
height: 200

 

[Marco13]

Eigentlich würde ich ja rein der vollständigkeit halber wieder was compilierbares posten, aber da man (wie ich schon in der ersten Antwort geschrieben habe) NUR die Zeile 84 ändern muss in
g2d.drawLine(fx1, getHeight()-fy1, fx2, getHeight()-fy2);
lohnt sich das eigentlich nicht...

 

[Ebenius]

Da ist ein hübscher Fehler in Deiner Klasse. Double.MIN_VALUE ist nicht der kleinstmögliche Double-Wert, sondern ein Wert der so klein wie möglich größer als 0 ist. Bei Double muss

-Double.MAX_VALUE

verwendet werden! Bei Float entsprechend.

Ebenius

 

[Ebenius]

So geht's ansonsten sehr hübsch.

public void paintComponent(Graphics g) {
  super.paintComponent(g);

  final Graphics2D g2d = (Graphics2D) g;
  final AffineTransform orgTf = g2d.getTransform();
  final Stroke orgStroke = g2d.getStroke();
  try {
    /* get the component size */
    final Insets ins = getInsets();
    final int width = getWidth() - ins.left - ins.right;
    final int height = getHeight() - ins.top - ins.bottom;

    /* transform view into codomain */
    g2d.translate(ins.left, ins.top);
    g2d.scale((width - 1) / (maxx - 1), -(height - 1) / (maxy - miny));
    g2d.translate(minx, -maxy);

    /* assign a 1px stroke */
    g2d.setStroke(new BasicStroke(1f / width, BasicStroke.CAP_ROUND,
          BasicStroke.JOIN_ROUND));

    final Line2D.Double line = new Line2D.Double();
    g2d.setColor(Color.GREEN);
    for (int i = 0; i < data.size() - 1; i++) {
      line.setLine(i, data.get(i).doubleValue(), i + 1, data.get(i + 1)
            .doubleValue());
      g2d.draw(line);
    }
  } finally {
    // reset old transform
    g2d.setTransform(orgTf);
    g2d.setStroke(orgStroke);
  }
}

[ edit ] Code geändert; Stroke wird im finally-Block zurück gesetzt. Die line-Variable könnte man natürlich noch zum Member machen...

Ebenius