How to capture signatures and drawings

It’s easy to capture and display signatures and drawings.

It’s all done using the PictureBox control. From the time the user touches the screen till the time he lifts his finger off, events are sent with the x,y coordinates. If we capture these into an array, we can display the same image again. Here is how to capture the events into an array:

Function PictureBox1_ontouchstart()
  addSegment(event.touches[0].pageX,event.touches[0].pageY)
End Function

Function PictureBox1_ontouchmove()
   addSegment(event.touches[0].pageX,event.touches[0].pageY)
End Function

Sub addSegment(x,y)
  points=points+1
  arrPointsX(points)=x
  arrPointsY(points)=y
  drawSignature(arrPointsX, arrPointsY) 'update the display in real time
End Sub

Here is how to display the signature or drawing from the array:

Sub drawSignature(pointsX, pointsY)
  pb = PictureBox1.getContext("2d")
  pb.strokeStyle = vbBlack
  pb.beginPath()
  pb.moveTo(pointsX[0],pointsY[0])
  For p=1 To UBound(pointsX)
     pb.lineTo(pointsX[p],pointsY[p])
  Next
  pb.stroke()
  pb.closePath()
End Sub

This could be made more efficient by drawing just the latest segment if we are going to call it after each event.

To put the array into a field which could be saved in a SQLite database, do this:

signatureListX=join(arrPointsX)
signatureListY=join(arrPointsY)

When you read in the signature, simply reverse the process:

arrPointsX=split(signatureListX)
arrPointxY=split(signatureListY)

You may be able to come up with more efficient ways of storing the data, but this isn’t bad. The above image is made up of 84 points, so the signature will be saved in less than 700 bytes.

The Signature sample is included starting with NS Basic/App Studio 1.1.3.