VB and Tablet PC: Inking on Irregular Surfaces

Beth Massi — Wed, 18 Apr 2007 22:46:00 GMT

So I was playing around with my tablet PC application this evening because someone in a Visual Basic list had posted a question about how to create an irregular drawing surface for a medical application they were working on. They wanted users to be able to draw on a picture of a body, but did not want to collect the ink anywhere outside of the body shape. It actually turned out to be relatively easy. But some background first...

The Tablet PC SDK comes with a couple designable controls called InkPicture and InkEdit. You can drop these controls onto your form and they will immediately start capturing ink. The InkEdit will also convert your ink to text.

These controls make it extremely easy to work with ink. For instance, here’s how we can save just the ink we draw on the InkPicture into a file:

Private Sub SaveInk(ByVal filename As String, ByVal format As Microsoft.Ink.PersistenceFormat)

Try

Dim inkData As Byte() = Me.InkPicture1.Ink.Save(format, Microsoft.Ink.CompressionMode.Default)

With My.Computer.FileSystem

If .FileExists(filename) Then

.DeleteFile(filename)

End If

.WriteAllBytes(filename, inkData, False)

End With

MsgBox(String.Format("Saved ink data to {0}", filename), MsgBoxStyle.Information)

Catch ex As Exception

MsgBox(String.Format("Unable to save ink data to {0}", filename))

End Try

End Sub

The persistence format can even be specified as a Gif format so you can create a completely new picture of just your annotations. To load the annotations, we just read in the bytes and then load them into a new Ink.Ink object and set it to the Ink property of our InkPicture:

Private Sub LoadInk(ByVal filename As String)

Dim inkData As Byte() = Nothing

Try

With My.Computer.FileSystem

If .FileExists(filename) Then

inkData = .ReadAllBytes(filename)

End If

End With

Catch ex As Exception

MsgBox(String.Format("Unable to load ink data from {0}", filename))

End Try

If inkData IsNot Nothing Then

Dim newink As New Microsoft.Ink.Ink

newink.Load(inkData)

Me.InkPicture1.InkEnabled = False

Me.InkPicture1.Ink = newink

Me.InkPicture1.InkEnabled = True

End If

End Sub

When we want to save both the picture and the ink we just have to create a new picture and then render the ink on the picture using the Ink.Renderer object:

Private Sub SaveInkOnPicture(ByVal filename As String)

Try

'Create graphics object

Dim bm As New Bitmap(Me.InkPicture1.Image)

Dim g As Graphics = Graphics.FromImage(bm)

'Create a renderer to draw ink on the graphics surface

Dim r As New Microsoft.Ink.Renderer()

r.Draw(g, Me.InkPicture1.Ink.Strokes)

'Save the new image

bm.Save(filename, System.Drawing.Imaging.ImageFormat.Bmp)

MsgBox(String.Format("Saved picture to {0}", filename), MsgBoxStyle.Information)

Catch ex As Exception

MsgBox(String.Format("Unable to save picture to {0}", filename))

End Try

End Sub

These designable controls are really easy to use and will get you up and running quickly, however what if you want to draw on something other than a picture? That’s where the InkOverlay object comes in. You can use this object to wrap any windows Control to enable inking. For instance, to create a blank “drawing surface” you can use a Panel with the InkOverlay:

Private WithEvents overlay As InkOverlay

Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

overlay = New InkOverlay(Me.Panel1)

overlay.Enabled = True

End Sub

So now back to the original question about inking on an irregular surface. Well since the InkOverlay can be used to wrap any control, and we can draw any control any way we want, it’s actually pretty easy to achieve this. Since this was a medical application I first found I picture of a human body. I then threw a panel on a form and set its background image to the picture of the body. Next, I added an event handler to the Paint event in order to draw the panel how I wanted to. The key is setting up a GraphicsPath and then creating a new Region along that path for the control.

Public Class Form2

Private WithEvents overlay As Microsoft.Ink.InkOverlay

Private Sub Form2_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

overlay = New Microsoft.Ink.InkOverlay(Me.Panel1)

overlay.DefaultDrawingAttributes.Color = Color.Red

overlay.Enabled = True

End Sub

Private Sub Panel1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Panel1.Paint

Dim Person As New System.Drawing.Drawing2D.GraphicsPath()

Person.AddEllipse(82, 1, 74, 74)

Person.AddLine(65, 75, 175, 75)

Person.AddLine(175, 75, 250, 240)

Person.AddLine(250, 240, 210, 260)

Person.AddLine(210, 260, 170, 180)

Person.AddLine(170, 180, 175, 440)

Person.AddLine(175, 440, 145, 440)

Person.AddLine(145, 440, 127, 245)

Person.AddLine(127, 245, 105, 440)

Person.AddLine(105, 440, 70, 440)

Person.AddLine(70, 440, 80, 180)

Person.AddLine(80, 180, 35, 260)

Person.AddLine(35, 260, 1, 240)

Person.AddLine(1, 240, 65, 75)

Me.Panel1.Region = New Region(Person)

End Sub

End Class

The graphics path I created here is pretty basic but it illustrates the idea. Now when users draw on the panel, it will only allow ink on the graphics path!

Beth Massi - Sharing the goodness that is VB : Tablet PC

VB and Tablet PC: Inking on Irregular Surfaces