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 first article in the technology sharing series. It will introduce the analysis and drawing of SVG in detail. The research and implementation of this part of the function will be undertaken by @ Huang chaochao from the team, thanks for providing technical documents and support.

First, let's take a look at the file structure and composition of SVG.

SVG (Scalable Vector Graphics) is a Scalable Vector image, which is defined in XML format and is a W3C standard, the image quality will not be lost when the image is enlarged or changed.

The following is an example of a simple SVG file structure:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg>

From the perspective of the file structure, SVG is indeed a standard XML format, and the elements inside, literally, are a coordinate (, 50) with a radius of 40, the fill color is red, the line is black, and the line width is a circle of 2. Let's take a look at the basic elements and attributes in the SVG file:

1. Structure Element

<Defs>, <g>, <svg>, <symbol>, <use>

2. graphic elements

<Line>, <circle>, <ellipse>, <polygon>, <polyline>, <rect>, <path>

These labels are familiar to everyone, and almost every interface language has similar labels. In SVG, the most common is <path>, which can represent all the preceding labels.

3. Special Elements

<Image>: The Source image is usually represented by a base64 string or url. It usually appears in this scenario: After editing an image through PhotoShop and exporting it to SVG format, the <image> tag exists in the file and then imported to AI for path editing, when exported to the SVG format, an SVG file that depicts a path and contains the <image> base map is created.

<Text>: text. After setting the text content and font size, you can display the text in SVG. <Text> supports the transform attribute, rotating and zooming text, and style. css code can be directly added.

Complete element list see here: https://developer.mozilla.org/zh-CN/docs/Web/SVG/element

4. attributes of an element

Opacity, fill, stroke, stroke-width, stroke-miterlimit, fill-opacity, stroke-opacity, fill-rule, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, transform

These are not hard to understand, representing the transparency, fill, line, transformation, and so on of elements. Because SVG is W3C standard, the above appearance attributes have corresponding attributes in CSS. In addition, SVG supports other property types, such as animation events, animation timing, Key Frame Animation, graphic attributes, and filters, which are very powerful.

The complete list of properties can be found here: https://developer.mozilla.org/zh-CN/docs/Web/SVG/attribute

Let's look at an example: the top-down list contains two rectangles, one circle, one elliptic, one straight line, one broken line, one polygon, and one custom path.

<? Xml version = "1.0" standalone = "no"?> <Svg width = "200" height = "250" version = "1.1" viewBox = "0 0 200 250" xmlns =" http://www.w3.org/2000/svg "> <Rect x =" 10 "y =" 10 "width =" 30 "height =" 30 "stroke =" black "fill =" transparent "stroke-width =" 5 "/> <rect x =" 60 "y =" 10 "rx =" 10 "ry =" 10 "width =" 30 "height =" 30 "stroke =" black" fill = "transparent" stroke-width = "5"/> <circle cx = "25" cy = "75" r = "20" stroke = "red" fill = "transparent "stroke-width =" 5 "/> <ellipse cx =" 75 "cy =" 75 "rx =" 20 "ry =" 5 "stroke =" red "fill =" transparent "stroke-width =" 5 "/> <line x1 =" 10 "x2 =" 50 "y1 =" 110 "y2 =" 150 "stroke =" orange "fill = "transparent" stroke-width = "5"/> <polyline points = "60,110 65,120 70,115 75,130 80,125 85,140 90,135 95,150" stroke = "orange" fill = "transparent" stroke-width = "5"/> <polygon points = "50,160 55,180 70,180 60,190 65,205 50,195 35,205 190 180 180 45" stroke = "green" fill = "transparent" stroke-width =" 5 "/> <path d =" M20, 230 Q40, 205 50,230 T90, 230 "fill =" none "stroke =" blue "stroke-width =" 5 "/> </svg>

The above sample code is described as follows:

①Measurement UnitThe specified unit is not displayed, such as width height x y. In this case, the unit is px. You can also specify the unit in cm. The unit is converted to px Display Based on the current device environment.

②ViewBoxDefines the area that can be displayed on the canvas, in the format of "x y width height", for example, viewBox = "0 0 200 250", starting from (0, 0, for an area with a width of 200*250, the width of SVG is "200" and the height is "250". Therefore, the current scaling ratio is 1. if SVG width = "400" height = "500", the zoom-in effect is doubled.

③Comparison between path and other elementsIn SVG, path is the most commonly used element. Compared with polyline, path can be set to the same line or curve through d, A smooth curve can be created with only a few points, but polyline requires a large number of points to achieve smooth results. Therefore, path is a better choice in terms of the difficulty and scaling effect.

Next, let's take a look at the SVG rendering process.

The following two basic principles are described:

1. The parsing order is the same as the drawing order, and the elements in XML must be arranged in the position. In the preceding example, elements in SVG are arranged in a fixed order in XML. We will follow this order during parsing, and will also follow this order during painting. That is to say, the first element will appear at the bottom layer of the painting, and the next element will appear at the top layer of the painting. If the positions of the elements overlap, the top-level element blocks the underlying element.

2. The child node inherits some attributes of the parent node, such as opacity and transform. Note that static attributes such as opacity must be inherited, while attributes such as transform must undergo matrix transformation to obtain the final transform of the subnode.

Processing of SVG in hand-drawn videos

Some special situations and handling

1. Ignore DTD verification when parsing SVG documents

Although DTD is the standard verification method for XML parsing, the SVG and DTD created by many tools are missing. Therefore, you should ignore the DTD verification during parsing, otherwise it will directly cause a parsing error.

2. When parsing SVG documents, the attribute values of some elements may have multiple separation/representation methods.

The point set of a polygon and the transform of an element are all numeric sets. The division of a set may be "space", "," or other symbols, therefore, multiple splitting methods are required during parsing.

The color representation, length unit, and other forms may also appear, such as the color has known colors and color values, must be compatible.

3. Some attributes of an Element Inherit the parent element.

For attributes such as transform and transparency, the inheritance relationship of parent elements must be considered. Transform will be more complex. The transform [3*2] matrix will contain information such as scaling, translation, and rotation. The translation information of sub-elements must be scaled and multiplied by the parent element, translate again.

4. default values of element attributes

SVG exported by many tools will ignore some attributes, and these attributes cannot be correctly displayed without values. Therefore, we need to set the default values for them. For example, fill should be set to none by default, stroke is set to black by default, stroke-width is set to 1px by default, and fill-rule is set to nonzero by default. Here we will focus on fill-rule, which can be divided into evenodd and nonzero:

EvenOdd: determines whether a point is in the filling area. The specific method is to draw an infinitely long Ray from the point along any direction, then, the number of path segments formed by crossover of the ray in the given shape is calculated. If this number is an odd number, the point is inside. If it is an even number, the point is outside.

Nonzero: determines whether a point is located in the path filling area. The specific method is to draw an infinitely long Ray from the point along any direction, and then check the intersection of the Shape segment and the ray. Counting starts from scratch. Each time a line segment passes through this Ray from left to right, 1 is added, and each time the path segment passes through this Ray from right to left, 1 is subtracted. After calculating the number of intersections, if the result is zero, the point is located outside the path. Otherwise, it is inside the path.

5. Resolution Sequence and Rendering sequence, stroke and fill sequence

The Resolution Sequence and Rendering sequence must be consistent and consistent with the order in XML. Otherwise, an incorrect occlusion and reverse drawing sequence may occur. The basic principle is to fill the color after the stroke of a single element is completed, and then the next element is operated. Of course, the color filling here can be flexibly controlled, such as saving all colors, and one-time color filling after all strokes are completed.

6. Drawing of labels containing <image>

SVG containing the <image> tag has some special features. The existence of this SVG is generally because the painter edits the image through PS and then imports the SVG generated in AI. When processing the SVG painting, the basic idea is: parse the <image> label as the SVG basemap, block it with a transparent mask, and then parse the <path> label next to it, this only needs to parse the path and stroke, and does not need fill. Use the path here to smear the basemap, where it has been smeared, the transparent mask is invalid, and the basemap is exposed, this achieves the purpose of painting the basemap line. According to this idea, the basemap is painted out, similar to the scratch experience.

 

By now, the basic knowledge, parsing, and drawing principles of SVG have been introduced. Of course, this is only a basic process, in the future, we will sort out some special ideas for parsing and drawing SVG format. We will share with you during this session. Thank you.