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.pageX,event.touches.pageY) End Function Function PictureBox1_ontouchmove() addSegment(event.touches.pageX,event.touches.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,pointsY) 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:
When you read in the signature, simply reverse the process:
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.