JPanel-Gitter

[darkeye2]

Hallo leute,

hab wie immer ein Problem.
Was ich machen will:
ich versuche ein feld zu erstellen, das aus ganz vielen kleinen kästchen besteht, diese sind mit linien von einander getrennt. Die kästchen sollen schwarz sein und 2x2 pixel groß, die linien dazwischen sollen jeweils 1px breit sein. Das schaut etwa so aus (da lineien grau, sieht man es hier net so ganz, bei größeren feldern erkennt man die gut)

Jedes dieser kästchen soll einzeln angesprochen werden, also einzelne z.b gefärbt werden, ...

Was ich bisscher probiert hab:
ich habe für jedes kästchen ein eigenes jpanel erstellt, und in einem array gespeichert, so konnte ich jedes einzeln ansteuern, ging auch ganz gut, aber sobald das feld größer wurde z.b. 200x150 kästchen, hing das programm nur noch, ist auch irgendwo verständlich, bei 30000 jpanels ... .

Problem:
Wie kann ich das anders lösen, das ich ein feld hab, in dem jedes kästchen einzeln aufgerufen werden kann?
Hab schon überlegt erstmal als dals feld als bild zeichnen zu lassen, aber nix sinnvolles gefunden, wie ich das hinbekomme, hoffe hier kann mir jemand helfen.

MfG
darkeye

 

[XHelp]

Was willst du denn eigentlich mit dem Feld anfangen?
Eigentlich könntest du die paintComponent von z.b. einem JPanel überschreiben, schwarz ausfüllen und linien zeichnen... Anders färben kannst du dann auch, denn zu jedem Kästchen kannst du die Koordinaten auf dem JPanel berechnen.
Wenn du einzelne Kästchen anclicken willst, geht das genau so (nur umgekehrt: aus Koordinaten ein Kästchen bestimmen).

 

[darkeye2]

Also anklicken will ich die net, nur farbe ändern, zumindest im moment, werde es mal so probieren, wie du es beschreiben hast, mal schauen, ob ich es gescheit hinbekomme...

 

[Marco13]

Die Felder repräsentieren wohl Elemente eines Arrays. Aber was soll in dem Array drin sein? Wenn es nur "Pixel" (d.h. farben) sein sollen, wäre das einfach ein int[][] array, und in der paintComponent malt man kleine Rechtecke. Wobei es da evtl. effizienter sein könnte, ein BufferedImage zu verwenden, wei man da die jeweils 2x2 pixel einfach setzen kann, und nicht einzeln mit fillRect malen muss...

 

[darkeye2]

also meine erste idee sah dann so aus:

private class Dot extends JPanel{
		private static final long serialVersionUID = 1L;
		int w, h , c;
		Color off  = Color.black;
		Color on = Color.RED;
		
		Dot(){
			w = 2;
			h = 2;
			this.setPreferredSize(new Dimension(w,h));
			this.setBackground(off);
			this.setVisible(true);
		}
		
		void setOn(int stat){
			if(stat == 1){
				this.setBackground(on);
			}else{
				this.setBackground(off);
			}
		}
	}

und felder so speichern:

field = new Dot[width][height];
		
		for(int i =0; i < width; i++){
			for(int t =0; t < height; t++){
				field[i][t] = getDot();
			}
		}

dann halt aus array aufrufen, da das net funktioniert hat, jetzt mein neuer Ansatz:

public class Test_bb extends JFrame {
	private static final long serialVersionUID = 1L;
	int w, h;

	Test_bb(int w ,int h){
		this.w = w;
		this.h = h;
		this.setPreferredSize(new Dimension(w*3+this.getInsets().left+this.getInsets().right,h*3+this.getInsets().top));
		this.getContentPane().setBackground(Color.black);
		
		this.pack();
		this.setVisible(true);
		
	}
	
	public void paint(Graphics g) {
		super.paintComponents(g);
		
		int stX, stY, enX, enY;
		stX = this.getInsets().left + 3;
		stY = this.getInsets().top;
		enX = w*3 + this.getInsets().left;
		enY = h*3 + this.getInsets().top;
		
		g.setColor(Color.red);
		
		// zeichnen der vertikalen linien
		for(int i= stX; i <= enX; i= i+3){
			g.drawLine(i,stY,i,enY);
		}

    }
	

}

(linien sind nur rot, damit ich die jetzt leichter erkenne, später ändere ich die farbe zu grau)

Frage1: wie kann ich die lineinstärcke beim zeichnen der linien ändern, die ist eindeutig über 1 px ?
Frage2: hab im inet nix gefunden, wie kann ich später einzelne pixel einfärben? (koordinaten berechnen kriege ich noch hin, aber einfärben weiß ich jetzt nicht, wie ich das machen soll)

 

[Marco13]

Lass' das mit den Panels als Dots. Das macht keinen Sinn.
Die Linienstärke ist normalerweise 1. Bevor du kein KSKB postest, glaube ich nicht, dass es bei dir anders ist
Einzelne Pixel einzufärben würde bei dir jetzt mit field[x][y].setOn(1) gehen, aber das ist wie gesagt nicht gut.

 

[darkeye2]

das mit pixel einfärben bezog sich auf die zweite möglichkeit, das mit den panels als dots hab ich ja schon aufgegeben^^

Also das zeichnen des gesammten feldes funktioniert schon mal, zumindest siehts richtig aus^^
jetzt müsste ich nur noch wissen, wie ich einzelne bereich auf den JFrame färben kann, also einzelne bereiche, bzw pixel färben kann, gezeichnet wierd das feld so:

Test_bb(int w ,int h){
		this.w = w;
		this.h = h;
		this.setPreferredSize(new Dimension(w*3+this.getInsets().left+this.getInsets().right,h*3+this.getInsets().top));
		this.getContentPane().setBackground(Color.black);
		
		this.pack();
		this.setVisible(true);
		
	}
	
	public void paint(Graphics g) {
		super.paintComponents(g);
		
		int stX, stY, enX, enY;
		stX = this.getInsets().left + 3;
		stY = this.getInsets().top;
		enX = w*3 + this.getInsets().left;
		enY = h*3 + this.getInsets().top;
		
		g.setColor(Color.DARK_GRAY);
		
		// zeichnen der vertikalen linien
		for(int i= stX; i <= enX; i= i+3){
			g.drawLine(i,stY,i,enY);
		}
		
		// zeichnen der horizontalen linien
		for(int i= stY; i <= enY; i= i+3){
			g.drawLine(stX,i,enX,i);
		}

    }

 

[Marco13]

Hab mal gebastelt. Aber sag' vielleicht erstmal, was du überhaupt vorhast

import java.awt.*;
import javax.swing.*;
import java.awt.image.*;
import java.awt.event.*;

class GridPaint
{
    public static void main(String args[])
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                JFrame f = new JFrame();
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

                final int gridSize = 4;
                final GridImage gridImage = new GridImage(200,200,gridSize);
                final GridPanel gridPanel = new GridPanel(gridImage);
                f.getContentPane().add(gridPanel);



                Graphics g = gridImage.createGraphics();
                g.setColor(Color.RED);
                g.drawString("Hallo Grid!", 20, 20);
                g.setColor(Color.GREEN);
                g.drawOval(10,10,50,50);
                gridImage.disposeGraphics(g);


                f.setSize(800,800);
                f.setVisible(true);


