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

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

We have introduced the analysis and drawing of SVG. SVG is a form of image, and another very important image is: bitmap, formats include png, jpeg, and bmp. The basic rule of bitmap is that the basic element is a pixel, which consists of * width * Height pixels. Each pixel stores the color and position information of a vertex, the color information can be composed of ARGB, RGBA, BGR, or YUV. In hand-drawn videos, bitmap is also an important form of representation, because the images we download online or the photos we take are in the form of Bitmap, we can use it to make album videos. Next, let's take a look at a video produced by a user who uses the Image Pro. The user creates a travel video. The pictures of each scenic spot are bitmaps, and some of the figures are also bitmaps, this is a form of Bitmap representation in hand-drawn videos:

 

The following describes how to draw a bitmap in a hand-drawn video:

Generally, if Bitmap Processing is simple and rough, it uses a default method instead of the path data contained in the Image Information (because the bitmap itself has no path data ), for example, from the top left corner of the bitmap, draw at a fixed interval until the bottom right corner of the bitmap is completed. The effects of the rendering process are as follows:

We can see the painting process of the above png bitmap, starting from the upper left corner, with a certain angle of skew to complete the Left to right paint brush, the painting of the paint brush from right to left is completed from another close angle, and the entire bitmap is finally drawn. The process is as follows:

CanvasBitmap and CanvasGeometry are used to initialize image resources and animation path data, respectively. CanvasGeometry is used to convert the point set of the animation path. computePointOnPath (float distance), the resulting distance is the total length of the painting, and the painting process uses CompositeEffect.

The above is a simple and crude processing method. As a professional bige tool, how can we avoid professional processing methods? Let's look at the following:

In applications, we provide two methods to obtain the path data of a bitmap. One is to use OpenCV to obtain the edge data of an image, the other is to allow users to define their desired path to depict bitmaps.

The first is easy to understand. First, we worship OpenCV, an artifact in computer vision. We use the OpenCV edge detection method, which is opposite to the image smoothing algorithm, A high-pass filter is used to detect the edge of points with a long pixel span in an image. For example, the depth of the object landscape is discontinuous and the surface direction of the polygon is discontinuous, the Light and Shadow are critical, and the material on the object surface is inconsistent. The Sobel, Laplacian, and Canny methods are used. Here, we use the "quick" method. The effect is as follows:

The bitmap is characterized by the detected edge path. The bitmap is displayed only when the path is crossed. This gives you the visual experience of the path. In fact, this is also a very common way for painters to make materials. They process static image effects in PS, save and import the effects to AI after processing, and draw transparent paths on static images, save the image as an SVG file. This is a special SVG that contains a bitmap as the basemap. The role of a transparent path is to display the bitmap pixels at the corresponding position of the path during path profiling.

In another way, users can perform operations on their own, which is equivalent to using our applications as AI. Users can prepare their own static images and put them in the applications to describe the path mentioned above, and then directly import it to the application for use as SVG. The application interface and operations are as follows:

Figure 1 shows the user's operation interface. You can specify the width of the paint brush to depict the path. After the painting is completed, the bitmap is described from Figure 2 to figure 3. The path we specify in 1 is to first draw the border of the Avatar, and then use a rough brush to depict the filling of the Avatar, as in the Process of 2 and 3.

The above two processing methods are: one is the system to detect the edge of the bitmap, and the other is the user to specify the edge. We plan to combine the two methods, first by the system to detect, supplemented and corrected by the user, which can reduce the difficulty of user operations, because some bitmap edges are very complex. In addition, the disadvantage of the system detection is that the edge path is completely unordered and has no group. That is to say, the path will not be drawn according to the difference between objects, nor will it be drawn in a fixed order, this requires further processing, grouping based on the connected attributes of the edge path, and sorting based on a certain order in the direction. Of course, this is a simple and crude processing method. Further processing should be to identify the Object Classification when detecting the edge, that is, what is the object? Group and sort by category based on the information. These are the things we will do later.

The Processing Method of bitmap is introduced here. If you have good processing methods or good ideas, please contact me. Thank you!