Principle of matrix transformation of Transform in SVG

The principle of transform is 2D matrix transformation in computer graphics,

Before starting, let's first review the next simple linear algebra knowledge: matrix and vector multiplication. If it is too complex to be used, only the product of the 3-dimensional vector and the 3x3 matrix is required:

Next, let's talk about the relationship between transform and matrix multiplication. After rendering any HTML element, we can get a bitmap and perform a matrix operation on all vertices on this bitmap, A new bitmap is obtained, which is the basic meaning of transform.

First, let's look at the simplest transform and translate. We all know that the basic meaning of tansform: translate (TX, Ty); is to translate the display position of an element to TX, Ty. In matrix transformation, translate is embodied in the following matrix operations:

Tansform: Scale (sx, Sy); stretch or compress an element to a specified multiple. Its matrix transformation is:

Transform: Rotate (a) rotates an element from angle A, and its matrix transformation is:

Transform: skew (ax, ay) develops an element from X and Y to the skew angles ax and Ay. The matrix transformation corresponding to this element is:

Transform: matrix (a, B, c, d, e, f) is a complete matrix transformation. All vertices in this bitmap are multiplied by a matrix to obtain a new bitmap.

Transition involves another mathematical concept: besell interpolation.

The transformation functions of transition include linear regression-in sequence-out sequence-in-out. We usually feel a slight difference between them when trying to use them.

In fact, they use different parameters to perform cubic besell interpolation. So let's first review the besell interpolation:

A volume (which can be any vector or scalar) changes from one value to another. If we want it to smoothly transition over a certain period of time, we must perform Interpolation on it.

In the most basic case, we consider this change to be time-balanced. In this case, we call it linear interpolation. In fact, linear interpolation cannot meet our needs. Therefore, many other interpolation algorithms have emerged in mathematics. The besell interpolation method is a very typical one. It determines the relationship between values and time based on the control points in some transformations.

The K-times besell interpolation algorithm requires k + 1 control point. The simplest one is linear interpolation, which expresses the time as the range from 0 to 1. The one-time besell interpolation formula is:

There are three control points in the secondary besell interpolation, which is equivalent to performing the besell Interpolation on P0, P1, P1, and P2 respectively, and then performing the besell Interpolation on the result.

The result of the Three-besell interpolation is that the two-besell interpolation is performed at the same time:

Back to our transition, we need to use the three-bysel interpolation algorithm.

The time is considered as the range 0, 1, and the property to be transformed is also considered as the range 0, 1. All the control functions are three besell functions:

Limit [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0, 1.0]

Linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0, 1.0]

Callback-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0, 1.0]

Round-out [0, 0] [0, 0] [0.58, 1.0] [1.0, 1.0]

Callback-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0, 1.0]

Cubic-bezr (x1, Y1, X2, Y2) [0, 0] [X1, Y1] [X2, y2] [1.0, 1.0]

The function diagrams are attached. Please identify them by yourself:

The principle of transform is 2D matrix transformation in computer graphics,

Before starting, let's first review the next simple linear algebra knowledge: matrix and vector multiplication. If it is too complex to be used, only the product of the 3-dimensional vector and the 3x3 matrix is required:

Next, let's talk about the relationship between transform and matrix multiplication. After rendering any HTML element, we can get a bitmap and perform a matrix operation on all vertices on this bitmap, A new bitmap is obtained, which is the basic meaning of transform.

First, let's look at the simplest transform and translate. We all know that the basic meaning of tansform: translate (TX, Ty); is to translate the display position of an element to TX, Ty. In matrix transformation, translate is embodied in the following matrix operations:

Tansform: Scale (sx, Sy); stretch or compress an element to a specified multiple. Its matrix transformation is:

Transform: Rotate (a) rotates an element from angle A, and its matrix transformation is:

Transform: skew (ax, ay) develops an element from X and Y to the skew angles ax and Ay. The matrix transformation corresponding to this element is:

Transform: matrix (a, B, c, d, e, f) is a complete matrix transformation. All vertices in this bitmap are multiplied by a matrix to obtain a new bitmap.

Transition involves another mathematical concept: besell interpolation.

The transformation functions of transition include linear regression-in sequence-out sequence-in-out. We usually feel a slight difference between them when trying to use them.

In fact, they use different parameters to perform cubic besell interpolation. So let's first review the besell interpolation:

A volume (which can be any vector or scalar) changes from one value to another. If we want it to smoothly transition over a certain period of time, we must perform Interpolation on it.

In the most basic case, we consider this change to be time-balanced. In this case, we call it linear interpolation. In fact, linear interpolation cannot meet our needs. Therefore, many other interpolation algorithms have emerged in mathematics. The besell interpolation method is a very typical one. It determines the relationship between values and time based on the control points in some transformations.

The K-times besell interpolation algorithm requires k + 1 control point. The simplest one is linear interpolation, which expresses the time as the range from 0 to 1. The one-time besell interpolation formula is:

There are three control points in the secondary besell interpolation, which is equivalent to performing the besell Interpolation on P0, P1, P1, and P2 respectively, and then performing the besell Interpolation on the result.

The result of the Three-besell interpolation is that the two-besell interpolation is performed at the same time:

Back to our transition, we need to use the three-bysel interpolation algorithm.

The time is considered as the range 0, 1, and the property to be transformed is also considered as the range 0, 1. All the control functions are three besell functions:

Limit [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0, 1.0]

Linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0, 1.0]

Callback-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0, 1.0]

Round-out [0, 0] [0, 0] [0.58, 1.0] [1.0, 1.0]

Callback-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0, 1.0]

Cubic-bezr (x1, Y1, X2, Y2) [0, 0] [X1, Y1] [X2, y2] [1.0, 1.0]

The function diagrams are attached. Please identify them by yourself: