Drawing graphics Text when using unequal scaletransform.

Question

Here is a problem that pops up when drawing.
There are many times we need to draw using a separate scale for the x and y axis. Like a graph that ranges x = 0 to 100 and y = 0 to 10.
The
graphics.scaletransform method allows us to set the two scales and draw easily. But a problem occurs with the pen width. It only has one dimension. So it will be a different size in the x direction from the y direction. You can see in the image the green
vertical line is a constant width and the horz green line is changing widths. The diagonal lines and ellipse are way to wide as well. And look at the text! It is changing size too.
I just discovered there is a scaletransform for the pen and using that solves the problem for the lines as shown in the code and image below.
As you can see the text has a similar problem. Does anyone have a solution for sizing text?
Here is the code example.
Public Class Form3
Private Sub Form3_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
Dim sx, sy, theScalex As Single
Dim w As Integer = Me.ClientSize.Width
Dim h As Integer = Me.ClientSize.Height
Dim theScaley As Single = 20
Dim display As String
sy = h / theScaley
With e.Graphics
Using p As New Pen(Brushes.Red)
.Clear(Color.Black)
For y As Single = 1 To theScaley Step 5
theScalex = theScaley / 5 * y
sx = (w / theScalex)
.ResetTransform()
.ScaleTransform(sx, sy)
.TranslateTransform(theScalex / 2, y)
p.Width = theScalex / 100
'add this to make the line widths same size x and y directions
p.ScaleTransform(1 / theScalex, 1 / theScaley)
p.Color = Color.Red
.DrawLine(p, 0, 0, theScalex / 5, theScaley / 5)
p.Color = Color.Green
.DrawLine(p, 0, 0, theScalex / 5, 0)
.DrawLine(p, 0, 0, 0, theScaley / 5)
p.Color = Color.Blue
.DrawEllipse(p, 0, 0, theScalex / 5, theScaley / 5)
.TranslateTransform(-theScalex / 2, 0)
display = "sx: " & sx.ToString("f3") & " pen: " & p.Width.ToString
.DrawString(display, New Font("Arial", theScaley / 20), Brushes.White, 0, 0)
Next
End Using
End With
End Sub
Private Sub Form3_Resize(sender As Object, e As EventArgs) Handles Me.Resize
Me.Refresh()
End Sub
End Class

Answer 1

Here is a better example for anyone interested. Use the numericupdown in the upper right to change the x axis scale by the numeric ratio.
You can see in the first image with the numeric scaleratio at 1:1 the scale is 10 for the x and y axis. The grid and diagonal lines are all the same width.
In the second image the scale ratio is 5:1 where the x axis is 50 units, the y is 10. Note the vertical grid lines are thin and the horizontal and diagonal lines are fat x 5:1.
The third picture shows how using the pen.scaletransform to reverse the x axis scaling makes the horizontal lines the same width as the vertical at 5:1. Check the checkbox to activate.
Finally, note how the grid axis labels text is changing size horizontally when the scaling transform is active. Then the X Axis Scale at the bottom has been drawn by resetting the transform to nothing or 1:1 and manually scaling the text location in pixels
and the text is the proper width and height.
The example code will also animate if the timer part is activated.
Public Class Form6
Private WithEvents timer1 As New Windows.Forms.Timer With {.Interval = 50, .Enabled = False}
Private scaleXratio As Single = 1
Private Sub Form6_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Me.DoubleBuffered = True
End Sub
Private Sub Form6_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
If Not timer1.Enabled Then scaleXratio = NumericUpDown1.Value
Dim scalestepx As Single
Dim scaleY As Single = 10
Dim scaleX As Single = scaleY * scaleXratio
Dim sx As Single = Me.ClientSize.Width / scaleX
Dim sy As Single = Me.ClientSize.Height / scaleY
Dim x, y As Single
With e.Graphics
Using p As New Pen(Brushes.Red)
.Clear(Color.Black)
.ScaleTransform(sx, sy)
p.Color = Color.LightBlue
p.Width = scaleX / 100
'add this scaling to keep the pen width constanat
If CheckBox1.Checked Then p.ScaleTransform(1, scaleY / scaleX)
Select Case scaleXratio
Case Is < 5
scalestepx = 2
Case Is < 10
scalestepx = 5
Case Is < 20
scalestepx = 10
Case Else
scalestepx = 20
End Select
For y = 0 To scaleY Step 2
For x = 0 To scaleX Step scalestepx
.DrawLine(p, x, 0, x, scaleY)
.DrawLine(p, 0, y, scaleX, y)
.DrawString(x.ToString("f0"), New Font("Arial", 18 / sy), Brushes.White, x + p.Width, p.Width)
.DrawString(y.ToString("f0"), New Font("Arial", 18 / sy), Brushes.White, p.Width, y + p.Width)
Next
Next
'draw diagonal line
p.Color = Color.Goldenrod
.DrawLine(p, 0, 0, scaleX, scaleY)
'draw the scale text using current scaletransform
.DrawString(scaleX.ToString("f3"), New Font("Arial", 24 / sy), Brushes.Red, 0.1 * scaleY, 0.6 * scaleY)
'draw the scale text at bottom using pixels with no transfrom
.ResetTransform()
x = 10
y = Me.ClientSize.Height - 30
Using f As New Font("Arial", 14)
Dim t As String = "X Axis Scale: " & scaleX.ToString("f3")
Dim sz As SizeF = .MeasureString(t, f)
.FillRectangle(Brushes.White, New RectangleF(x, y, sz.Width, sz.Height))
.DrawString(t, f, Brushes.Red, x, y)
End Using
End Using
End With
End Sub
Private Sub NumericUpDown1_ValueChanged(sender As Object, e As EventArgs) Handles NumericUpDown1.ValueChanged
Me.Refresh()
End Sub
Private Sub Form6_Resize(sender As Object, e As EventArgs) Handles Me.Resize
Me.Refresh()
End Sub
Private Sub timer1_Tick(sender As Object, e As EventArgs) Handles timer1.Tick
scaleXratio += 1
If scaleXratio > 100 Then timer1.Stop()
Me.Refresh()
End Sub
Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged
Me.Refresh()
End Sub
End Class