Implementation process of WPF calligraphy

?About the author: 2022 Rising Blog Star Eighth. A Java back-end developer who loves Chinese studies, he cultivates his mind and technology at the same time.
Personal homepage: Blog of Java Fans
Personal Creed: Don’t vent your anger, don’t make mistakes. Small knowledge, great wisdom.
Current column: WPF case and knowledge sharing column
?Featured column: Weekly Update on Chinese Studies – The Road to Cultivation of Mind
The content of this article: WPF calligraphy implementation process

Article directory

    • Basic Step Analysis
    • Detailed explanation of important codes
    • test display

Basic step analysis

The following are the basic steps of using WPF to write calligraphy signature software:

Create a WPF application: Use Visual Studio 2019 and other development tools to create a new WPF application project, set it up Basic information such as project name and location.

Add a canvas control: Add a Canvas control in the WPF application to draw the signature.

Add event handlers: Add mouse event handlers and touch event handlers for the Canvas control to implement handwritten signatures and the ability to touch signatures.

Realize brush function: Define a Pen object, and set the color, width and other properties of the brush, and implement it in the Canvas control The function of drawing on it.

Realize the clearing function: Add a clear button to the Canvas control and realize the function of clearing the canvas.

Realize the save function: Add a save button to the Canvas control and realize the function of saving the signature. You can save the signature as a picture or data stream for later use.

Interface beautification: According to actual needs, beautify the interface, add appropriate controls and interactive effects, and improve user experience .

It should be noted that the implementation of brush signature software needs to take into account the user’s handwriting and touch operation habits, provide an easy-to-use interface and operation mode, and ensure the quality and accuracy of the signature. In addition, data storage and subsequent processing need to be considered in order to meet actual business needs.

Detailed explanation of important codes

First, we need to create a WPF window, and add an InkCanvas control and several buttons to the window to bind corresponding operations. InkCanvas is a control for handwriting input and drawing in WPF. It can record the user’s handwriting trajectory and convert it into vector graphics. Through InkCanvas, we can simulate the stroke effect of brush calligraphy and save the user’s signature as an image file.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <InkCanvas x:Name="inkCanvas" Background="White" />
        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="10">
            <Button Content="Clear" Margin="5" Click="Clear_Click"/>
            <Button Content="Save" Margin="5" Click="Save_Click"/>
        </StackPanel>
    </Grid>
</Window>

Next, we need to implement the logic of clearing and saving functions in the code. When the user clicks the “Clear” button, we need to clear all stroke tracks in the InkCanvas so that the user can re-sign. When the user clicks the “Save” button, we need to save the stroke track in the InkCanvas as a PNG format picture file, and display the file name on the window.

using System.IO;
using System. Windows;
using System. Windows. Controls;
using System.Windows.Media.Imaging;
using System. Windows. Navigation;
using System. Windows. Shapes;
using System. Windows. Ink;

namespace WpfApp1
{<!-- -->
    public partial class MainWindow : Window
    {<!-- -->
        public MainWindow()
        {<!-- -->
            InitializeComponent();
        }

        private void Clear_Click(object sender, RoutedEventArgs e)
        {<!-- -->
            inkCanvas. Strokes. Clear();
        }

        private void Save_Click(object sender, RoutedEventArgs e)
        {<!-- -->
            BitmapSource bitmapSource = InkCanvasToBitmap(inkCanvas);
            SaveFileDialog saveFileDialog = new SaveFileDialog();
            saveFileDialog.Filter = "PNG Image|*.png";
            if (saveFileDialog. ShowDialog() == true)
            {<!-- -->
                using (FileStream fileStream = new FileStream(saveFileDialog. FileName, FileMode. Create))
                {<!-- -->
                    PngBitmapEncoder encoder = new PngBitmapEncoder();
                    encoder.Frames.Add(BitmapFrame.Create(bitmapSource));
                    encoder. Save(fileStream);
                }
                MessageBox.Show("The signature has been saved: " + saveFileDialog.FileName);
            }
        }

        private BitmapSource InkCanvasToBitmap(InkCanvas inkCanvas)
        {<!-- -->
            Size size = new Size(inkCanvas. ActualWidth, inkCanvas. ActualHeight);
            inkCanvas. Measure(size);
            inkCanvas. Arrange(new Rect(size));
            RenderTargetBitmap renderTargetBitmap =
                new RenderTargetBitmap((int)size.Width, (int)size.Height, 96, 96, System.Windows.Media.PixelFormats.Default);
            renderTargetBitmap.Render(inkCanvas);
            return renderTargetBitmap;
        }
    }
}

Test display

In the above code, we use the SaveFileDialog class to display a save file dialog box, allowing the user to select the file save path. We also use the FileStream class and the PngBitmapEncoder class to convert the InkCanvas to an image and save it to the specified file path. Finally, we use the MessageBox class to display the message that the save is successful.

So far, we have implemented a simple calligraphy signature software. Users can handwrite signatures on InkCanvas and save the signature as a picture file in PNG format. The software can also support more advanced functions, such as writing with different brushes, colors and fonts, as well as undo, redo and other operations. Through the rich functions provided by WPF, we can easily expand and optimize the brush signature software.

Code is not easy, this article is introduced here, if you want to learn more Java series knowledge, Click Follow the blogger, the blogger will take you Zero-based learning of Java knowledge. At the same time, for friends who have troubles in daily life, welcome to read my fourth column: “Weekly Update on Chinese Studies – The Road to Cultivation of Mind and Character” 》, while learning technology, we also pay attention to the cultivation of mind.

syntaxbug.com © 2021 All Rights Reserved.