Geraden bei Klick in PictureBox zeichnen

Coja · Beiträge: 26

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]

Einloggen, um Attachments anzusehen!

Th69 · Verfasst: Fr 06.08.10 15:22

Bitte poste deinen Code direkt hier in das Forum (mittels der [ cs ] ... [ /cs ] Tags (ohne Leerzeichen)!).

Coja · Beiträge: 26

Hallo, mach ich

ich hoffe es ist so richtig:

markieren

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 · Verfasst: 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: www.mycsharp.de/wbb2...d.php?threadid=21782 (falls du es noch nicht kennst -)

Coja · Beiträge: 26

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:

markieren

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 · Verfasst: Mo 09.08.10 11:01

markieren

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 · Beiträge: 26

Danke Necaremus,
das hilft mir schonmal ein wenig weiter, ich dachte man muss dies über public bzw. private regeln.
Hab meinen Code mal dementsprechend angepasst, aber leider sind da noch Fragen offen (s.o.)..

Coja · Beiträge: 26

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

markieren

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 · Verfasst: 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.

Coja · Beiträge: 26

Hallo Ralf,
danke für den Hinweis.
Leider werden immer nur die Koordinaten des zuerst angklickten Punktes in der DataGridView angezeigt (nicht der aktuelle und auch keine Liste).
also Fehler beim Aufruf von PunkteListe.ToArray() wird folgender angezeigt:
ArgumentException wurde nicht behandelt (die Zeile wird gelb hinterlegt).
vg
Coja

Necaremus · Verfasst: Di 10.08.10 15:34

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

markieren

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 · Verfasst: 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 · Beiträge: 26

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 ).

markieren

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

Coja · Beiträge: 26

Hallo,

ich möchte die Werte in meiner DataGridView ändern, also auch löschen/hinzufügen können. Könnt ihr mir einen Ansatz geben, wie das geht? (Markieren kann man ja die Werte in der DataGridView, aber leider nicht bearbeiten).
?

Vg
Coja

Ralf Jansen · Verfasst: 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.

Coja · Beiträge: 26

Hallo Ralf,
danke für die Anmerkung.
Also müsste ich meine PunkteListe zum Beispiel in ein Int-Array oder eine Int-Liste umwandeln und sie mir anzeigen lassen? Dann könnte ich die Werte ändern und z.B. per Button-Klick die Werte wirder als PunkteListe abspeichern und eine Neuzeichnung vornehmen?
Das klingt ziemlich umständlich und kompliziert

Vielleicht gibts noch einen einfacheren Weg?
vg
Coja

Ralf Jansen · Verfasst: Mo 16.08.10 16:34

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

markieren

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

markieren

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 · Beiträge: 26

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.

markieren

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 · Verfasst: 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

markieren

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 · Beiträge: 26

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:

markieren

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

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme