Style transformation method and device, electronic equipment and computer storage medium

Abstract

The invention provides a style transformation method and device, electronic equipment and a computer storage medium, and the method comprises the steps: when a preset mouse event for an initial element is detected, obtaining mouse operation information corresponding to the preset mouse event, and obtaining an initial matrix corresponding to the initial element, the initial matrix is used for indicating style information of the initial element; updating the initial matrix based on the initial matrix and the mouse operation information to obtain a target matrix; and according to the target matrix, determining a target element after style transformation corresponding to the initial element. According to the embodiment provided by the scheme, the element style transformation efficiency can be improved.

Description

Technical Field

[0001] The present application relates to the field of display technology, and in particular to a style conversion method, device, electronic device and computer storage medium. Background Art

[0002] In web pages and applications, the interactivity and visual effects of the user interface are crucial to the user experience. Zooming in, zooming in, and dragging elements such as maps and pictures are common interactive operations. In related technologies, for the transformation of the position or size of elements such as zooming in, zooming in, and dragging, it is usually necessary to perform complex operations such as modifying the code related to the positioning or size of the elements, which is less usable and has a low efficiency in changing the style of the elements. Summary of the invention

[0003] The embodiments of the present application provide a style transformation method, device, electronic device and computer storage medium, which can improve the efficiency of element style transformation. The above technical solution is as follows:

[0004] In a first aspect, an embodiment of the present application provides a style conversion method, the method comprising:

[0005] When a preset mouse event for the initial element is detected, mouse operation information corresponding to the preset mouse event is obtained, and an initial matrix corresponding to the initial element is obtained, where the initial matrix is ​​used to indicate style information of the initial element;

[0006] Based on the initial matrix and the mouse operation information, the initial matrix is ​​updated to obtain a target matrix;

[0007] The target element after style transformation corresponding to the initial element is determined according to the target matrix.

[0008] In a possible implementation, the preset mouse event is a mouse wheel scrolling event or a mouse dragging event;

[0009] When the preset mouse event is the mouse wheel scrolling event, the mouse operation information corresponding to the preset mouse event includes: the scrolling direction of the mouse wheel and the scrolling amount of the mouse wheel;

[0010] When the preset mouse event is the mouse drag event, the mouse operation information corresponding to the preset mouse event includes: the starting click position of the mouse cursor in the screen coordinate system, and the current drag position of the mouse cursor in the screen coordinate system when the mouse drag event is detected.

[0011] In a possible implementation, the screen coordinate system includes a horizontal axis and a vertical axis; the initial matrix includes at least one of the following parameters: a first parameter, a second parameter and a third parameter; wherein the first parameter is used to indicate an initial scaling ratio of the initial element, the second parameter is used to indicate an initial displacement of the initial element on the horizontal axis, and the third parameter is used to indicate an initial displacement of the initial element on the vertical axis.

[0012] In a possible implementation, when the preset mouse event is the mouse wheel scrolling event, the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix, including:

[0013] Based on the first parameter in the initial matrix, and the scrolling direction and the scrolling amount in the mouse operation information, the first parameter is updated to obtain a first target parameter;

[0014] The first parameter in the initial matrix is ​​replaced by the first target parameter to obtain a target matrix.

[0015] In a possible implementation, the first parameter is updated based on the first parameter in the initial matrix and the scrolling direction and the scrolling amount in the mouse operation information to obtain the first target parameter, including:

[0016] Determine an adjustment operation corresponding to the initial element according to the scroll direction in the mouse operation information, the adjustment operation being a zoom-in operation or a zoom-out operation;

[0017] The product of the preset step length and the scrolling amount in the mouse operation information is determined as the adjustment multiple corresponding to the first parameter;

[0018] The first parameter is updated according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain a first target parameter.

[0019] In a possible implementation, the updating of the first parameter according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain the first target parameter includes:

[0020] When the adjustment operation is the zoom-in operation, determining whether the sum of the first parameter and the adjustment multiple is within a preset zoom ratio range;

[0021] If yes, the sum of the first parameter and the adjustment multiple is taken as the first target parameter;

[0022] If not, the maximum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0023] In a possible implementation, updating the first parameter according to the adjustment operation, the adjustment multiple, and the first parameter in the initial matrix to obtain the first target parameter includes:

[0024] When the adjustment operation is the zoom-out operation, determining whether the difference between the first parameter and the adjustment factor is within a preset zoom ratio range;

[0025] If yes, the difference between the first parameter and the adjustment factor is used as the first target parameter;

[0026] If not, the minimum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0027] In a possible implementation, the initial matrix includes: the second parameter and the third parameter;

[0028] When the preset mouse event is the mouse drag event, the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix, including:

[0029] Based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information, the second parameter is updated to obtain a second target parameter;

[0030] Based on the third parameter in the initial matrix, the starting click position and the current drag position, the third parameter is updated to obtain a third target parameter;

[0031] The second parameter in the initial matrix is ​​replaced by the second target parameter, and the third parameter in the initial matrix is ​​replaced by the third target parameter to obtain a target matrix.

[0032] In a possible implementation, the second parameter is updated based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information to obtain the second target parameter, including:

[0033] Determine the difference between the starting horizontal coordinate of the starting click position in the mouse operation information and the second parameter in the initial matrix as the horizontal axis offset;

[0034] Determine the difference between the current horizontal coordinate of the current drag position and the horizontal axis offset as the second target parameter;

[0035] The third parameter is updated based on the third parameter in the initial matrix, the starting click position and the current drag position to obtain the third target parameter, including:

[0036] The difference between the starting ordinate of the starting click position and the third parameter is determined as the ordinate offset;

[0037] The difference between the current vertical coordinate of the current dragging position and the vertical axis offset is determined as the third target parameter.

[0038] In a possible implementation, determining the target element after style transformation corresponding to the initial element according to the target matrix includes:

[0039] For each pixel point among the multiple pixel points included in the initial element, obtaining the initial pixel coordinates of the pixel point;

[0040] Determine the target pixel coordinates of the pixel point according to the target matrix and the initial pixel coordinates, and then obtain multiple target pixel coordinates of multiple pixel points;

[0041] Rendering is performed in the screen coordinate system according to the multiple target pixel coordinates to generate a target element after style transformation corresponding to the initial element.

[0042] In a second aspect, an embodiment of the present application provides a style conversion device, the device comprising:

[0043] An acquisition module, used for, when a preset mouse event for an initial element is detected, acquiring mouse operation information corresponding to the preset mouse event, and acquiring an initial matrix corresponding to the initial element, wherein the initial matrix is ​​used to indicate style information of the initial element;

[0044] An updating module, used for updating the initial matrix based on the initial matrix and the mouse operation information to obtain a target matrix;

[0045] A determination module is used to determine the target element after style transformation corresponding to the initial element according to the target matrix.

[0046] In a possible implementation, the preset mouse event is a mouse wheel scrolling event or a mouse dragging event;

[0047] When the preset mouse event is the mouse wheel scrolling event, the mouse operation information corresponding to the preset mouse event includes: the scrolling direction of the mouse wheel and the scrolling amount of the mouse wheel;

[0048] When the preset mouse event is the mouse drag event, the mouse operation information corresponding to the preset mouse event includes: the starting click position of the mouse cursor in the screen coordinate system, and the current drag position of the mouse cursor in the screen coordinate system when the mouse drag event is detected.

[0049] In a possible implementation, the screen coordinate system includes a horizontal axis and a vertical axis; the initial matrix includes at least one of the following parameters: a first parameter, a second parameter and a third parameter; wherein the first parameter is used to indicate an initial scaling ratio of the initial element, the second parameter is used to indicate an initial displacement of the initial element on the horizontal axis, and the third parameter is used to indicate an initial displacement of the initial element on the vertical axis.

[0050] In a possible implementation, when the preset mouse event is the mouse wheel scrolling event, the updating module includes:

