Motivation

Das PictureBox-Steuerelement, genauer das bei dessen Paint-Ereignis oder in der Methode OnPaint() übergebene Graphics-Objekt (Feld im Parameter PaintEventArgs), ist über geometrische Transformationen (TranslateTransform() und weitere, Matrix) in der Lage eine Skalierung vorzunehmen. Hierbei werden jedoch auch die Breite das Zeichen-Objekt Pen bei Vergrößerungen (ScaleTransform()) mit transformiert. Wenn man eine echte Vergrößerung der Grafik möchte, ist dies das korrekte Verhalten. Hat man aber z.B. eine Messwert-Kurve, möchte man zwar bei einer Vergrößerung die X- und Y-Achse strecken, aber nicht die Liniendicke der Messkurve. Gleiches gilt für Markierungen (z.B. kleine Quadrate, die man an den Linien anbringt. Und zuletzt vergesse ich immer wieder, wie das mit der Skalierung funktioniert ...

Das Steuerelement UrsScaledPictureBox schafft Abhilfe, wie die folgenden Grafik zeigt:

Die Box hat einen Vergrößerungsfaktor von 50. Beide Linien sind mit einem Pen der Dicke 3 gezeichnet. Bei der grünen Linie wurde Graphics.ScaleTransform() verwandt und anschließend mit Graphics.DrawLine() gezeichnet. Sie wurde mit vergrößert.

Die rote Linie wurde mit UrsScaledPictureBox .Drawline() gezeichnet und hat die Liniendicke behalten.

Ein anderes Beispiel zeigt die folgende Bilderfolge. Die Achsen wurden skaliert ohne die Strichdicke oder die Größe der Markierungen zu ändern.

Download

Verwendung

Im Wesentlichen handelt es sich bei der UrsScaledPictureBox um eine von PictureBox abgeleitete und erweiterte Klasse. Es stehen Methoden zur Skalierung, zum Zeichnen, für Transformationen und weitere Ereignisse (Events) zur Verfügung. Weitere Methoden lassen sich relativ einfach ergänzen (siehe unten).

Methoden zur Skalierung

Zur Steuerung der Skalierung wurden folgende Eigenschaften hinzugefügt:

Eigenschaft	Funktion	Anmerkung
Origin As PointF	Ruft den Ursprung des skalierten Koordinatensystems ab oder legt ihn fest.	Änderungen lösen das Ereignis ScaleChanged aus.
ScaledSize As SizeF	Ruft die skalierte Größe der UrsScaledPictureBox ab oder legt sie fest.	Änderungen lösen das Ereignis ScaleChanged aus.
ScaledRight As Single	Ruft die X-Koordinate des rechten oberen Eckpunkts ab.	Es handelt sich um die skalierte Koordinate.
ScaledTop As Single	Ruft die Y-Koordinate des rechten oberen Eckpunkts ab.	Es handelt sich um die skalierte Koordinate.
TransformMatrix As Drawing2D.Matrix	Ruft eine Kopie der geometrischen globalen Transformationsmatrix ab, die für die Skalierung bei den in dieser Klasse definierten Zeichenfunktionen genutzt wird.	ReadOnly
DrawCoordinates As Boolean	Ruf einen Wert ab, der angibt, ob im Design-Modus die Koordinaten der Eckpunkte eingeblendet werden, oder legt ihn fest.	True, wenn die Koordinaten eingeblendet werden sollen, ansonsten False.
ScalingMode as ScalingModes	Legt das Verhalten bei Größenänderungen fest.	Zoom: Die skalierte Größe bleibt unverändert. Die Zeichnung wird vergrößert oder verkleinert. Extend: Die skalierte Größe ändert sich proportional zur Größe der Box. Die Zeichnung behält ihre Größe. Die Wertebereich der Achsen der Box vergrößert bzw. verkleinert sich.

Die Funktion von DrawCoordinates:
(X und Y sind unterschiedlich skaliert)

Ereignisse (Events)

Folgendes Ereignis wurde hinzugefügt:

Ereignis	Funktion
ScaleChanged As EventHandler	Wird ausgelöst, wenn sich der Wert der ScaledSize- oder der Origin-Eigenschaft ändert.

Zeichnungsmethoden (Draw...)

Die implementierten Zeichenmethoden, jeweils analog zu den entsprechenden Methoden der Graphics-Klasse, sind:

Methode	Wirkung	Anmerkung
DrawLine	Zeichnet eine verbindende Linie zwischen zwei Point-Strukturen.	Beide Punkte werden transformiert.
DrawLines	Zeichnet eine Reihe von Liniensegmenten, die ein Array von Point-Strukturen verbinden.	Sämtliche Punkte werden transformiert.
DrawCurve	Zeichnet eine Cardinal-Splinekurve durch ein angegebenes Array von Point-Strukturen.	Sämtliche Punkte werden transformiert.
DrawRectangle	Zeichnet ein Rechteck, das durch ein Koordinatenpaar, eine Breiten- und eine Höhenangabe angegeben ist.	Der Ursprung wird transformiert, Breite und Höhe bleiben erhalten.
FillRectangle	Füllt das Innere eines Rechtecks, das durch ein Koordinatenpaar, eine Höhen- und eine Breitenangabe angegeben ist.	Der Ursprung wird transformiert, Breite und Höhe bleiben erhalten.
DrawEllipse	Zeichnet eine Ellipse, die durch ein umschließendes Rechteck definiert ist, das durch Koordinaten für die obere linke Ecke des Rechtecks, eine Höhen- und eine Breitenangabe angegeben ist.	Der Ursprung wird transformiert, Breite und Höhe bleiben erhalten.
FillEllipse	Füllt das Innere einer Ellipse, die durch ein umschließendes Rechteck definiert ist, das durch ein Koordinatenpaar, eine Höhen- und eine Breitenangabe angegeben ist.	Der Ursprung wird transformiert, Breite und Höhe bleiben erhalten.

Transformationen

Typ	Member	Funktion
PointF	Transform(x As Single, y As Single)	Erstellt aus den angegeben skalierten Koordinaten ein PointF-Objekt in Pixel-Koordinaten.
Point	Transform(x As Integer, y As Integer)	Erstellt aus den angegeben skalierten Koordinaten ein Point-Objekt in Pixel-Koordinaten.
PointF	Transform(x As Double, y As Double)	Erstellt aus den angegeben skalierten Koordinaten ein PointF-Objekt in Pixel-Koordinaten.
PointF	Transform(pt As PointF)	Erstellt aus einem PointF-Objekt in skalierten Koordinaten eines in Pixel-Koordinaten.
Point	Transform(pt As Point)	Erstellt aus einem Point-Objekt in skalierten Koordinaten eines in Pixel-Koordinaten.
PointF()	Transform(pts As PointF())	Erstellt aus einem PointF-Array in skalierten Koordinaten eines in Pixel-Koordinaten.
Point()	Transform(pts As Point())	Erstellt aus einem Point-Array in skalierten Koordinaten eines in Pixel-Koordinaten.
RectangleF	Transform(rct As RectangleF)	Erstellt aus einem RectangleF-Objekt in skalierten Koordinaten eines in Pixel-Koordinaten.
Rectangle	Transform(rct As Rectangle)	Erstellt aus einem Rectangle-Objekt in skalierten Koordinaten eines in Pixel-Koordinaten.
Single	TransformScaledWidthToPixelWidth	Transformiert eine horizontale Länge (Weite) in skalierten Werte in eine solche mit Pixel-Werten. Horizontale Längen (Weiten) und vertikale Längen (Höhen) haben unterschiedliche Skalierungsfaktoren!
Single	TransformScaledHeightToPixelHeight	Transformiert eine vertikale Länge (Höhe) in skalierten Werte in eine solche mit Pixel-Werten. Horizontale Längen (Weiten) und vertikale Längen (Höhen) haben unterschiedliche Skalierungsfaktoren!
Single	TransformPixelWidthToScaledWith	Transformiert eine horizontale Länge (Weite) in Pixel in eine solche mit skalierten Werten. Horizontale Längen (Weiten) und vertikale Längen (Höhen) haben unterschiedliche Skalierungsfaktoren!
Single	TransformPixelHeightToScaledHeight	Transformiert eine vertikale Länge (Höhe) in Pixel in eine solche mit skalierten Werten. Horizontale Längen (Weiten) und vertikale Längen (Höhen) haben unterschiedliche Skalierungsfaktoren!
PointF	InversTransform(pt As PointF)	Erstellt aus einem PointF-Objekt in Pixel-Koordinaten eines in skalierten Koordinaten.

Detail zur Programmierung

Zur Implementierung der beschrieben Funktionen überschreibt span class="symbol"> UrsScaledPictureBox die OnPaint-Methode der Basis-Klasse PictureBox. Dort wird

eine Referenz auf das Graphics-Objekt für die spätere Verwendung zwischengespeichert,
die für die skalierte Ausgabe notwendige Transformationsmatrix wird berechnet,
die Original-Funktion aufgerufen und damit das Paint-Ereignis ausgelöst und
zuletzt bei Bedarf die Koordinaten in die Grafik gezeichnet.

- Code verbergen | + Code anzeigen

''' <summary>
''' Löst das Paint-Ereignis aus.
''' </summary>
''' <param name="pe">Ein PaintEventArgs, das die Ereignisdaten enthält. </param>
''' <seealso cref="PictureBox.OnPaint(PaintEventArgs)"/>
Protected Overrides Sub OnPaint(pe As PaintEventArgs)
   If Not DesignMode Then 'macht problem im Designmode
      ComputeTransformMatrix()
   End If
   mGraphics = pe.Graphics

   MyBase.OnPaint(pe)

   pe.Graphics.ResetTransform()

   ' Koordinaten im Design-Modus einzeichnen
   If DesignMode AndAlso DrawCoordinates Then
      mGraphics.DrawString(Origin.ToString, SystemFonts.DialogFont, Brushes.Brown, 5, Height - 20)

      Dim s As String = "{Width=" & mScaledSize.Width & "}"
      Dim sz = mGraphics.MeasureString(s.ToString, SystemFonts.DialogFont)
      mGraphics.DrawString(s, SystemFonts.DialogFont, Brushes.Brown, Width - sz.Width - 5, Height - sz.Height - 5)

      s = "{Height=" & mScaledSize.Height & "}"
      sz = mGraphics.MeasureString(s.ToString, SystemFonts.DialogFont)
      mGraphics.DrawString(s, SystemFonts.DialogFont, Brushes.Brown, 5, 5)

      s = "{X=" & mScaledSize.Width + mOrigin.X & ", Y=" & mScaledSize.Height + mOrigin.Y & "}"
      sz = mGraphics.MeasureString(s.ToString, SystemFonts.DialogFont)
      mGraphics.DrawString(s, SystemFonts.DialogFont, Brushes.Brown, Width - sz.Width - 5, 5)
   End If
End Sub

Die Berechnung der Transformationsmatrix ist nicht besonders schwierig. Zu beachten ist allerdings, dass sich die Nettogröße des Zeichenbereichs (ClientRectangle) zur Skalierung genutzt werden muss.

- Code verbergen | + Code anzeigen

''' <summary>
''' Berechnet die Tranformationsmatrix
''' </summary>
Private Sub ComputeTransformMatrix()
   With ClientRectangle

      Dim mx = .Width / mScaledSize.Width ' Skalierung X
      Dim my = -.Height / mScaledSize.Height ' Skalierung Y

      mTransformMatrix = New Drawing2D.Matrix
      mTransformMatrix.Translate(-mOrigin.X, -mOrigin.Y) ' Skalierte linke untere Ecke auf skaliert (0 | 0)
      mTransformMatrix.Scale(mx, my, Drawing2D.MatrixOrder.Append) ' Skalierung auf Control-Größe
      mTransformMatrix.Translate(0, .Height - 1, Drawing2D.MatrixOrder.Append) ' Bezugspunkt ist links unten 
                                                                               '(anstatt links oben)
   End With
End Sub

Die Zeichen-Methoden erfolgen alle nach dem gleichen Muster:

Transformationsmatrix des Graphics-Objekts sichern
Transformationsmatrix des Graphics-Objekts löschen
Betroffene Koordinaten transformieren
Original-Zeichenmethode mit den transformierten Koordinaten aufrufen
Transformationsmatrix des Graphics-Objekts wiederherstellen.

Zu beachten ist, dass Arrays als Referenz übergeben werden. Hier muss die Transformation an einer Kopie des Arrays ausgeführt werden (Clone-Methode).

- Code verbergen | + Code anzeigen

''' <summary>
''' Zeichnet eine Reihe von Liniensegmenten, die ein Array von PointF-Strukturen verbinden.
''' </summary>
''' <param name="Pen">Pen, der die Farbe, Breite und den Stil der Liniensegmente bestimmt.</param>
''' <param name="points">Array von PointF-Strukturen, die die zu verbindenden Punkte darstellen.</param>
''' <seealso cref="Graphics.DrawLines(Pen, PointF())"/>
Public Sub DrawLines(Pen As Pen, points As PointF())
   Dim tmpMatrix = mGraphics.Transform
   mGraphics.ResetTransform()
   Dim pts = points.Clone
   mTransformMatrix.TransformPoints(pts)
   mGraphics.DrawLines(Pen, pts)
   mGraphics.Transform = tmpMatrix
End Sub