                gridPanel.addMouseMotionListener(new MouseAdapter()
                {
                    public void mouseDragged(MouseEvent e)
                    {
                        int x = e.getX();
                        int y = e.getY();
                        int gx = x / (gridSize+1);
                        int gy = y / (gridSize+1);
                        gridImage.setRGB(gx,gy,Color.BLUE.getRGB());
                        gridPanel.repaint();
                    }
                });

            }
        });
    }





    static class GridPanel extends JPanel
    {
        public GridImage gridImage;

        public GridPanel(GridImage gridImage)
        {
            this.gridImage = gridImage;
        }

        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);
            gridImage.paintOn(g);
        }
    }


    static class GridImage
    {
        private BufferedImage realImage;
        private BufferedImage gridImage;

        private int w;
        private int h;
        private int gridSize;

        public GridImage(int w, int h, int gridSize)
        {
            this.w = w;
            this.h = h;
            this.gridSize = gridSize;

            int iw = w*(gridSize+1)+2;
            int ih = h*(gridSize+1)+2;

            realImage = new BufferedImage(iw, ih, BufferedImage.TYPE_INT_RGB);
            Graphics g = realImage.createGraphics();
            g.setColor(Color.GRAY);
            g.fillRect(0,0,iw,ih);
            g.dispose();

            gridImage = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);

        }

        public int getWidth()
        {
            return w;
        }

        public int getHeight()
        {
            return h;
        }

        public void setRGB(int x, int y, int rgb)
        {
            if (x >= 0 && x<w && y>=0 && y<h)
            {
                gridImage.setRGB(x,y,rgb);
                setRealRGB(x,y,rgb);
            }
        }

        private void setRealRGB(int x, int y, int rgb)
        {
            int ix = x*(gridSize+1)+1;
            int iy = y*(gridSize+1)+1;
            for (int i=0; i<gridSize; i++)
            {
                for (int j=0; j<gridSize; j++)
                {
                    realImage.setRGB(ix+i,iy+j,rgb);
                }
            }
        }

        public int getRGB(int x, int y)
        {
            return gridImage.getRGB(x,y);
        }

        public Graphics createGraphics()
        {
            return gridImage.createGraphics();
        }

        public void disposeGraphics(Graphics g)
        {
            g.dispose();
            for (int x=0; x<gridImage.getWidth(); x++)
            {
                for (int y=0; y<gridImage.getHeight(); y++)
                {
                    setRealRGB(x,y,gridImage.getRGB(x,y));
                }
            }
        }


        void paintOn(Graphics g)
        {
            g.drawImage(realImage,0,0,null);
        }
    }



}

 

[darkeye2]

Danke, das it im grunde genau dass, was ich gesucht habe, was ich noch brächte wäre eine kleine erklärung, ich sehe du zeichnest zwei bilder, das erste ist aber nur ein graues bild, auf das zweite wird scheinbar der text oder das bild gezeichnet, doch wocher kommen nun die schwarzen felder, und wie entsteht dieses gittermuster?

Hoffe ich nerve net zu sehr, das Ergebniss ist ja richtig klasse, aber würde gerne auch verstehen, wie es Funktioniert

 

[Marco13]

Wenn du (mich) nervst, äußert sich das darin, dass ich nicht mehr antworte Es ist nur so, dass man oft eine Glaskugel braucht, um zu erkennen, was die Leute wollen:
ich versuche ein feld zu erstellen, das aus ganz vielen kleinen kästchen besteht, diese sind mit linien von einander getrennt. Die kästchen sollen schwarz sein und 2x2 pixel groß, die linien dazwischen sollen jeweils 1px breit sein.

Was ich dann gepostet hatte, war ... vielleicht bestenfalls gut geraten

Ob das so für dein Ziel (das niemand kennt) (naja, du ja hoffentlich schon) der geeignetste Ansatz ist, weiß ich natürlich nicht. Aber ein paar erläuternde Worte: Die wichtigste Klasse ist ja das "GridImage". Da drin liegen zwei Bilder, eins davon heißt (etwas ungünstigerweise) "gridImage", das andere "realImage" (mir sind spontan keine besseren Namen eingefallen - Groß- und Kleinschreibung im folgenden beachten). So ein GridImage hat eine bestimmte Größe, nämlich die Anzahl der Kästchen-Pixel die es haben soll. Das 'gridImage' ist ein "echtes" BufferedImage, das genau so viele "echte" Pixel hat, wie das GridImage Kästchen-Pixel haben soll. Das 'gridImage' ist also sozusagen das Bild, das dem "GridImage" entspricht, nur eben mit 1x1 großen Pixeln und ohne die Trennlinien.
Daneben gibt es das "realImage". Das ist das Bild, das tatsächlich gezeichnet wird, und das die großen Kästchen-Pixel und die Trennlinien enthält. Im Endeffekt wird in der GridImage-Klasse nun nichts anderes gemacht, als alle echten Pixel, die in dem kleinen gridImage-Bild sind, als Kästchen in das große realImage-Bild reinzumalen. Dazu wird die Methode "setRealRGB" verwendet, die das Kästchen für den Kästchen-Pixel mit den angegebenen Koordinaten malt.
(Es wird noch unterschieden: Wenn nur mit setRGB(x,y,rgb) ein einzelner Pixel vom GridImage (also vom gridImage) verändert wird, wird auch nur ein einzelner Kästchen-Pixel in's realImage gemalt. Wenn man sich aber das Graphics-Objekt geholt und darin u.U. "viel" gezeichnet hat, wird in der disposeGraphics-Methode einfach alles aktualisiert)

Das ganze hat den Vorteil, dass man es sehr leicht verwenden kann, um beliebige Sachen zu zeichnen (wie man ja auch an dem Beispiel sieht). Ansonsten müßte man schon allein für das Zeichnen einer einzlenen Linie ja den Bresenham nachimplementieren :autsch: und an ein komplettes JPG-Bild, das man da reinmalt und vielleicht noch mit stylischem Text und Shapes mit hübschen Farbverläufen übermalt bräuchte man gar nicht zu denken, wenn man nicht die Möglichkeit hätte, dieses GridImage über ein Graphics-Objekt anzusprechen.

 

[darkeye2]

Danke für die erklärung, und was die funktion angeht hast du soweit ganz gut "geraten" es funktioniert auch alles soweit zimlich gut, was mir allerdings aufgefallen ist, dass wenn ich die schriftgröße auf weniger als 9 setzte darstellungsfehler auftreten, woran könnte das liegen?
Oder mache ich da was falsch:

//zeichnen eines Strings
			public void drawText(Color color, String text, int xP, int yP){
				g.setColor(color);
				g.drawString(text, xP, yP);
				gridImage.disposeGraphics(g);
			}
			
			public void drawText(String text, int xP, int yP){
				drawText(Color.RED, text, xP, yP);
			}
			
			public void drawText(String text, int xP, int yP, int  size){
				g.setFont(new Font("Times New Roman", Font.PLAIN, size));
				drawText(text, xP, yP);
			}
			
			public void drawText(Color color, String text, int xP, int yP, int  size){
				g.setFont(new Font("Arial", Font.PLAIN, size));
				drawText(color, text, xP, yP);
			}

und dannach der aufruf der methode:

brett.drawText(Color.red, "Das hier ist ein kurzer Test", 5, 10, 8);

(der codeausschnitt von dir, der das gridImage und das gridPanel erstellt ist immer noch unverändert und wird es vermutlich vorerst auch bleiben, hab im code aber als kommentar drinstehen, dass du gehoflen hast)

 

[Marco13]

Das sind keine Darstellungsfehler. So sieht der Text nun mal einfach aus, wenn man ihn so klein machen will. Als Beispiel:

import java.awt.*;
import javax.swing.*;
import java.awt.image.*;
import java.awt.event.*;

class GridPaint
{
    public static void main(String args[])
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                JPanel p = new JPanel()
                {
                    public void paintComponent(Graphics g)
                    {
                        super.paintComponent(g);
                        g.setFont(new Font("Arial", Font.PLAIN, 8));
                        g.drawString("Das ist ein Test", 10,10);
                    }
                };
                JFrame f = new JFrame();
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                f.getContentPane().add(p);
                f.setSize(300,300);
                f.setVisible(true);
            }
        });
    }
}

(notfalls mit
Start > Programme > Zubehör > Eingabehilfen > Bildschirmlupe
ansehen)

Wenn man für die Darstellung eines kleinen "a" nur noch 4 Pixel zur Verfügung hat, kann das eben noch bestenfalls so

XXXX
   X
XXXX
XXXX

aussehen, und wenn der Font noch Serifen hat oder so, kommt da u.U. nur noch so ein Quatsch wie

 XX
X  X
XXXX
XXXXX

raus :autsch:


Es gab mal einen speziellen Font "Small Fonts", bei dem die Buchstaben speziell so designt waren, dass sie such bei kleinen Schrifgrößen nicht zu Pixelbrei zermatschen, aber den hab' ich hier im Moment nicht installiert. Das noch nebenbei: Dem Konstruktor von "Font" irgendeinen beliebigen String zu übergeben, und davon auszugehen, das der schon installiert ist, ist ein bißchen gewagt.
Serif
Sans Serif
Monospaced
Dialog
Dialog Input
sind die Fonts, die es immer gibt. Bei allen anderen muss man aufpassen...