[0051] A first updating unit, configured to update the first parameter based on the first parameter in the initial matrix and the scrolling direction and the scrolling amount in the mouse operation information to obtain a first target parameter;

[0052] The first replacement unit is used to replace the first parameter in the initial matrix with the first target parameter to obtain a target matrix.

[0053] In a possible implementation, the first updating unit includes:

[0054] A first determining subunit is used to determine an adjustment operation corresponding to the initial element according to the scrolling direction in the mouse operation information, where the adjustment operation is a zoom-in operation or a zoom-out operation;

[0055] A second determining subunit, configured to determine the product of a preset step length and the scrolling amount in the mouse operation information as an adjustment multiple corresponding to the first parameter;

[0056] The updating subunit is used to update the first parameter according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain a first target parameter.

[0057] In a possible implementation, the updating subunit is specifically used to:

[0058] When the adjustment operation is the zoom-in operation, determining whether the sum of the first parameter and the adjustment multiple is within a preset zoom ratio range;

[0059] If yes, the sum of the first parameter and the adjustment multiple is taken as the first target parameter;

[0060] If not, the maximum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0061] In a possible implementation, the updating subunit is specifically used to:

[0062] When the adjustment operation is the zoom-out operation, determining whether the difference between the first parameter and the adjustment factor is within a preset zoom ratio range;

[0063] If yes, the difference between the first parameter and the adjustment factor is used as the first target parameter;

[0064] If not, the minimum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0065] In a possible implementation, the initial matrix includes: the second parameter and the third parameter;

[0066] When the preset mouse event is the mouse drag event, the updating module includes:

[0067] A second updating unit, configured to update the second parameter based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information, to obtain a second target parameter;

[0068] A third updating unit, configured to update the third parameter based on the third parameter in the initial matrix, the starting click position and the current drag position, to obtain a third target parameter;

[0069] The second replacement unit is used to replace the second parameter in the initial matrix with the second target parameter, and replace the third parameter in the initial matrix with the third target parameter to obtain a target matrix.

[0070] In a possible implementation, the second updating unit is specifically configured to:

[0071] Determine the difference between the starting horizontal coordinate of the starting click position in the mouse operation information and the second parameter in the initial matrix as the horizontal axis offset;

[0072] Determine the difference between the current horizontal coordinate of the current drag position and the horizontal axis offset as the second target parameter;

[0073] The third updating unit is specifically used for:

[0074] The difference between the starting ordinate of the starting click position and the third parameter is determined as the ordinate offset;

[0075] The difference between the current vertical coordinate of the current dragging position and the vertical axis offset is determined as the third target parameter.

[0076] In a possible implementation, the determination module includes:

[0077] An acquiring unit, configured to acquire, for each pixel point among a plurality of pixel points included in the initial element, an initial pixel coordinate of the pixel point;

[0078] A determination unit, configured to determine the target pixel coordinates of the pixel point according to the target matrix and the initial pixel coordinates, and further obtain a plurality of target pixel coordinates of a plurality of pixel points;

[0079] A rendering unit is used to render in the screen coordinate system according to the multiple target pixel coordinates to generate a target element after style transformation corresponding to the initial element.

[0080] In a third aspect, an embodiment of the present application provides an electronic device, including: a processor and a memory;

[0081] The above-mentioned memory stores a computer program, and the above-mentioned computer program is suitable for being loaded by the above-mentioned processor and executing the steps of the method provided by the first aspect of the embodiment of the present application or any possible implementation method of the first aspect.

[0082] In a fourth aspect, an embodiment of the present application provides a computer storage medium, which stores multiple instructions, and the instructions are suitable for being loaded by a processor and executing the steps of the method provided by the first aspect of the embodiment of the present application or any possible implementation method of the first aspect.

[0083] The embodiment of the present application obtains the mouse operation information corresponding to the preset mouse event and the initial matrix indicating the style information of the initial element when the preset mouse event for the initial element is detected, and updates the initial matrix based on the initial matrix and the mouse operation information to obtain the target matrix; and then determines the target element after the style transformation corresponding to the initial element according to the target matrix. The embodiment of the present application updates the transformation matrix in response to the preset mouse event triggered by the user, and can dynamically adjust the style information of the element according to the user's operation, and then obtain the element after the style transformation, without the need to perform complex operations on the code related to the element style, which simplifies the process of element style transformation and effectively improves the efficiency of element style transformation. BRIEF DESCRIPTION OF THE DRAWINGS

[0084] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0085] Figure 1 A schematic diagram of the structure of a style conversion system provided by an exemplary embodiment of the present application;

[0086] Figure 2 A schematic diagram of a flow chart of a style conversion method provided by an exemplary embodiment of the present application;

[0087] Figure 3 A page schematic diagram of a mouse drag event provided by an exemplary embodiment of the present application;

[0088] Figure 4 A flowchart of a matrix updating method corresponding to a mouse wheel scrolling event provided by an exemplary embodiment of the present application;

[0089] Figure 5 A flowchart of a matrix updating method corresponding to a mouse drag event provided by an exemplary embodiment of the present application;

[0090] Figure 6 A schematic diagram of the structure of a style conversion device provided by an exemplary embodiment of the present application;

[0091] Figure 7 A schematic structural diagram of an electronic device provided as an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0092] The technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application.

[0093] The terms "first", "second", "third", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices.

[0094] Please refer to the following Figure 1 , which exemplarily shows a structural diagram of a style conversion system provided by an embodiment of the present application. Figure 1As shown, the system includes a terminal device 110 and a mouse 120, and the terminal device 110 and the mouse 120 are connected via wired or wireless (such as Bluetooth). The terminal device 110 is a device such as a laptop, a personal computer, a tablet computer, etc. The terminal device 110 includes a display screen 111 for displaying a page, and the mouse 120 includes a left button 121, a left button 122, and a scroll wheel 123. The user can interact with the page by clicking the left button 121, the left button 122, and the scroll wheel 123, and rotating the scroll wheel 123.

[0095] In some embodiments, the terminal device 110 is used to perform the following steps:

[0096] When a preset mouse event for an initial element is detected, mouse operation information corresponding to the preset mouse event is obtained, and an initial matrix corresponding to the initial element is obtained, wherein the initial matrix is ​​used to indicate style information of the initial element; the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix; and the target element after style transformation corresponding to the initial element is determined according to the target matrix.

[0097] Optionally, the initial element may be a component of a page, and the initial element may be any of the following: a web page, a picture, a button, a pop-up window, etc. The style information of the initial element includes information such as the size and position of the initial element.

[0098] Optionally, the preset mouse event is a mouse wheel scrolling event or a mouse dragging event.

[0099] Optionally, the initial matrix includes at least one of the following parameters: a first parameter, a second parameter and a third parameter; wherein the first parameter is used to indicate an initial scaling ratio of the initial element, the second parameter is used to indicate an initial displacement of the initial element on the horizontal axis in the screen coordinate system, and the third parameter is used to indicate an initial displacement of the initial element on the vertical axis in the screen coordinate system.

[0100] Optionally, the target matrix is ​​the updated initial matrix. After the initial element is reduced, enlarged, dragged, or subjected to any one or more operations, the corresponding initial matrix is ​​updated to the target matrix, which is used to indicate the style information of the target element (the initial element after the style transformation).

[0101] Optionally, the target matrix can be used to indicate style information of the target element, such as the position and size of the target element. The browser can generate the corresponding target element after style transformation according to the target matrix rendering to display it on the display screen, completing effects such as element scaling and dragging. Figure 1 The target element in is the target element after dragging corresponding to the above initial element.

[0102] An exemplary embodiment of the present application provides a style conversion method. The style conversion method can be applied to the above terminal device. For details, please refer to Figure 2 , which exemplarily shows a flow chart of a style conversion method provided in an embodiment of the present application. Figure 2 As shown, the style transformation method includes the following S1-S3:

