Entwickler-Ecke :: Thema anzeigen - Geraden bei Klick in PictureBox zeichnen

Coja - Fr 06.08.10 14:31
Titel: Geraden bei Klick in PictureBox zeichnen

Hallo c#-Gemeinde ;)

ich habe folgendes Problem:
Ich möchte mit der Maus in eine Picturebox zeichnen, immer wenn geklickt wird, wird eine neue Linie gezeichnet.
Die Koordinaten der Maus werden dabei in ein Array geschrieben und in der Form angezeigt.
Zurzeit hänge ich noch dabei fest, die ermittelten Koordinaten der Maus in das Array zu schreiben und die Zeichnung zu aktualisiern.

Zusatz:
[Als weitere Optionen möchte ich dann einfügen, dass ich die Koordinaten auch in das Array schreiben kann und die Zeichnung in er PictureBox aktualisiert wird sowie das Löschen von Linien/Punkten ermöglicht wird]

Coja - Sa 07.08.10 10:35

Hallo, mach ich ;)
ich hoffe es ist so richtig:

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            PointF[] Punkte={new Point(3,3),new Point(30,30), new Point(200,100)};
            {            
                    Punkte[0] = new Point(0,0);
                    Punkte[1] = new Point(0, 50);
                    Punkte[2] = new Point(20, 60);
                    e.Graphics.DrawPolygon(new Pen(Color.Violet), Punkte);
                    pictureBox1.Invalidate();
            }
        }
        private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
        {
            Point P = new Point(e.X, e.Y);
            textBox1.Text = P.ToString();
        }
}

Es ist bisher leider bei dem Ansatz geblieben...Ich hab zwar schon ein wenig rumprobiert, aber es kam nix sinnvolles dabei raus.
vg
Coja

Th69 - Sa 07.08.10 11:22

Vom Grundprinzip her ist dein Ansatz schon mal in Ordnung, d.h. die Verwendung der Ereignisse Paint und MouseClick.
Du mußt jetzt noch das Array (bzw. besser wäre eine List<Point>) als Klassenmember anlegen und dann im MouseClick-Ereignis den Punkt dieser Liste hinzufügen. Und dort dann die Invalidate-Methode der PictureBox aufrufen (NICHT im Paint-Ereignis!).

Und die Paint-Methode muß dann selbstverständlich diese Punkte-Liste benutzen.

Probiere dich mal daran, und wenn du noch weitere Detail-Fragen hast, dann beschreibe sie - ich möchte dir jetzt extra keinen Source-Code geben, damit du selber es erlernst -)

P.S: Als generelles Tutorial zum "Zeichnen in WinForms" kann ich dir folgendes empfehlen: http://www.mycsharp.de/wbb2...d.php?threadid=21782 (falls du es noch nicht kennst -)

Coja - Mo 09.08.10 10:46

Hallo,
danke für die bisherigen Tipps.
Ich hab jetzt eine Liste angelegt, die ich mir dann noch anzeigen lassen möchte (in DateGridView).
Bisher sieht der Code wiefolgt aus:

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:

 public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            
          
            PointF[] Punkte={new Point(3,3),new Point(30,30), new Point(200,100)};
            {            
                    Punkte[0] = new Point(0,0);
                    Punkte[1] = new Point(0, 50);
                    Punkte[2] = new Point(20, 60);
                    e.Graphics.DrawPolygon(new Pen(Color.Violet), Punkte);
                    
            }
        }
        private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
        {
            Point P = new Point(e.X, e.Y);              // Punkte der Maus auslesen
            textBox1.Text = P.ToString();               // aktuellen Pkt. in TextBox
            
            List<Point> PunkteListe = new List<Point>(); // List statt Array
            PunkteListe.Add(P);                         // Pkt. zur List hinzufügen
            
            DataGridViewComboBoxColumn DatenPunkte = new DataGridViewComboBoxColumn();
            DatenPunkte.DataSource = PunkteListe;
            
            pictureBox1.Invalidate();                   
            
        }

        private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
        {

        } 
                            
    }

Ich möchte auch keinen kompletten Code, Tipps reichen mir ;) Aus meinem ersten Beitrag kann man ja erkennen, dass es noch etwas mehr ist, als "nur" eine Liste/Array anlegen.
Meine Probleme sind jetzt zum einen:
- Wie sehe ich mir die Punkte in der DataGridView an und wie lasse ich sie zeichnen.
- WIe kann ich bestimmte Punkte bzw. Linien löschen (aus der Zeichnung und der Liste), am besten durch anklicken der Linie und drücken der Entf-Taste (also mit einem Keys-Befehl).
vg
Coja

Necaremus - Mo 09.08.10 11:01

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:

 public partial class Form1 : Form
    {
        // Hier kannst du globale Variablen deklarieren, so wie "List<Point> pointList;"
        public Form1()
        {
            InitializeComponent();
            // hier könntest du schon etwas code reinpacken, so wie "pointList = new List<Point>();"
        }

        
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            
          
            PointF[] Punkte={new Point(3,3),new Point(30,30), new Point(200,100)};
            {            
                    Punkte[0] = new Point(0,0);
                    Punkte[1] = new Point(0, 50);
                    Punkte[2] = new Point(20, 60);
                    e.Graphics.DrawPolygon(new Pen(Color.Violet), Punkte);
                    
            }
        }
        private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
        {
            Point P = new Point(e.X, e.Y);              // Punkte der Maus auslesen
            textBox1.Text = P.ToString();               // aktuellen Pkt. in TextBox
            

            // Du erstellst hier jedes mal eine neue Liste und überschreibst somit deine alte.
            // Du hast in der Liste hier also immer nur ein Punkt.#
            // Du könntest hier einer lokalen liste allerdings etwas hinzufügen, etwa so:
            // pointlist.Add(P);
            List<Point> PunkteListe = new List<Point>(); // List statt Array
            PunkteListe.Add(P);                         // Pkt. zur List hinzufügen
            
            DataGridViewComboBoxColumn DatenPunkte = new DataGridViewComboBoxColumn();
            DatenPunkte.DataSource = PunkteListe;
            
            pictureBox1.Invalidate();                   
            
        }

        private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
        {// empty method? 

        } 
                            
    }

vlt hilfts dir ;)

Coja - Di 10.08.10 10:52

Um die nächsten Probleme aufzuzeigen, möchte ich den derzeitigen Quelltext posten:

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

public partial class Form1 : Form
    {
        List<Point> PunkteListe;                // global verwendbar
        public Form1()
        {
            InitializeComponent();
            PunkteListe = new List<Point>(); // Init. für Liste
            
        }
        public void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
           e.Graphics.DrawPolygon(new Pen(Color.Violet), PunkteListe.ToArray());
        }
        private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
        {
            Point P = new Point(e.X, e.Y);              // Punkte der Maus auslesen
            textBox1.Text = P.ToString();               // aktuellen Pkt. in TextBox
            PunkteListe.Add(P);                         // Pkt. zur List hinzufügen
            textBox2.Text=PunkteListe.ToString();
            dataGridView1.DataSource = PunkteListe.ToString() ;         
            pictureBox1.Invalidate();                   
        }                           
    }

Zum einen wird ein Fehler ausgegeben bei der Konvertierung von PunkteListe zu einem Array (die Punkte in der List PunkteListe sollen zu einem Polydon gezeichnet werden).
Zum anderen möchte ich mir die Punkte in der List PunkteListe anzeigen lassen, hier in einer dataGridView. Leider werden die Koordianaten nicht angezeigt (ToString ist hier sicherlich nicht angebracht.
vg
Coja

Ralf Jansen - Di 10.08.10 14:31

Zitat:

Zum anderen möchte ich mir die Punkte in der List PunkteListe anzeigen lassen, hier in einer dataGridView. Leider werden die Koordianaten nicht angezeigt (ToString ist hier sicherlich nicht angebracht.

Genau. Darum lässt du ToString auch einfach weg. Die Leiste einfach so wie sie ist dataGridView1.DataSource zuweisen. Das zuweisen der Liste zu einer Textbox macht keinen Sinn das solltest du gleich ganz lassen.

Zitat:

Zum einen wird ein Fehler ausgegeben bei der Konvertierung von PunkteListe zu einem Array (die Punkte in der List PunkteListe sollen zu einem Polydon gezeichnet werden).

Wo bekommst du denn Fehler und welchen genau? Der gezeigte Aufruf von DrawPolygon sieht für mich richtig aus.

Necaremus - Di 10.08.10 15:34

List<T>.ToString() ist immer eine schlechte idee^^
rattere lieber mit ner foreach durch die liste...

C#-Quelltext

1:
2:
3:
4:

StringBuilder sb = new StringBuilder();
foreach (var v in PunkteListe)
    sb.Append(String.Format("X:{0} Y:{0}\r\n", v.X, v.Y));
textBox2.Text = sb.ToString();

mit dem datagrid wirst du es hoffentlich dann selber hinbekommen ;)

Ralf Jansen - Di 10.08.10 15:58

Zitat:

also Fehler beim Aufruf von PunkteListe.ToArray() wird folgender angezeigt:
ArgumentException wurde nicht behandelt (die Zeile wird gelb hinterlegt).

Du versuchst wahrscheinlich ein Polygon zu zeichnen wenn noch gar keine Punkte in der Liste sind. Ein Polygon besteht (logischerweise) mindestens aus 2 Punkten. Also erst zeichnen wenn du auch zumindest 2 Punkte in der Liste hast.

Zitat:

Leider werden immer nur die Koordinaten des zuerst angklickten Punktes in der DataGridView angezeigt (nicht der aktuelle und auch keine Liste).

Du solltest aus List<Point> eine BindingList<Point> machen. BindingList hat gegenüber List den Vorteil das sich die per DataBinding dranhängenden Controls automatisch aktualisieren wenn sich der Inhalt ändert. Ansonsten verhalten sich List und BindingList weitestgehend gleich.

Die Zuweisung 'dataGridView1.DataSource = PunkteListe;' kannst du übrigens im Konstruktor nach erzeugen der PunkteListe erledigen mußt du nicht jedes mal beim Click machen.

Coja - Di 10.08.10 22:35

Hallo,
Vielen Dank euch beiden. Jetzt hab ich -dank euch- schon mal eine erste Hürde genommen. Achja: Ich bin ein totaler Anfänger in C#, habt ihr sicherlich schon gemerkt ;-)
Danke der BindingList läuft es jetzt schonmal.
Nun möchte ich, dass man die Punkte/Geraden entweder durch klicken (Keys-Befehl) auf die jeweilige Gerade(da muss man sicherlich Interpolieren und einen Toleranzbereich angeben) oder (besser und wahrscheinlich einfacher) direkt in der Liste ändern kann (also auch Löschen und hinzufügen/.add ).

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:

 public partial class Form1 : Form
    {
        BindingList<Point> PunkteListe;                // global verwendbar
        public Form1()
        {
            InitializeComponent();
            PunkteListe = new BindingList<Point>(); // Init. für Liste
            dataGridView1.DataSource = PunkteListe;  
        }
        public void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            
            if (PunkteListe.Count >= 2)
            {
                e.Graphics.DrawLines(new Pen(Color.FromArgb(255,240,250,0)), PunkteListe.ToArray());
               
            }
            pictureBox1.Invalidate();         
        }
        private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
        {
            Point P = new Point(e.X, e.Y);              // Punkte der Maus auslesen
            textBox1.Text = P.ToString();               // aktuellen Pkt. in TextBox
            PunkteListe.Add(P);                         // Pkt. zur List hinzufügen
            textBox2.Text=PunkteListe.ToString();
                  
            pictureBox1.Invalidate();
                       
            // für TextBox2 (ggf. nicht relevant, da Datgridview1 besser)
            StringBuilder sb = new StringBuilder(); // für Textbox
            foreach (var v in PunkteListe)
                sb.Append(String.Format("X:{0} Y:{0}\r\n", v.X, v.Y));
            textBox2.Text = sb.ToString();
            //dataGridView1.Invalidate();
           
        }                            
    }

