Introduction

Have you ever noticed how childish and imprecise your signature looks when you write your name in a handheld signature box? The small size of the stylus compared to a standard pen, the nearly frictionless stylus-on-touch-screen interaction and the fact that the handheld is often hanging in the air instead of firmly lying on a table are three physical explanations for these ugly signatures. Another reason is the frequent input errors that are sent to your control from the touch screen. Those errors may vary between 1 and 4 pixels. Unnoticeable when clicking in the middle of a button, they are a pest when sampled in a signature box. By lowering the sampling rate and using Bézier curve interpolation, it's possible to reduce the impact of all these factors.

Without Bézier interpolation, the signature looks clumsy

Using Bézier interpolation, most sampling errors are corrected

Background

While working on a project, a customer asked me to add a signature input box to his application. I looked around the Web to find an open source implementation of such a control and could not find any of sufficient quality. In the end, I decided to create my own and by the way, improving the concept using Bézier curves just to see how much better the result could look. Making it open source was just natural to me. The project can now be found at SourceForge.

Bézier curves are used in many computer graphic applications. For example, true type fonts use cubic Bézier splines to render smooth character curves. Bézier interpolation is also used in 3D graphic animations to render smooth and natural movements.

When used to smooth long and complex curves, it's better to use a Bézier path, witch is a cubic spline computed at every few points instead of the entire point set. Usage of cubic spline on a small point set is much faster than using the general Bezier recursive algorithm for the same result. Cubic spline, quadratic spline and linear interpolation are respectively used with samples of four, three and two points. When a sample contains more than four points, it becomes easier to use the general Bézier curve algorithm. For mathematical background and examples on Bézier curve, see the Wikipedia article. Animated gifs and explanations given there are a good start on the subject.

Using the Code

Usage of the SignatureBox control is quite simple and straightforward. Just add the signature box to your application and make it appears the shape you want. The CreateImage method creates an image from the sampled points whether using Bezier or not (depending on the IsBezierEnabled property value). The Clear method is used to erase the content of the SignatureBox. Other properties and methods are available and are documented on the project site.

Points of Interest

Using Bézier path improves significantly the quality of the signature without slowing too much the drawing rate on the control. If the functionality is unwanted, it's possible to set it off by changing the boolean property IsBezierEnabled.

History

  • 16th February, 2011: Initial post
Tag signature,box,that,makes,the,look,right
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架