[0103] S1. When a preset mouse event for an initial element is detected, mouse operation information corresponding to the preset mouse event is obtained, and an initial matrix corresponding to the initial element is obtained, where the initial matrix is ​​used to indicate style information of the initial element.

[0104] In some embodiments, the initial element may be a component of a page, and the initial element may be any of the following: a web page, a picture, a button, a pop-up window, etc. The style information of the initial element includes information such as the size and position of the initial element.

[0105] In some embodiments, the preset mouse event is a mouse wheel scrolling event or a mouse dragging event. When the preset mouse event is the mouse wheel scrolling event, the mouse operation information corresponding to the preset mouse event includes: the scrolling direction of the mouse wheel and the scrolling amount of the mouse wheel; when the preset mouse event is the mouse dragging event, the mouse operation information corresponding to the preset mouse event includes: the starting click position of the mouse cursor in the screen coordinate system, and the current dragging position of the mouse cursor in the screen coordinate system when the mouse dragging event is detected. The scrolling direction can be up or down. The scrolling amount is used to indicate the scrolling amplitude of the wheel. The starting click position of the mouse cursor in the screen coordinate system is the position of the mouse cursor when the user presses the mouse button.

[0106] Optionally, when a mouse drag event is detected, the current drag position of the mouse cursor in the screen coordinate system is continuously updated with the drag operation. Therefore, after detecting a preset mouse event for the initial element, the steps of obtaining the mouse operation information corresponding to the preset mouse event and obtaining the initial matrix corresponding to the initial element can be performed according to a preset period, and the initial matrix is ​​used to indicate the style information of the initial element.

[0107] In some embodiments, the initial matrix includes at least one of the following parameters: a first parameter, a second parameter and a third parameter; wherein the first parameter is used to indicate an initial scaling ratio of the initial element, the second parameter is used to indicate an initial displacement of the initial element on the horizontal axis in the screen coordinate system, and the third parameter is used to indicate an initial displacement of the initial element on the vertical axis in the screen coordinate system.

[0108] Among them, the above-mentioned screen coordinate system is a two-dimensional coordinate system, which is used to represent the position of pixels on the display screen. The origin of the screen coordinate system can be the position of any pixel point in the screen. Specifically, the screen coordinate system usually takes the upper left corner of the screen as the origin (0,0), the horizontal direction to the right is the positive direction of the horizontal axis (x-axis), and the vertical direction downward is the positive direction of the vertical axis (y-axis). The initial displacement of the above-mentioned initial element on the above-mentioned horizontal axis can specifically be the displacement of the scaling center point of the above-mentioned initial element on the horizontal axis relative to the default position of the scaling center point, and the initial displacement of the initial element on the above-mentioned vertical axis can specifically be the displacement of the scaling center point of the above-mentioned initial element on the vertical axis relative to the default position of the scaling center point.

[0109] S2. Based on the initial matrix and the mouse operation information, the initial matrix is ​​updated to obtain a target matrix.

[0110] The target matrix is ​​the updated initial matrix. After the initial element is reduced, enlarged, dragged, or any one or more operations, the corresponding initial matrix is ​​updated to the target matrix, which is used to indicate the style information of the target element (the initial element after the style transformation).

[0111] S3. Determine the target element after style transformation corresponding to the initial element according to the target matrix.

[0112] The target matrix can be used to indicate the style information of the target element, such as the position and size of the target element. The browser can render and generate the target element after the corresponding style transformation according to the target matrix.

[0113] In the embodiment of the present application, when a preset mouse event for an initial element is detected, the mouse operation information corresponding to the preset mouse event is obtained, and the initial matrix for indicating the style information of the initial element is obtained, and the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain the target matrix; and then the target element after the style transformation corresponding to the initial element is determined according to the target matrix. By updating the transformation matrix in response to the preset mouse event triggered by the user, the embodiment of the present application can dynamically adjust the style information of the element according to the user's operation, and then obtain the element after the style transformation, without the need to perform complex operations on the code related to the element style, simplifying the process of element style transformation, and effectively improving the efficiency of element style transformation.

[0114] In some embodiments, with respect to the detection of the preset mouse event, the method further includes:

[0115] When it is detected that the mouse cursor is hovering over the area where the initial element is located, the mouse button (such as the left button) is triggered and the mouse is moved, it is determined that a mouse drag event for the initial element is detected. When it is detected that the mouse cursor is hovering over the area where the initial element is located, the preset control button is triggered and the mouse wheel is rotated, it is determined that a mouse wheel scroll event for the initial element is detected.

[0116] In some embodiments, the above-mentioned initial matrix can be a matrix in Cascading Style Sheets (CSS), which can be specifically expressed as matrix (a, b, c, d, e, f), where a, b, c, d, e, f are parameters in the matrix. The first parameter in the initial matrix can be specifically a and / or d, a represents the initial scaling ratio of the initial element on the horizontal axis, d represents the initial scaling ratio of the initial element on the vertical axis, and the initial scaling ratio of the initial element on the horizontal axis in the present application is equal to the initial scaling ratio of the initial element on the vertical axis. The second element can be specifically e, and the third parameter can be specifically f. In addition, the parameters b and c included in the initial matrix represent the vertical tilt angle (the tilt angle relative to the vertical axis) and the horizontal tilt angle (the tilt angle relative to the horizontal axis), respectively. The default initial matrix corresponding to the initial element is (1, 0, 0, 1, 0, 0), that is, the initial scaling ratio of the initial element without style transformation is 1, and the initial displacement on the horizontal axis and the vertical axis in the above-mentioned screen coordinate system is 0, and the vertical tilt angle and the horizontal tilt angle are both 0.

[0117] In some other embodiments, the above initial matrix can also be expressed in the form of CSS transform attribute, for example, transform: translate(100px,50px)rotate(45deg)scale(1.5), wherein scale(1.5) indicates that the first parameter is 1.5, translate(100px,50px) indicates that the second parameter is 100px, and the third parameter is 50px, and px is the abbreviation of Pixel, which stands for pixel.

[0118] In some embodiments, when the preset mouse event is the mouse wheel scrolling event, in S2, the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix, including the following S21-S22:

[0119] S21. Based on the first parameter in the initial matrix, and the scrolling direction and the scrolling amount in the mouse operation information, update the first parameter to obtain a first target parameter.

[0120] The first target parameter is an updated first parameter, which is used to indicate the scaling ratio of the target element.

[0121] S22. Replace the first parameter in the initial matrix with the first target parameter to obtain a target matrix.

[0122] In some embodiments, in S21, based on the first parameter in the initial matrix, and the scroll direction and the scroll amount in the mouse operation information, the first parameter is updated to obtain a first target parameter, including the following S211-S213:

[0123] S211. Determine an adjustment operation corresponding to the initial element according to the scrolling direction in the mouse operation information, where the adjustment operation is a zoom-in operation or a zoom-out operation.

[0124] Among them, the corresponding relationship between the adjustment operation and the scrolling direction can be set flexibly.

[0125] In some embodiments, in S211, determining the adjustment operation corresponding to the initial element according to the scroll direction in the mouse operation information includes the following S2111-S2113:

[0126] S2111. Determine whether the scrolling direction in the mouse operation information is upward.

[0127] S2112: If yes, determine that the adjustment operation corresponding to the initial element is a zoom-in operation.

[0128] S2113: If not, it indicates that the scrolling direction is downward, and it is determined that the adjustment operation corresponding to the initial element is a zoom-out operation.

[0129] In some other embodiments, in S211, determining the adjustment operation corresponding to the initial element according to the scroll direction in the mouse operation information includes the following S2114-S2116:

[0130] S2114. Determine whether the scrolling direction in the mouse operation information is upward.

[0131] S2115: If yes, determine that the adjustment operation corresponding to the initial element is a zoom-out operation.

[0132] S2116: If not, it indicates that the scrolling direction is downward, and it is determined that the adjustment operation corresponding to the initial element is a zoom-in operation.