Anstatt des Polygons habe ich einen Linienverbund genommen. Wenn ich den letzten Punkt in der Liste gleich dem 1. setze, hab ich ja dann eine geschlossene Fläche.
Welcher Befehl erlaubt mir das Ändern in der Liste?
Nachdem das zeichnen dann beendet ist, möchte ich einen Algorithmus laufen lassen, der mir etwas in die pictureBox zeichnet, wo muss ich den Coe dafür unterbringen?

vg
Coja

Ralf Jansen - Mo 16.08.10 11:54

Ein Point ist ein struct(valuetype). Ich habe Vorstellungsprobleme das man mit structs sauber Databinding betreiben kann. Bevor die Daten im Grid gelandet sind sind die Points vermutlich längst mehrmals kopiert worden so das du im Grid nur noch auf einer Kopie arbeitest. Ich vermute du musst, wenn du im Grid bearbeiten willst, deine Liste von Points in eine Liste irgendeiner anderen Klasse (nicht struct) umwandeln und dann, bei Zeiten, diese Liste wieder in eine Liste von Points zurück wandeln um sie als Polygon zu zeichnen.

Ralf Jansen - Mo 16.08.10 16:34

Kompliziert ist relativ. Erzeuge dir ein Klasse die Point entspricht aber eben kein struct ist.

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

public class MyPoint
{
    public int X { get; set; }
    public int Y { get; set; }

    public MyPoint(int x, int y)
    {
        X = x;
        Y = y;
    }

    public static explicit operator Point(MyPoint obj)
    {
        return new Point(obj.X, obj.Y);
    }
}

Diese benutzt du überall dort wo du bisher Point benutzt hast anstelle von Point. Außer dort wo du zeichnest weil DrawLines ja zwingend ein Point Array möchte.
Dort müsstest du einmal umwandeln. z.b. so

C#-Quelltext

1:	e.Graphics.DrawLines(new Pen(Color.FromArgb(255,240,250,0)), PunkteListe.Select(p => (Point)p).ToArray());

Unter der Annahme das PunkteListe eine Bindinglist<MyPoint> war.

Coja - Di 17.08.10 14:50

Hallo Ralf,
danke für die sehr hilfreiche Antwort. Jetzt kann ich sogar beliebige Punkte löschen und ändern;)
Leider meckert das Programm nicht rum ,wenn ich Buchstaben in die DataGridView eingebe (anstelle von Integern) und auch bei zu großen Integern(also größere Pixelwerte als die PictBox hängt sich das Programm auf.
Ich muss also die Eingabe überprüfen.

C#-Quelltext

1:
2:
3:
4:
5:
6:

private void dataGridView1_CellValueChanged(object sender, DataGridViewCellEventArgs e)
        {
            NeuPoint NP1= new NeuPoint(e.ColumnIndex, e.RowIndex);
            textBox2.Text = "Spalte: " +NP1.NeuX.ToString()+"  Zeile: "+NP1.NeuY.ToString();
            // if(NP1.GetType()=...)
        }

Mit dem obigen Code lasse ich mir die Indices von der aktuell geänderten Zelle anzeigen. Nun müsste ich nur überprüfen ob die Eingabe gültig ist:
einmal eine If-Anweisung für den Typ (Integer)
und einmal für die Größe des x- bzw. y-Wertes ( pictureBox1.Height bei Spalte 0-> Wert ist x-Maximum und pictureBox1.Width bei Spalte 1-> Wert ist y-Maximum)

Vll. gibt es aber noch eine elegantere Art durch ein bestimmtes Ereignis. Kannst du mir da weiterhelfen?
vg
Coja

Ralf Jansen - Di 17.08.10 15:24

CellValueChanged ist auf jeden Fall zu spät um abzubrechen wenn der Wert ungültig ist.
Ich würde entweder den CellValidating oder RowValidating Event vorschlagen. Dort kannst du abbrechen(e.Cancel setzen) wenn der Wert ungültig ist.
Beispiel

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:

private void dataGridView1_CellValidating(object sender, DataGridViewCellValidatingEventArgs e)
{
    int result;
    e.Cancel = (!int.TryParse(e.FormattedValue as string, out result) ||          
               (result < 0) || 
               (result > 500));  // hier noch die tatsächliche Größe ermitteln und verwenden und nicht einfach 500*500 annehmen 
}

Coja - Mi 18.08.10 14:01

Hallo Ralf,
ich habs mit CellValidating gemacht und lasse mir den Fehler bisher in einer TextBox anzeigen (MessageBox startet irgendwie nicht, aber das bekomm ich (hoffentlich) noch hin ;)
Nun möchte ich das Koordinatensystem in die linke untere Ecke verlegen. Das hab ich auch geschafft:

C#-Quelltext

1:
2:

e.Graphics.TranslateTransform(0,pictureBox1.Size.Height);
    e.Graphics.ScaleTransform(1, -1);

Die y-Werte werden jedoch noch gespiegelt gezeichnet (also wenn ich unten klicke wird oben gezeichnet) und in der Liste werden die Koordinaten auch noch falsch angezeigt.
Ich würde gerne in der Funktion MyPoint/NeuPoint unterbringen, dass:
y_neu=pictureBox1.size.Heigth-y_click
ist ( Dann müssten ja alle Werte in dem neuen Koordinatensystem dargestellt werden. (?) )
Leider kann ich die PictureBox Eigenschaften nicht in meiner Funktion aufrufen, was muss ich da ändern (welche Rechte,..)
vg
Coja

Coja - Fr 20.08.10 11:00

Hallo,
so hab das Problem jetzt mit eine globalen Definition gelöst, danke Kha.
Das Koordinatensystem liegt jetzt in der linken unteren Ecke:

C#-Quelltext

1:
2:
3:

  PicBoxHoehe = pictureBox1.Size.Height;
            e.Graphics.TranslateTransform(0, PicBoxHoehe);
            e.Graphics.ScaleTransform(1, -1);

Ich hab zwei Achsen einzecihnen lassen und mit x und y beschriftet. Leider ist der TExt gedraht (also beim y fällts auf).
Außerdem wird die x-Achse jetzt nicht mehr angezeigt. Die Bildfläche der PictureBox scheint kleiner zu sein, denn wenn ich mit Maus mich an den unteren Rand bewege, bleibt der Y-Wert bei 5 Pixel stehen und geht nicht auf Null. Woran kann das liegen?
Bevor das Koordinatensytem gedreht wurde hat es noch funktioniert. Den Mauswert berechne ich nun mit:

C#-Quelltext

1:	NeuPoint P = new NeuPoint(e.X,PicBoxHoehe- e.Y);

vg
Coja

Coja - Sa 28.08.10 21:34

So, die Bildlaufleisten hab ich jetzt auch so grob hinbekommen. Eine Sach quält mich jedoch noch, die eieentlich einfach klingt:
In meinem Panel muss ich zum Zeichnen die Y-Werte noch Spiegeln. dass heißt:
y_neu=Panelhöhe-y_alt
Die x-Werte bleiben erhalten. Also muss ich dies beim Zeichnenbefehl noch angeben:

C#-Quelltext

1:	e.Graphics.DrawLines(new Pen(Color.FromArgb(255,240,250,0)), PunkteListe.Select(p => (Point)p).ToArray());

Ich brauch also nur zu wissen, wie ich in meine PunkteListe

C#-Quelltext

1:	BindingList<Point> PunkteListe;

alle y-Werte neusetzen kann und zwar mit der o.g. Vorschrift.
vg
Coja

Yogu - Sa 28.08.10 22:09

Vielleicht gibt es einen einfacheren Weg direkt mit BindingList (ich hab damit noch nicht gearbeitet), aber das hier müsste klappen:

C#-Quelltext

1:
2:
3:
4:
5:
6:

Point[] points = PunkteListe.Select(p => (Point)p).ToArray();
for (int i = 0; i < points.Length; i++) {
  points[i] = new Point(points[i].X, Panelhöhe - points[i].Y;
}

e.Graphics.DrawLines(new Pen(Color.FromArgb(255,240,250,0)), points);

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2025 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!