UWP hand-drawn video creation tool technology sharing series, uwp tool technology

UWP hand-drawn video creation tool technology sharing series, uwp tool technology

This article is the fourth article in the technology sharing series. It will detail the use cases of Surface Pen and Surface Dial in hand-drawn videos.

First, let's take a picture of Microsoft's official marketplace. The Surface Pen and Surface Dial are used in combination.

The use of the Surface Pen is not hard to imagine. Just like the Pen configured on the iPad and Android Pad, the Surface Pen also plays an important role in writing, painting, and daily operations. Microsoft's Surface Pro and Surface Book series have highlighted the wide variety of use and convenience of Surface Pen. In hand-drawn videos, the most important part for users to actively create and personalize is the text and painting that users operate with the mouse, finger touch or Surface Pen. Compared with the mouse and fingers, surface Pen is undoubtedly the most suitable for creation.

Surface Dial is relatively unfamiliar and rarely seen in daily work, because Surface Pro and Surface Book do not include it during sales and need to be purchased separately, so it is not so popular. However, for art creators, Surface Dial is quite easy to use. It can complete many auxiliary shortcut functions, play the role of a non-main player, and liberate your main player, as shown in: the right hand is the main creator, responsible for complex operations such as painting; the left hand is not the main operator, responsible for some functional auxiliary operations, such as switching the color, width, zoom in and out of the canvas, etc, in addition, Dial attaches some system-level shortcut functions by default, such as volume adjustment and interface scrolling. In addition, Dial operations are divided into two modes: off screen and on screen. As the name suggests, Dial functions are both on-screen and off-screen functions. Currently, only Surface Studio supports on screen functions, other devices can only perform the off screen operation. On screen, the circular menu appears around Dial and follows Dial. The operation is quite intuitive. When off screen is used, the circular menu appears in a small form. On screen and off screen modes:

 

After having a preliminary understanding of Surface Pen and Surface Dial, we started to talk about their application in UWP hand-drawn video creation tools.

The first is the Surface Pen, which can complete mouse operations, such as clicking. for hand-drawn video applications, it is more important to note the functions of painting and calligraphy. Here we mainly use InkToolbar and InkCanvas. InkToolbar is an Ink toolbar that supports custom buttons and provides a variety of handwriting, ruler, rounded corner, and eraser, the InkCanvas is used to display the handwriting drawn by the paint brush selected by the InkToolbar. In this regard, there are a lot of articles have been systematic introduction, Microsoft's official website also has a lot of articles: https://docs.microsoft.com/en-us/windows/uwp/input-and-devices/pen-and-stylus-interactions,

In hand-drawn videos, there are two steps: 1. after the InkCanvas is drawn, it is saved as Ink data. 2. extract the Ink data and split the data according to the line length to ensure that each line does not exceed a certain threshold value. Then, transmit the split Ink sequence to Win2D for dynamic drawing.

The above processing is only effective for the ball pen, but not for the ball pen, because there are lines on the pen tip angle conversion and translucent color superposition, so you need to do a little processing, such as a pencil, pen and highlighter, you need to make shape judgment when the pen tip changes the direction, and deepen the color when the online bars are superimposed. In addition, for the highlighter, it will have a fluorescent color mixing effect on the covered colors, actually, we need to modify the covered color. We need to use OpenCV to calculate the mixed color. We also need to pay attention to the smooth processing of the edge.

In addition to the pen tip provided by the system, we can also define the pen tip by ourselves. Here we will briefly mention that the pen tip has two important attributes to be defined: the shape of the pen tip and Its filling. Includes both the pen tip contour and his fill, such as the pen's prototype contour, the pen's elliptical contour; the pen's completely opaque fill, the pencil's discrete point fill, translucent fill of highlighter. After these attributes are defined, when writing in InkCanvas, the pen tip combination direction determines the shape and thickness of the strokes in different directions. The filling of the pen tip determines the repeated painting, whether there is color deepening processing.

The following is the Surface Dial, which has several operations: Long-pressed, short-pressed, and rotating. All our operations are based on these operations. Surface Dial provides a Menu, which is long pressed by Dial and then calls out the Menu. We need to insert custom operation data into the Menu as an Item of the Menu. When Dial is rotated to this Item, press short to enter its function. You can directly execute some functions, or enter another sub-Menu. The Menu style cannot be customized when Dial is called out. Therefore, if you want to customize the Menu style, it can only appear as a sub Menu, as shown in the on screen figure above, this Menu is a fully customized color selector.

Because the sub-Menu can be fully customized, we can think about how to make this Menu, such as color selection, we use a circle for users to rotate, short press to select a color, long-press switch function; to be compatible with off screen and on screen modes, we determine the off or on to determine the circle radius, smaller when off, and set the Dial size when on. Because of the Dial rotation method, many sub-menus choose the circular method.

The introduction of Ink and Dial is here. We will introduce more of its application scenarios. For specific implementation code, you can go to the Microsoft official website to view the documentation. The implementation process is relatively simple and will not be repeated, thank you!