[0133] The adjustment operation (zoom in or zoom out) of the initial element is determined according to the scroll direction of the mouse. This flexible setting allows users to choose according to their own needs and preferences, further enhancing the user experience and adaptability.

[0134] S212: Determine the product of the preset step length and the scrolling amount in the mouse operation information as the adjustment multiple corresponding to the first parameter.

[0135] The preset step size may be a zoom ratio corresponding to a unit scroll amount. Assuming the preset step size is 0.1, when the scroll amount is 6, the zoom ratio changes by 0.1×6=0.6, that is, the adjustment multiple is 0.6.

[0136] S213, updating the first parameter according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain a first target parameter.

[0137] In some embodiments, in S213, the first parameter is updated according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain the first target parameter, including the following steps S2131-S2133:

[0138] S2131: When the adjustment operation is the zoom-in operation, determine whether the sum of the first parameter and the adjustment factor is within a preset zoom ratio range.

[0139] S2132: If yes, then the sum of the first parameter and the adjustment multiple is taken as the first target parameter.

[0140] S2133: If not, taking the maximum zoom ratio threshold within the preset zoom ratio range as the first target parameter.

[0141] It can be understood that the first parameter is included in the preset zoom ratio range. Then when the sum of the first parameter and the above-mentioned adjustment factor is not included in the preset zoom ratio range, the sum of the first parameter and the above-mentioned adjustment factor is greater than the maximum zoom ratio threshold. However, since the preset zoom ratio range is pre-defined, the sum of the first parameter and the above-mentioned adjustment factor cannot be used as the updated zoom ratio. At this time, the maximum zoom ratio threshold can be used as the above-mentioned first target parameter.

[0142] In some embodiments, in S213, the first parameter is updated according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain the first target parameter, including the following S2134-S2136:

[0143] S2134: When the adjustment operation is the zoom-out operation, determine whether the difference between the first parameter and the adjustment factor is within a preset zoom ratio range.

[0144] S2135: If yes, then the difference between the first parameter and the adjustment factor is used as the first target parameter.

[0145] S2136: If not, taking the minimum scaling ratio threshold within the preset scaling ratio range as the first target parameter.

[0146] The preset zoom ratio range may be a closed interval consisting of a minimum zoom ratio threshold and a maximum zoom ratio threshold.

[0147] It can be understood that the first parameter is included in the preset zoom ratio range. Then when the difference between the first parameter and the above-mentioned adjustment factor is not included in the preset zoom ratio range, the difference between the first parameter and the above-mentioned adjustment factor is less than the minimum zoom ratio threshold. However, since the preset zoom ratio range is pre-defined, the difference between the first parameter and the above-mentioned adjustment factor cannot be used as the updated zoom ratio. At this time, the minimum zoom ratio threshold can be used as the above-mentioned first target parameter.

[0148] For example, assuming that the preset zoom ratio range is [0.5, 5], where 0.5 is the minimum zoom ratio threshold and 5 is the maximum zoom ratio threshold. If the first parameter is 1, the adjustment factor is 0.6, and the difference between the first parameter 1 and the adjustment factor 0.6 is 0.4, 0.4 is not included in the preset zoom ratio range [0.5, 5], then the minimum zoom ratio threshold 0.5 is used as the first target parameter.

[0149] The above-mentioned embodiment provided by the present application updates the first parameter according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain the first target parameter, and can dynamically update the zoom ratio of the initial element according to the user's scrolling operation, so that the style of the initial element can reflect the user's interaction in real time; at the same time, it also considers the case when the sum of the first parameter and the adjustment multiple does not contain or is less than the preset zoom ratio range. At this time, the maximum zoom ratio threshold or the minimum zoom ratio threshold is used as the first target parameter. This processing method enables a more appropriate zoom ratio to be provided when the zoom ratio exceeds the preset zoom ratio range, while maintaining the continuity and predictability of the zoom ratio, thereby improving the user experience.

[0150] In some embodiments, when the initial matrix includes the second parameter and the third parameter, when the preset mouse event is the mouse drag event, in S2, the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix, including the following S23-S25:

[0151] S23. Based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information, update the second parameter to obtain a second target parameter.

[0152] The second target parameter is an updated second parameter, which is used to indicate the displacement of the target element on the horizontal axis.

[0153] S24. Based on the third parameter in the initial matrix, the starting click position and the current drag position, the third parameter is updated to obtain a third target parameter.

[0154] The third target parameter is an updated third parameter, which is used to indicate the displacement of the target element on the vertical axis.

[0155] S25. Replace the second parameter in the initial matrix with the second target parameter, and replace the third parameter in the initial matrix with the third target parameter to obtain a target matrix.

[0156] In some embodiments, in S23, based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information, the second parameter is updated to obtain a second target parameter, including the following S231-S232:

[0157] S231. Determine the difference between the starting horizontal coordinate of the starting click position in the mouse operation information and the second parameter in the initial matrix as the horizontal axis offset.

[0158] The horizontal axis offset is used to indicate the offset displacement between the starting click position and the scaling center point of the initial element on the horizontal axis.

[0159] S232: Determine the difference between the current horizontal coordinate of the current dragging position and the horizontal axis offset as the second target parameter.

[0160] It can be understood that when the initial element is being dragged, the position of the initial element changes with the trajectory of the mouse cursor, but the offset displacement between the starting click position and the scaling center point of the initial element is fixed. Therefore, the second target parameter and the third target parameter described below can be efficiently determined based on this fixed relationship, reducing the amount of data calculation.

[0161] In some embodiments, in S24, based on the third parameter in the initial matrix, the starting click position and the current drag position, the third parameter is updated to obtain a third target parameter, including the following S241-S242:

[0162] S241. Determine the difference between the starting vertical coordinate of the starting click position and the third parameter as the vertical axis offset.

[0163] The horizontal axis offset is used to indicate the offset displacement between the starting click position and the scaling center point of the initial element on the vertical axis.

[0164] S242: Determine the difference between the current vertical coordinate of the current dragging position and the vertical axis offset as the third target parameter.

[0165] The following combination Figure 3 For example, Figure 3 A schematic diagram of a page for a mouse drag event provided in an embodiment of the present application is exemplarily shown, such as Figure 3 As shown, in the screen coordinate system, the displacement of the initial element's scaling center point O on the horizontal axis relative to the default position of the scaling center point is e, and the displacement of the initial element's scaling center point on the vertical axis relative to the default position of the scaling center point is f, that is, the second parameter is e, and the third parameter is f. Assuming that the starting point of the mouse cursor is A(x1, y1), x1 is the starting horizontal coordinate, y1 is the starting vertical coordinate, the current drag position is B(x2, y2), x2 is the current horizontal coordinate, and y2 is the current vertical coordinate, then the horizontal axis offset can be expressed as: △x=x1-e, the vertical axis offset can be expressed as: △y=y1-f, and then the second target parameter can be expressed as: e'=x2-△x=x2-(x1-e), and the third target parameter can be expressed as: f'=y2-△y=y2-(y1-f).

[0166] By using a fixed offset to calculate displacement-related parameters, the consistency and predictability of the initial element position update can be improved during the dragging process, thereby improving the efficiency of user interaction with the page; and by calculating and updating the displacement parameters on the horizontal and vertical axes, precise control of the initial element position can be achieved, making the movement and positioning of the initial element more accurate and responsive, effectively improving the efficiency of element style transformation.

[0167] In some embodiments, when the initial matrix includes parameters corresponding to the vertical tilt angle and / or horizontal tilt angle of the initial element, the target matrix correspondingly includes parameters corresponding to the vertical tilt angle and / or horizontal tilt angle of the target element. In the case where only the initial element is scaled and / or dragged, the parameters corresponding to the vertical tilt angle and / or horizontal tilt angle of the initial element do not change, that is, the parameters corresponding to the vertical tilt angle and / or horizontal tilt angle of the target element are still all 0.

