WPF handwriting algorithm converts handwriting outline from point set

WPF handwriting algorithm converts handwriting outline from point set

This article will tell you about some handwriting algorithms, which convert the point set input by the user, that is, mouse track points or touch track points, etc., into a basic mathematical algorithm that can draw and display handwriting pictures on the interface. Although this article is labeled WPF’s handwriting algorithm, in fact this article focuses more on basic mathematical calculations, which can theoretically be applied to any UI framework that can support geometric drawing, including UWP or WinUI or UNO or MAUI or Eto and other frameworks

I will describe the handwriting algorithm in order from simple to complex. This article is a relatively low-level algorithm. Please make sure you have not forgotten the mathematics knowledge in junior high school before reading.

This article is suitable for those who want to know more details about handwriting drawing, those who hope to design better-looking handwriting, and those who have nothing to do but read blogs

The simplest handwriting trajectory algorithm

As we all know, whether it is a mouse, touch, or pen, the data generated is basically point data. One way to create a handwriting trajectory based on a set of points is to create a geometric shape and draw the geometric shape onto the interface. At the bottom of the UI framework, there is no concept of handwriting, only basic drawing primitives such as drawing pictures, drawing text, and drawing geometric figures. The simplest way to construct a geometric trajectory from a point set is to construct a polyline. The code is also very simple, just treat all input points as polylines

That is, create a Polyline object and continuously add the output point set to the polyline. The following is an example code. First create a new empty WPF project and add event listening in MainWindow.xaml, such as the following code

In the background code, the event is implemented. The following code is very simple. I believe everyone will understand it at a glance

public partial class MainWindow : Window
 {
     public MainWindow()
     {
         InitializeComponent();
     }

     private void MainWindow_OnStylusDown(object sender, StylusDownEventArgs e)
     {
         var polyline = new Polyline()
         {
             Stroke = Brushes.Black,
             StrokeThickness = 5
         };
         InkCanvas.Children.Add(polyline);

         _pointCache[e.StylusDevice.Id] = polyline;

         foreach (var stylusPoint in e.GetStylusPoints(this))
         {
             polyline.Points.Add(stylusPoint.ToPoint());
         }
     }

     private void MainWindow_OnStylusMove(object sender, StylusEventArgs e)
     {
         if (_pointCache.TryGetValue(e.StylusDevice.Id,out var polyline))
         {
             foreach (var stylusPoint in e.GetStylusPoints(this))
             {
                 polyline.Points.Add(stylusPoint.ToPoint());
             }
         }
     }

     private void MainWindow_OnStylusUp(object sender, StylusEventArgs e)
     {
         if (_pointCache.Remove(e.StylusDevice.Id, out var polyline))
         {
             foreach (var stylusPoint in e.GetStylusPoints(this))
             {
                 polyline.Points.Add(stylusPoint.ToPoint());
             }
         }
     }

     private readonly Dictionary _pointCache=new Dictionary();
 }
 

The above code is placed on github and gitee, welcome to visit

You can obtain the source code of this article in the following way. First create an empty folder, then use the command line cd command to enter the empty folder, and enter the following code in the command line to obtain the code of this article

git init
 git remote add origin https://gitee.com/lindexi/lindexi_gd.git
 git pull origin d76fffd214ed5b3aeb99f3593c441b7a12f10d55
 

The above uses the source of gitee. If gitee cannot be accessed, please replace it with the source of github. Please continue to enter the following code on the command line

git remote remove origin
 git remote add origin https://github.com/lindexi/lindexi_gd.git
 git pull origin d76fffd214ed5b3aeb99f3593c441b7a12f10d55
 

After obtaining the code, enter the HallgaiwhiyiwaLejucona\YegeenurcairwheBeahealelbewe folder

Although the above code is very simple, you will find that the handwriting is not smooth enough, at least compared to WPF’s simplest logic to achieve multi-finger smooth handwriting. Calling WPF’s own handwriting drawing method is not smooth enough, and the drawing The speed is also much different

<img src="http://image.acmx.xyz/lindexi%2F202310101��The shape of a water droplet will require a more complex package algorithm. For details, please refer to Chapter 3 of the paper "Real-time Handwriting Beautification Technology and Application Based on Contour Methods"

Another advantage of my algorithm is that it can control the length of the rice character in all directions, so as to achieve effects such as the edge of a brush

What’s interesting is that my algorithm and Chen Lukai’s algorithm can be superimposed in the contour generation part, taking the advantages of both. The following are just my thoughts, I have not done any practice on them. The specific implementation without considering patent and copyright issues is to use the rice-shaped method to realize the segmental part of the handwriting, and use Chen Lukai’s water droplets to generate the first and last outlines. The two merge the segmental outlines through more complex geometric calculations, and that’s it At the same time, I take into account the blade and angular corner effects achieved by my algorithm, and can also use the closer brush effect of Chen Lukai’s water droplets at the beginning and end of the handwriting

More Highlights

In addition to the differences in the major steps introduced above, after reading the big brother’s papers and patents, I also discovered more highlights of the big brother’s algorithm

For example, the algorithm for optimizing curve splitting is sensitive to performance during the handwriting algorithm, so the boss proposed using the arc-chord ratio to replace the chord-enclosed area, thereby reducing the computational complexity. Please also see the description of this section on page 15 of the Gangster paper. Although I have no need to use this algorithm now, I have collected it

Another example is the detailed algorithm for eliminating redundant outlines in strokes proposed in the paper in the merging of stroke segments. Although I can’t understand it, I feel it should be helpful to rendering performance

Thank you again to Mr. Chen Lukai for proposing such an excellent algorithm. After reading the papers and patents of the big guys, what I gained is:

• Width calculation (thickness calculation) can be carried out with forward filtering
• The first and last outlines can use water drop shapes, and provide a demonstration of the effects that water drop shapes can achieve

But the biggest gain is that I found that before I learned about the big brother’s algorithm, the specific processing steps of the algorithm I proposed were so close to the handwriting steps of the big brother’s algorithm, which proved my route. It’s also correct, at least the direction is correct

This article only discusses the handwriting algorithm, and does not include how to optimize the performance of handwriting drawing and more touch-related content. If you are interested in this part, please refer to WPF touch related

The Blog Garden blog only makes backups and will no longer be updated when the blog is published. If you want to see the latest blog, please go to https://blog.lindexi.com/

This work Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You are welcome to reprint, use and republish, but be sure to retain the article signature [Lin Dexi] (https://www.cnblogs.com/lindexi) (including link: https://www.cnblogs.com/lindexi) and may not be used for commercial purposes For this purpose, modified works based on this article must be released under the same license. If you have any questions, please contact me [mailto:[email protected]].