[Tutorial] Gezeichnete Objekte mit der Maus verschieben

Vielen Dank an die Poweruser fürs Probelesen!

In seinem Tutorial  Zeichnen in Windows-Programmen (Paint/OnPaint, PictureBox) hat herbivore beschrieben, wie man in einer Windows-Anwendung zeichnen sollte.
Ich möchte das ganze jetzt weiterführen und erklären, wie man mit Hilfe der Maus gezeichnete Objekte, wie Rechtecke, Linien und Kreise, verschieben und verändern kann.
Das ganze basiert auf herbivore's Anleitung, die man also gelesen haben sollte.

Wie finde ich heraus, ob die Maus über einem gezeichneten Objekt ist?

Dafür kann man die Klasse GraphicsPath im System.Drawing.Drawing2D-Namespace verwenden. Diese speichert geometrische Figuren in Form von Linien und Kurven zwischen bestimmten Punkten.
Wir fügen der MyGraphicObject-Basisklasse eine Eigenschaft für den GraphicsPath hinzu:

C#-Code:

GraphicsPath _path; protected GraphicsPath Path {     get { return _path; } }

Mit der Methode IsOutlineVisible kann man feststellen, ob ein angegebener Punkt auf der Linie, die das Objekt umgibt, liegt, wenn man diese mit dem angegebenen Pen-Objekt gezeichnet hat.
Dazu fügen wir der Basisklasse eine Methode Hit hinzu:

C#-Code:

public virtual bool Hit(Point pt) {     return Path.IsOutlineVisible(pt, _pen); }

Wenn man diese Methode so verwendet, fällt einem schnell auf, wie schwer es ist, die Maus genau so über eine Linie zu bewegen, dass Hit true zurückgibt. Deswegen behaupten wir nun die Linie mit einem dickeren Pen-Objekt gezeichnet zu haben. Dann ist der Bereich, in den man die Maus bewegen muss um true zu erhalten um einiges größer.
Für die IsOutlineVisible-Methode wird nur die Breite des angegebenen Pen-Objekts verwendet, somit ist die Farbe irrelevant. Als Breite habe ich mit dem Wert 4 ganz gute Ergebnisse erzielt. Am besten spielt man mit dem Parameter ein bisschen rum, um das gewünschte Ergebnis zu erzielen.

C#-Code:

Pen _hitTestPen = new Pen(Brushes.Black, 4); public virtual bool Hit(Point pt) {     return Path.IsOutlineVisible(pt, _hitTestPen); }

Ob ein Punkt innerhalb eines Objekts liegt, kann man mit Hilfe der IsVisible-Methode herausfinden.
Ich habe der Beispielanwendung auch eine Methode Contains hinzugefügt, diese spielt für den Rest aber keine Rolle mehr:

C#-Code:

public virtual bool Contains(Point pt) {     return Path.IsVisible(pt); }

Woher bekomme ich für meine Objekte einen GraphicsPath?

Die GraphicsPath-Klasse bietet verschiedene Methoden an (beginnen alle mit "Add" , z.B. AddLine oder AddRectangle), mit denen man geometrische Objekte, z.B. Rechteck, Ellipse, zu dem Pfad hinzufügen kann.
Anstatt sich bei jedem MyGraphicObject die Daten als Koordinaten, Rectangle-Struktur oder Ähnlichem zu merken, fügt man sie zu einem GraphicsPath hinzu.
Hier z.B. die Änderung am Konstruktor von herbivore’s MyRectangle-Klasse:

C#-Code:

public MyRectangle(Pen pen, Rectangle rect) : base (pen) {     Path.AddRectangle(rect); }

Ist das mit dem GraphicsPath nicht viel komplizierter?

Nein, ist es nicht. Im Gegenteil: Da man nicht mehr lauter einzelne Strukturen und Integer-Variablen braucht, um die Angaben zu den einzelnen Objekten zu speichern, geht einiges viel leichter.
Bei herbivore’s Beispielanwendung mussten noch alle Objekte die Draw-Methode der Basisklasse implementieren. Dies ist nun nicht mehr nötig, da man schon in der Basisklasse den GraphicsPath zeichnen kann:

C#-Code:

public virtual void Draw(Graphics g) {     g.DrawPath(_pen, _path); }

Auch Hit und Contains können direkt in der Basisklasse implementiert werden. Das Verschieben wird auch um einiges erleichtert, da man einen GraphicsPath ganz einfach mit einer Matrix transformieren kann. So arbeitet auch die Move-Methode, die wir der Basisklasse hinzufügen:

C#-Code:

public virtual void Move(int deltaX, int deltaY) {     Matrix mat = new Matrix();     mat.Translate(deltaX, deltaY);     _path.Transform(mat); }

Und wie kann ich jetzt ein Objekt mit der Maus verschieben?

Dazu brauchen wir folgende Maus-Ereignisse unseres Formulars: MouseDown, MouseMove und MouseUp.
Das Verschieben läuft nun wie folgt ab:

• Im MouseDownEventHandler testen wir, ob die Maus sich auf einem Objekt befindet. Wenn ja merken wir es uns und auch die Position der Maus.
  
• Im MouseMoveEventHandler prüfen wir zuerst, ob wir uns ein Objekt zum Verschieben gemerkt haben (sprich, ob wir im Moment ein Objekt verschieben wollen). Wenn dies der Fall ist, rechnen wir den Unterschied zwischen der aktuellen Maus-Position und der letzten aus und verschieben das Objekt um diese Differenz. Dann speichern wir die Maus-Position als die letzte und zum Schluss lassen wir das Formular noch neu zeichnen, damit die Änderungen auch sichtbar werden.
  
• Im MouseUpEventHandler setzen wir einfach die Variable, in der wir das Objekt zum Verschieben speichern, gleich null.

Lange Rede, kurzer Sinn: Hier ist der Code dazu:

C#-Code:

Point _lastMouseLocation; MyGraphicObject _movingGraphicObject; protected override void OnMouseDown(MouseEventArgs e) {     base.OnMouseDown(e);     // Wenn die Maus außerhalb der Zeichenfläche gedrückt wurde, wird abgebrochen.     if (!_canvas.Contains(e.Location)) return;     // Anderenfalls wird die Liste mit den gezeichneten Objekten von hinten (damit     // das oberste Objekte gefunden wird) durchgegangen und geprüft, über welchem     // Objekt die Maus sich befindet.     for (int i = _graphicObjects.Count - 1; i >= 0; i--) {         MyGraphicObject go = _graphicObjects[i];         if (go.Hit(e.Location)) {             _movingGraphicObject = go;             break;         }     }     _lastMouseLocation = e.Location; } protected override void OnMouseMove(MouseEventArgs e) {     base.OnMouseMove(e);     if (_movingGraphicObject != null) {         // Wenn gerade ein Objekt verschoben werden soll, wird die Differenz zur letzten         // Mausposition ausgerechnet und das Objekt um diese verschoben.         _movingGraphicObject.Move(e.X - _lastMouseLocation.X, e.Y - _lastMouseLocation.Y);         _lastMouseLocation = e.Location;         // Hier könnte man noch optimieren, indem man immer nur den Bereich         // neuzeichnet, in dem das Objekt bewegt wurde.         this.Invalidate();     } } protected override void OnMouseUp(MouseEventArgs e) {     base.OnMouseUp(e);     _movingGraphicObject = null; }

Funktioniert das auch für Text?

Ja. Die GraphicsPath-Klasse besitzt eine Methode AddString. Dabei wird der angegebene Text in Linien und Kurven umgewandelt, die in dem Pfad gespeichert werden. Dabei werden auch unterschiedliche Schriftarten sowie Stile (fett, kursiv, usw.) berücksichtigt.
Wir fügen dem Beispiel eine Klasse MyText hinzu. Nun müssen wir einige Implementierungen der Basisklasse verändern:

• Draw: Bei den anderen Objekten haben wir nur die Linie gezeichnet, die das Objekt umgibt (z.B. die Kreislinie). Das kann man bei Text auch machen und bekommt dann eine Outline-Schrift. Hier wollen wir aber den Text normal (also ausgefüllt) zeichnen und verwenden daher FillPath statt DrawPath. Wenn man beides kombinieren würde, könnte man z.B. eine blau gefüllte Schrift mit einer schwarzen Umrandung zeichnen.
  
  

  C#-Code:

  public override void Draw(Graphics g) {     g.FillPath(Pen.Brush, Path); }

  
  
• Hit: Wir überfahren die Schrift nicht nur, wenn wir die Maus über die Linie bewegen, sondern auch, wenn wir uns über dem Inneren befinden. Das heißt Hit sollte nun true zurückliefern, wenn die Maus sich entweder über der Linie oder über dem Inneren befindet:
  
  

  C#-Code:

  public override bool Hit(Point pt) {     return Contains(pt) || base.Hit(pt); }

Wie kann ich das Zeichnen optimieren, wenn der Bildaufbau beim Verschieben zu langsam ist?

Eine z.T. erhebliche Beschleunigung der Zeichnung lässt sich erreichen, wenn pro Zeichenvorgang nicht das gesamte Control neu gezeichnet wird, sondern nur die Bereiche, wo sich tatsächlich Zeichnungsobjekte befinden bzw. nur die Bereiche, die sich überhaupt geändert haben. Dieses Konzept wird im Snippet  "Gezieltes OwnerDrawing" - schnelles Zeichnen bewegter Objekte von ErfinderDesRades umgesetzt.

Ende

Dieser Artikel zeigt eine Methode auf, mit der man mit Hilfe der Maus mit gezeichneten Objekten interagieren kann.

Wer sich weiter mit dem Thema beschäftigen möchte, sollte mal ein Blick auf folgende Diskussionen aus diesem Forum werfen:
-  Linie wie bei einem Bildbearbeitungsprogramm
-  DrawLine -> Enden verschieben