[0168] In some embodiments, the above target matrix can be expressed as matrix(a',b',c',d',e',f'), wherein a' and / or d' represents a first target parameter, e' can represent a second target parameter, f' can represent a third target parameter, b' can represent a vertical tilt angle of the target element, and c' can represent a horizontal tilt angle of the target element.

[0169] By updating the first parameter, the scaling ratio of the initial element is precisely controlled to ensure that the size of the updated initial element can accurately reflect the user's rotation operation on the scroll wheel. In addition, by updating the second parameter and the third parameter, the position of the initial element on the horizontal axis and the vertical axis is precisely controlled to ensure that the position of the updated initial element can accurately reflect the user's drag operation, thereby improving the user's interaction experience with the page.

[0170] In some embodiments, in S3, determining the target element after style transformation corresponding to the initial element according to the target matrix includes the following S31-S33:

[0171] S31. For each pixel point among the multiple pixel points included in the initial element, obtain the initial pixel coordinates of the pixel point.

[0172] In some embodiments, the initial pixel coordinates of the pixel point represent the initial position of the pixel point in the screen coordinate system, and the initial pixel coordinates can be expressed as (x, y), where x is the initial pixel horizontal coordinate and y is the initial pixel vertical coordinate.

[0173] S32, determining the target pixel coordinates of the pixel point according to the target matrix and the initial pixel coordinates, and then obtaining a plurality of target pixel coordinates of a plurality of pixel points.

[0174] The target pixel coordinates represent the position of the pixel point in the screen coordinate system after the style transformation. The target pixel coordinates can be expressed as (x', y'), where x' is the target pixel horizontal coordinate and y' is the target pixel vertical coordinate.

[0175] S33 , rendering is performed in the screen coordinate system according to the multiple target pixel coordinates to generate a target element after style transformation corresponding to the initial element.

[0176] Among them, the rendering technology in the relevant technology can be used to render in the above-mentioned screen coordinate system according to the above-mentioned multiple target pixel coordinates to generate the target element after the style transformation corresponding to the above-mentioned initial element, and then the target element can be displayed in the page to correspond to the display effect of the preset mouse event.

[0177] Optionally, in S32, according to the target matrix and the initial pixel coordinates, the target pixel coordinates of the pixel point are determined, including the following S321-S32:

[0178] S321, determining a first product of the first target parameter and the initial pixel horizontal coordinate.

[0179] S322: Determine the sum of the first product and the second target parameter as the target pixel horizontal coordinate.

[0180] S323, determining a second product of the first target parameter and the initial pixel ordinate.

[0181] S324. Determine the sum of the second product and the third target parameter as the target pixel ordinate.

[0182] S325 , using the target pixel horizontal coordinate and the target pixel vertical coordinate as the target pixel coordinates of the pixel point.

[0183] The target pixel abscissa can be expressed as x'=a'x+e', and the target pixel ordinate can be expressed as y'=a'y+f'.

[0184] Specifically, the above S32, determining the target pixel coordinates of the above pixel point according to the above target matrix and the above initial pixel coordinates, can be implemented by a preset matrix transformation formula. The preset matrix transformation formula is as follows:

[0185]

[0186] in, is the matrix corresponding to the target pixel coordinates (x', y'), is the matrix corresponding to the initial pixel coordinates (x, y), is the transformation matrix corresponding to the target matrix. The [1], [1], and [0 0 1] in the third row of each matrix indicate that the corresponding matrix is ​​a homogeneous transformation matrix, which is used to transform two-dimensional coordinates to three-dimensional coordinates. In the transformation from two-dimensional to three-dimensional, the extra dimension is set to 1 to facilitate the processing of homogeneous coordinate operations.

[0187] Through matrix transformation, the style of elements can be transformed flexibly and efficiently in various ways, such as scaling and dragging, and these transformations can be used in combination, providing developers with greater flexibility. In addition, by calculating the position of each pixel before rendering, the amount of calculation during rendering can be reduced, making the graphics rendering process more efficient, flexible, and easy to implement, effectively improving the display efficiency of the target element style transformation effect.

[0188] The following combination Figure 4 An exemplary embodiment shown in the figure further illustrates the mouse wheel scrolling event. Figure 4The flowchart of a matrix update method corresponding to a mouse wheel scrolling event provided by an embodiment of the present application is exemplarily shown. When a mouse wheel scrolling event for an initial element is detected, the scrolling direction and scrolling amount of the mouse wheel are obtained, and the initial matrix corresponding to the initial element is obtained, and the product of the preset step length and the scrolling amount is determined as the adjustment multiple corresponding to the first parameter, and then it is determined whether the scrolling direction is upward. When the scrolling direction is upward, it is determined that the adjustment operation is a zoom-in operation, and it is determined whether the sum of the first parameter and the adjustment multiple is included in the preset zoom ratio range. If so, the sum of the first parameter and the adjustment multiple is used as the first target parameter, and if not, the maximum zoom ratio threshold within the preset zoom ratio range is used as the first target parameter; when the scrolling direction is not upward, it is determined that the adjustment operation is a zoom-out operation, and it is determined whether the difference between the first parameter and the adjustment multiple is included in the preset zoom ratio range. If so, the difference between the first parameter and the adjustment multiple is used as the first target parameter, and if not, the minimum zoom ratio threshold within the preset zoom ratio range is used as the first target parameter. Finally, the first parameter in the initial matrix is ​​replaced with the first target parameter to obtain the target matrix.

[0189] The following combination Figure 5 An exemplary embodiment shown further illustrates the mouse drag event. Figure 5 A flow chart of a matrix updating method corresponding to a mouse drag event provided in an embodiment of the present application is exemplarily shown. When a mouse drag event for an initial element is detected, the starting click position of the mouse cursor in the screen coordinate system and the current dragging position of the mouse cursor in the screen coordinate system when the mouse drag event is detected are obtained, and the initial matrix corresponding to the initial element is obtained; then, the difference between the starting horizontal coordinate of the starting click position and the second parameter in the initial matrix is ​​determined as the horizontal axis offset, the difference between the starting vertical coordinate of the starting click position and the third parameter is determined as the vertical axis offset, and the difference between the current horizontal coordinate of the current drag position and the horizontal axis offset is determined as the second target parameter, and the difference between the current vertical coordinate of the current drag position and the vertical axis offset is determined as the third target parameter. Finally, the second parameter in the initial matrix is ​​replaced by the second target parameter, and the third parameter in the initial matrix is ​​replaced by the third target parameter to obtain the target matrix.

[0190] The following is a further description of the embodiments of the present application in combination with specific scenarios and related codes:

[0191] In some embodiments, when a page contains multiple elements, any one element can be designated as an initial element, so that the initial element is used as the object of style transformation. Specifically, the determination of the initial element can be implemented by the following JavaScript programming language:

[0192]

[0193]

[0194] In the above code, the function enableDragZoom(element,options) is first encapsulated to enable drag, zoom and other functions for the specified initial element. The initial element that enables drag and zoom functions is enabled through the parameter element(HTMLElement), and the configuration item object is customized through options(Object), such as scaleStep (the preset step size corresponding to each zoom), maxScale (the maximum zoom ratio threshold) and minScale (the minimum zoom ratio threshold). The above code implements the use of the default configuration for the canvas, and the preset step size of the initial element configuration is 0.1, the maximum zoom ratio threshold is 2, and the minimum zoom ratio threshold is 0.5, which means that the effect achieved by the function does not require changing the original configuration of the element's position and size, and further, there is no need to adjust the HTML (Hyper Text Markup Language) and CSS code to enable the zoom function, and the style transformation such as zooming and dragging can be achieved. The calling method is simple and convenient, which improves the efficiency of the element's style transformation.

[0195] In some embodiments, the scaling of the initial element in the embodiments of the present application can be implemented by the following JavaScript programming language:

[0196]

[0197] Among them, const delta=e.deltaY means getting the scroll direction and scroll amount of the mouse wheel. e.deltaY is a numerical value indicating the scroll amount. A positive value indicates scrolling down, and a negative value indicates scrolling up. scale+=delta>0? -config.scaleStep:config.scaleStep means increasing or decreasing the zoom ratio according to the scroll direction. config.scaleStep is a configuration value indicating the preset step size. scale=Math.min(Math.max(scale,config.minScale),config.maxScale) is used to ensure that the zoom ratio (the first target parameter) is not less than config.minScale (the minimum zoom ratio threshold) and is not greater than config.maxScale (the maximum zoom ratio threshold). The Math.min and Math.max functions are used to set the minimum zoom ratio threshold and the maximum zoom ratio threshold, respectively. requestAnimationFrame(updateMatrix) uses the requestAnimationFrame function to optimize the zoom animation. updateMatrix is ​​a function that will be executed in the next frame and can smoothly update the zoom effect instead of applying changes immediately when the preset mouse event is triggered.

[0198] In some embodiments, the preset mouse event can be detected by binding a mouse event listener, and the relevant JavaScript programming code is as follows:

[0199]

[0200] Among them, element.addEventListener('wheel',zoomElement) means adding a mouse wheel scroll event listener. When the user turns the mouse wheel, the zoomElement function will be triggered. This function can adjust the size of the initial element (enlarge or reduce) according to the scroll direction and scroll amount of the wheel, and realize the style transformation of the initial element. element.addEventListener('mousedown',startDrag) means adding an event listener for the mouse button to be triggered. When the user clicks and holds the mouse button on the initial element and moves the mouse, the startDrag function will be triggered. element.addEventListener('mousemove',dragElement) means adding a mouse drag event listener. When the user moves the mouse while holding down the mouse button, the dragElement function will be triggered. This function is usually used to update the position of the initial element during a drag operation. element.addEventListener('mouseup',stopDrag) means adding an event listener for the mouse button to be released. When the user releases the mouse button after dragging the initial element, the stopDrag function will be triggered. This function can be used to end a drag operation. element.addEventListener('contextmenu',preventPlayPause) means adding an event listener triggered by the right-click menu. When the user right-clicks the initial element with the mouse, the preventPlayPause function is triggered to prevent the default context menu behavior. For example, in some media players, a right-click may pause or play a video. By preventing the default behavior, you can customize the behavior of the context menu or not display the context menu at all.

[0201] In some embodiments, the dragging of the initial element in the embodiments of the present application can be implemented in the following JavaScript programming language:

[0202]

[0203] as well as,

[0204]

[0205]

[0206] Among them, isDragging = true sets a variable isDragging to indicate whether a mouse drag event is detected. offsetX = event.clientX-parseFloat(element.style.transform.split(',')[4]||0) is used to calculate the horizontal axis offset. offsetY = event.clientY-parseFloat(element.style.transform.split(',')[5]||0) is used to calculate the vertical axis offset. x = event.clientX-offsetX is used to calculate the second target parameter; y = event.clientY-offsetY is used to calculate the third target parameter. requestAnimationFrame(updateMatrix) uses requestAnimationFrame to schedule the updateMatrix function to be called in the next frame. Doing so can optimize the performance of the style transfer effect and ensure that the position transformation of the initial element is smooth rather than applied immediately when the event is triggered. The updateMatrix function can be used to update the initial matrix of the initial element to move the initial element to a new position. The function will be called at the time scheduled by requestAnimationFrame, when the browser has rendered and generated the target element.

[0207] In some embodiments, the updating of each parameter in the embodiments of the present application can be implemented by the following JavaScript programming language:

[0208]

[0209] Among them, const transformValue=matrix(${scale},0,0,${scale},${x},${y}) calculates a new target matrix and stores it in the variable transformValue. The first ${scale} in matrix(${scale},0,0,${scale},${x},${y}) is the first target parameter mentioned above, the second and third parameters are both 0, indicating that the initial element is not tilted, the fourth parameter ${scale} can also represent the first target parameter, the fifth parameter ${x} is the second target parameter mentioned above, and the sixth parameter ${y} is the third target parameter mentioned above. element.style.transform=transformValue is used to update according to the calculated first target parameter, second target parameter, and third target parameter assignment to generate the target element.

[0210] The style transformation method provided in this application uses a transformation matrix to ignore the positioning of the initial elements, and can also perform efficient style transformation on the absolute positioned initial elements, making the layout of the elements more flexible; in addition, the code is optimized using the requestAnimationFrame function to ensure that only one redraw is performed between each frame, making the scaling and dragging effects of the initial elements smoother; and a concise function calling interface is provided to make the code clearer, more concise, and easier to maintain and expand.

[0211] The style transformation method provided in this application can be widely used in the user interface design of web pages and applications, and is particularly suitable for scenarios that require zooming and dragging operations, such as map applications, video playback, large-screen visualization, image browsers, chart drawing, etc. This application directly starts the zooming and dragging functions, which is simple and efficient, greatly improving the interactivity and visual effects of the user interface and enhancing the user experience.

[0212] Please refer to the following Figure 6 , which is a schematic diagram of the structure of a style conversion device provided by an exemplary embodiment of the present application. Figure 6 As shown, the style conversion device 600 includes:

[0213] The acquisition module 601 is used to acquire the mouse operation information corresponding to the preset mouse event and the initial matrix corresponding to the initial element when a preset mouse event for the initial element is detected, and the initial matrix is ​​used to indicate the style information of the initial element;

[0214] An updating module 602 is used to update the initial matrix based on the initial matrix and the mouse operation information to obtain a target matrix;

[0215] The determination module 603 is used to determine the target element after style transformation corresponding to the initial element according to the target matrix.

[0216] In a possible implementation, the preset mouse event is a mouse wheel scrolling event or a mouse dragging event;

[0217] When the preset mouse event is the mouse wheel scrolling event, the mouse operation information corresponding to the preset mouse event includes: the scrolling direction of the mouse wheel and the scrolling amount of the mouse wheel;

[0218] When the preset mouse event is the mouse drag event, the mouse operation information corresponding to the preset mouse event includes: the starting click position of the mouse cursor in the screen coordinate system, and the current drag position of the mouse cursor in the screen coordinate system when the mouse drag event is detected.

[0219] In a possible implementation, the screen coordinate system includes a horizontal axis and a vertical axis; the initial matrix includes at least one of the following parameters: a first parameter, a second parameter and a third parameter; wherein the first parameter is used to indicate an initial scaling ratio of the initial element, the second parameter is used to indicate an initial displacement of the initial element on the horizontal axis, and the third parameter is used to indicate an initial displacement of the initial element on the vertical axis.

[0220] In a possible implementation, when the preset mouse event is the mouse wheel scrolling event, the updating module 602 includes:

[0221] A first updating unit, configured to update the first parameter based on the first parameter in the initial matrix and the scrolling direction and the scrolling amount in the mouse operation information to obtain a first target parameter;

[0222] The first replacement unit is used to replace the first parameter in the initial matrix with the first target parameter to obtain a target matrix.

[0223] In a possible implementation, the first updating unit includes:

[0224] A first determining subunit is used to determine an adjustment operation corresponding to the initial element according to the scrolling direction in the mouse operation information, where the adjustment operation is a zoom-in operation or a zoom-out operation;

[0225] A second determining subunit, configured to determine the product of a preset step length and the scrolling amount in the mouse operation information as an adjustment multiple corresponding to the first parameter;

[0226] The updating subunit is used to update the first parameter according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain a first target parameter.

[0227] In a possible implementation, the updating subunit is specifically used to:

[0228] When the adjustment operation is the zoom-in operation, determining whether the sum of the first parameter and the adjustment multiple is within a preset zoom ratio range;

[0229] If yes, the sum of the first parameter and the adjustment multiple is taken as the first target parameter;

[0230] If not, the maximum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0231] In a possible implementation, the updating subunit is specifically used to:

[0232] When the adjustment operation is the zoom-out operation, determining whether the difference between the first parameter and the adjustment factor is within a preset zoom ratio range;

[0233] If yes, the difference between the first parameter and the adjustment factor is used as the first target parameter;

[0234] If not, the minimum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0235] In a possible implementation, the initial matrix includes: the second parameter and the third parameter;

[0236] When the preset mouse event is the mouse drag event, the updating module 602 includes:

[0237] A second updating unit, configured to update the second parameter based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information, to obtain a second target parameter;

[0238] A third updating unit, configured to update the third parameter based on the third parameter in the initial matrix, the starting click position and the current drag position, to obtain a third target parameter;

[0239] The second replacement unit is used to replace the second parameter in the initial matrix with the second target parameter, and replace the third parameter in the initial matrix with the third target parameter to obtain a target matrix.

[0240] In a possible implementation, the second updating unit is specifically configured to:

[0241] Determine the difference between the starting horizontal coordinate of the starting click position in the mouse operation information and the second parameter in the initial matrix as the horizontal axis offset;

[0242] Determine the difference between the current horizontal coordinate of the current drag position and the horizontal axis offset as the second target parameter;

[0243] The third updating unit is specifically used for:

[0244] The difference between the starting ordinate of the starting click position and the third parameter is determined as the ordinate offset;

[0245] The difference between the current vertical coordinate of the current dragging position and the vertical axis offset is determined as the third target parameter.

[0246] In a possible implementation, the determining module 603 includes:

[0247] An acquiring unit, configured to acquire, for each pixel point among a plurality of pixel points included in the initial element, an initial pixel coordinate of the pixel point;

[0248] A determination unit, configured to determine the target pixel coordinates of the pixel point according to the target matrix and the initial pixel coordinates, and further obtain a plurality of target pixel coordinates of a plurality of pixel points;

[0249] A rendering unit is used to render in the screen coordinate system according to the multiple target pixel coordinates to generate a target element after style transformation corresponding to the initial element.

[0250] The division of each module in the above-mentioned style conversion device 600 is only for illustrative purposes. In other embodiments, the style conversion device can be divided into different modules as needed to complete all or part of the functions of the above-mentioned style conversion device. The implementation of each module in the style conversion device provided in the embodiments of this specification can be in the form of a computer program. The computer program can be run on a terminal or a server. The program modules constituted by the computer program can be stored in the memory of the terminal or the server. When the computer program is executed by the processor, all or part of the steps of the style conversion method described in the embodiments of this specification are implemented.

[0251] See next Figure 7 , which is a schematic diagram of the structure of an electronic device provided by an exemplary embodiment of the present application. Figure 7 As shown, the electronic device 700 may include: a processor 710 and a memory 720 , and may also include a user interface 730 , a network interface 740 and a communication bus 750 .

[0252] Among them, the processor 710 may include one or more processing cores. The processor 710 uses various interfaces and lines to connect various parts of the entire electronic device 700, and executes various functions and processes data of the electronic device 700 by running or executing instructions, programs, code sets or instruction sets stored in the memory 720, and calling data stored in the memory 720. Optionally, the processor 710 can be implemented in at least one hardware form of digital signal processing (Digital Signal Processing, DSP), field programmable gate array (Field-Programmable Gate Array, FPGA), and programmable logic array (Programmable Logic Array, PLA). The processor 710 can integrate one or a combination of a central processing unit (Central Processing Unit, CPU), a graphics processing unit (Graphics Processing Unit, GPU) and a modem. Among them, the CPU mainly processes operating systems and applications, etc.; the GPU is responsible for rendering and drawing the content to be displayed on the display screen; the modem is used to process wireless communications. It can be understood that the above-mentioned modem may not be integrated into the processor 710, and it can be implemented separately through a chip.

[0253] Among them, the memory 720 may include a random access memory (Random Access Memory, RAM) and may also include a read-only memory (Read-Only Memory). Optionally, the memory 720 includes a non-transitory computer-readable storage medium. The memory 720 can be used to store instructions, programs, codes, code sets or instruction sets. The memory 720 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as a receiving function, a control function, etc.), instructions for implementing the above-mentioned various method embodiments, etc.; the data storage area may store data involved in the above-mentioned various method embodiments, etc. The memory 720 may also be optionally at least one storage device located away from the aforementioned processor 710. As Figure 7 As shown, the memory 720 as a computer storage medium may include an operating system, a network communication module, a user interface module, and program instructions.

[0254] Optionally, the communication bus 750 is used to realize the connection and communication between these components. The user interface 730 may include a display screen (Display), a camera (Camera), and may also include a standard wired interface and a wireless interface; the network interface 740 may optionally include a standard wired interface and a wireless interface (such as a WIFI interface).

[0255] exist Figure 7 In the electronic device 700 shown, the processor 710 may be used to call program instructions stored in the memory 720 and specifically perform the following operations:

[0256] When a preset mouse event for the initial element is detected, mouse operation information corresponding to the preset mouse event is obtained, and an initial matrix corresponding to the initial element is obtained, where the initial matrix is ​​used to indicate style information of the initial element;

[0257] Based on the initial matrix and the mouse operation information, the initial matrix is ​​updated to obtain a target matrix;

[0258] The target element after style transformation corresponding to the initial element is determined according to the target matrix.

[0259] In a possible implementation, the preset mouse event is a mouse wheel scrolling event or a mouse dragging event;

[0260] When the preset mouse event is the mouse wheel scrolling event, the mouse operation information corresponding to the preset mouse event includes: the scrolling direction of the mouse wheel and the scrolling amount of the mouse wheel;

[0261] When the preset mouse event is the mouse drag event, the mouse operation information corresponding to the preset mouse event includes: the starting click position of the mouse cursor in the screen coordinate system, and the current drag position of the mouse cursor in the screen coordinate system when the mouse drag event is detected.

[0262] In a possible implementation, the screen coordinate system includes a horizontal axis and a vertical axis; the initial matrix includes at least one of the following parameters: a first parameter, a second parameter and a third parameter; wherein the first parameter is used to indicate an initial scaling ratio of the initial element, the second parameter is used to indicate an initial displacement of the initial element on the horizontal axis, and the third parameter is used to indicate an initial displacement of the initial element on the vertical axis.

[0263] In a possible implementation, when the preset mouse event is the mouse wheel scrolling event, the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix, including:

[0264] Based on the first parameter in the initial matrix, and the scrolling direction and the scrolling amount in the mouse operation information, the first parameter is updated to obtain a first target parameter;

[0265] The first parameter in the initial matrix is ​​replaced by the first target parameter to obtain a target matrix.

[0266] In a possible implementation, the first parameter is updated based on the first parameter in the initial matrix and the scrolling direction and the scrolling amount in the mouse operation information to obtain the first target parameter, including:

[0267] Determine an adjustment operation corresponding to the initial element according to the scroll direction in the mouse operation information, the adjustment operation being a zoom-in operation or a zoom-out operation;

[0268] The product of the preset step length and the scrolling amount in the mouse operation information is determined as the adjustment multiple corresponding to the first parameter;

[0269] The first parameter is updated according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain a first target parameter.

[0270] In a possible implementation, the updating of the first parameter according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain the first target parameter includes:

[0271] When the adjustment operation is the zoom-in operation, determining whether the sum of the first parameter and the adjustment multiple is within a preset zoom ratio range;

[0272] If yes, the sum of the first parameter and the adjustment multiple is taken as the first target parameter;

[0273] If not, the maximum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0274] In a possible implementation, updating the first parameter according to the adjustment operation, the adjustment multiple, and the first parameter in the initial matrix to obtain the first target parameter includes:

[0275] When the adjustment operation is the zoom-out operation, determining whether the difference between the first parameter and the adjustment factor is within a preset zoom ratio range;

[0276] If yes, the difference between the first parameter and the adjustment factor is used as the first target parameter;

[0277] If not, the minimum scaling ratio threshold within the preset scaling ratio range is used as the first target parameter.

[0278] In a possible implementation, the initial matrix includes: the second parameter and the third parameter;

[0279] When the preset mouse event is the mouse drag event, the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix, including:

[0280] Based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information, the second parameter is updated to obtain a second target parameter;

[0281] Based on the third parameter in the initial matrix, the starting click position and the current drag position, the third parameter is updated to obtain a third target parameter;

[0282] The second parameter in the initial matrix is ​​replaced by the second target parameter, and the third parameter in the initial matrix is ​​replaced by the third target parameter to obtain a target matrix.

[0283] In a possible implementation, the second parameter is updated based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information to obtain the second target parameter, including:

[0284] Determine the difference between the starting horizontal coordinate of the starting click position in the mouse operation information and the second parameter in the initial matrix as the horizontal axis offset;

[0285] Determine the difference between the current horizontal coordinate of the current drag position and the horizontal axis offset as the second target parameter;

[0286] The third parameter is updated based on the third parameter in the initial matrix, the starting click position and the current drag position to obtain the third target parameter, including:

[0287] The difference between the starting ordinate of the starting click position and the third parameter is determined as the ordinate offset;

[0288] The difference between the current vertical coordinate of the current dragging position and the vertical axis offset is determined as the third target parameter.

[0289] In a possible implementation, determining the target element after style transformation corresponding to the initial element according to the target matrix includes:

[0290] For each pixel point among the multiple pixel points included in the initial element, obtaining the initial pixel coordinates of the pixel point;

[0291] Determine the target pixel coordinates of the pixel point according to the target matrix and the initial pixel coordinates, and then obtain multiple target pixel coordinates of multiple pixel points;

[0292] Rendering is performed in the screen coordinate system according to the multiple target pixel coordinates to generate a target element after style transformation corresponding to the initial element.

[0293] The embodiment of the present application also provides a computer-readable storage medium, which stores instructions, and when the instructions are executed on a computer or a processor, the computer or the processor executes one or more steps in the above embodiment. If the components of the above style conversion device are implemented in the form of software functional units and sold or used as independent products, they can be stored in the above computer-readable storage medium.

[0294] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The above-mentioned computer program product includes one or more computer instructions. When the above-mentioned computer program instructions are loaded and executed on a computer, the above-mentioned process or function according to the embodiment of the present application is generated in whole or in part. The above-mentioned computer can be a general-purpose computer, a special-purpose computer, a computer network or other programmable devices. The above-mentioned computer instructions can be stored in a computer-readable storage medium or transmitted by the above-mentioned computer-readable storage medium. The above-mentioned computer instructions can be transmitted from a website site, a computer, a server or a data center to another website site, a computer, a server or a data center by wired (such as coaxial cable, optical fiber, digital subscriber line (Digital Subscriber Line, DSL)) or wireless (such as infrared, wireless, microwave, etc.) mode. The above-mentioned computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server, a data center, etc. that contains one or more available media integrated. The above-mentioned available media can be magnetic media (for example, floppy disks, hard disks, tapes), optical media (for example, digital versatile discs (DVD)), or semiconductor media (for example, solid state disks (SSD)), etc.

[0295] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. The aforementioned storage medium includes: ROM, RAM, magnetic disk or optical disk and other media that can store program codes. In the absence of conflict, the technical features in this embodiment and the implementation scheme can be combined arbitrarily.

[0296] The above-mentioned embodiments are merely preferred embodiments of the present application and are not intended to limit the scope of the present application. Without departing from the design spirit of the present application, various modifications and improvements made to the technical solutions of the present application by ordinary technicians in this field should fall within the protection scope determined by the claims of the present application.

Claims

1. A style transformation method, characterized in that: include: When a preset mouse event for an initial element is detected, mouse operation information corresponding to the preset mouse event is obtained, and an initial matrix corresponding to the initial element is obtained, where the initial matrix is ​​used to indicate style information of the initial element; The initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix; Determine a target element after style transformation corresponding to the initial element according to the target matrix.

2. The method according to claim 1, characterized in that The preset mouse event is a mouse wheel scrolling event or a mouse dragging event; When the preset mouse event is the mouse wheel scrolling event, the mouse operation information corresponding to the preset mouse event includes: the scrolling direction of the mouse wheel and the scrolling amount of the mouse wheel; When the preset mouse event is the mouse drag event, the mouse operation information corresponding to the preset mouse event includes: the starting click position of the mouse cursor in the screen coordinate system, and the current drag position of the mouse cursor in the screen coordinate system when the mouse drag event is detected.

3. The method according to claim 2, characterized in that The screen coordinate system includes a horizontal axis and a vertical axis; the initial matrix includes at least one of the following parameters: a first parameter, a second parameter and a third parameter; wherein the first parameter is used to indicate an initial scaling ratio of the initial element, the second parameter is used to indicate an initial displacement of the initial element on the horizontal axis, and the third parameter is used to indicate an initial displacement of the initial element on the vertical axis.

4. The method according to claim 3, characterized in that When the preset mouse event is the mouse wheel scrolling event, the initial matrix is ​​updated based on the initial matrix and the mouse operation information to obtain a target matrix, including: Based on the first parameter in the initial matrix, and the scrolling direction and the scrolling amount in the mouse operation information, the first parameter is updated to obtain a first target parameter; The first parameters in the initial matrix are replaced by the first target parameters to obtain a target matrix.

5. The method according to claim 4, characterized in that The updating of the first parameter based on the first parameter in the initial matrix and the scrolling direction and the scrolling amount in the mouse operation information to obtain a first target parameter includes: Determining an adjustment operation corresponding to the initial element according to the scrolling direction in the mouse operation information, the adjustment operation being a zoom-in operation or a zoom-out operation; Determine the product of a preset step length and the scrolling amount in the mouse operation information as an adjustment multiple corresponding to the first parameter; The first parameter is updated according to the adjustment operation, the adjustment multiple and the first parameter in the initial matrix to obtain a first target parameter.

6. The method according to claim 3, characterized in that The initial matrix includes: the second parameter and the third parameter; When the preset mouse event is the mouse drag event, the updating of the initial matrix based on the initial matrix and the mouse operation information to obtain a target matrix includes: Based on the second parameter in the initial matrix, and the starting click position and the current drag position in the mouse operation information, the second parameter is updated to obtain a second target parameter; Based on the third parameter in the initial matrix, the starting click position and the current drag position, the third parameter is updated to obtain a third target parameter; The second parameter in the initial matrix is ​​replaced by the second target parameter, and the third parameter in the initial matrix is ​​replaced by the third target parameter to obtain a target matrix.

7. The method according to claim 2, characterized in that The determining, according to the target matrix, a target element after style transformation corresponding to the initial element comprises: For each pixel point among the multiple pixel points included in the initial element, obtaining the initial pixel coordinates of the pixel point; Determine the target pixel coordinates of the pixel point according to the target matrix and the initial pixel coordinates, and then obtain multiple target pixel coordinates of multiple pixel points; Rendering is performed in the screen coordinate system according to the multiple target pixel coordinates to generate a target element after style transformation corresponding to the initial element.

8. A style conversion device, characterized in that: include: An acquisition module, configured to, when a preset mouse event for an initial element is detected, acquire mouse operation information corresponding to the preset mouse event, and acquire an initial matrix corresponding to the initial element, wherein the initial matrix is ​​used to indicate style information of the initial element; An updating module, used for updating the initial matrix based on the initial matrix and the mouse operation information to obtain a target matrix; A determination module is used to determine the target element after style transformation corresponding to the initial element according to the target matrix.

9. An electronic device, characterized in that: include: Processor and memory; The memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the steps of the method according to any one of claims 1 to 7.

10. A computer storage medium storing a plurality of instructions, wherein the instructions are suitable for being loaded by a processor and executing the steps of the method according to any one of claims 1 to 7.

Images