Vector graph processing method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a vector graphic processing method and device, electronic equipment and a storage medium. The vector graphic processing method comprises the following steps: if a first operation acting on a first graphic is detected, determining that the first graphic is selected; in response to a second operation acting on the linear gradual change tool button, determining that the first graph enters a linear gradual change editing mode; in the linear gradual change editing mode, responding to a third operation acting on the first graph, and displaying a gradual change axis in the first area; in response to fourth operation acting on the second area where the gradual change shaft is located, the node of the gradual change shaft is adjusted; in this way, the nodes of the gradual change shaft can be directly adjusted in the touch area (such as the second area) displayed by the first graph, a color picker or a color matching panel and the like do not need to be additionally unfolded, the space of a touch screen can be saved, and the color matching efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the field of, but not limited to, vector graphics editing technology, and in particular to a vector graphics processing method and device, electronic equipment and storage medium. Background Art

[0002] Vector graphics are graphics described using direct and curved lines; the elements that make up these graphics are some points, lines, rectangles, polygons, circles and / or arcs, etc. These graphics can usually be obtained through mathematical formula calculations and have attributes such as color, shape, outline, size and / or screen position. Vector graphics have the characteristic of not being distorted after editing.

[0003] Currently, when editing the color of vector graphics on the touch screen of an electronic device, it is usually necessary to move back and forth between the nodes of the selected vector graphics and the color picker, etc.; and the adjustment of at least two of the hue, brightness and saturation in the color adjustment needs to be performed in multiple steps; this is not efficient for color editing of vector graphics, which brings a bad experience to users. Summary of the invention

[0004] In view of this, an embodiment of the present invention provides a vector graphics processing method and device, an electronic device and a storage medium to solve the above technical problems.

[0005] The technical solution of the present invention is achieved in this way:

[0006] In a first aspect, an embodiment of the present invention provides a vector graphics processing method, comprising:

[0007] If a first operation acting on a first graphic is detected, determining that the first graphic is selected;

[0008] In response to a second operation on a linear gradient tool button, determining that the first graphic enters a linear gradient editing mode;

[0009] In the linear gradient editing mode, in response to a third operation acting on the first graphic, a gradient axis is displayed in the first area;

[0010] In response to a fourth operation acting on the second region where the gradient axis is located, the nodes of the gradient axis are adjusted.

[0011] In the above scheme, the method also includes: in response to a fifth operation acting on the third area where the node is located, adjusting the color of the node, wherein the color includes at least one of the following: hue, brightness and saturation.

[0012] In the above solution, in response to the third operation acting on the first graphic, displaying the gradient axis in the first area includes:

[0013] In response to the third operation acting on the first graphic being a first drag operation, determining a start point and an end point of the gradient axis based on a start position and an end position of the first drag operation respectively;

[0014] The first area displays a gradient axis formed based on the starting point and the end point, wherein nodes of the gradient axis are displayed at the starting point and the end point respectively, the straight line from the starting point to the end point is the length of the gradient axis, and the direction from the starting point to the end point is the gradient direction of the gradient axis.

[0015] In the above solution, in response to the third operation acting on the first graphic, displaying the gradient axis in the first area includes:

[0016] In response to a third operation performed on the first graphic, enlarging the first graphic;

[0017] The enlarged first graphic is displayed in the first area and the gradient axis is displayed in the first area.

[0018] In the above solution, in response to the fourth operation acting on the second area where the gradient axis is located, adjusting the nodes of the gradient axis includes one of the following:

[0019] In response to a fourth operation acting on the second area where the gradient axis is located being a single-finger tapping operation, adjusting the number of nodes of the gradient axis and / or restoring the initial color of the nodes based on the single-finger tapping operation;

[0020] In response to a fourth operation acting on the second area where the gradient axis is located being a multi-finger tapping operation, based on the multi-finger tapping operation, adjusting the number of nodes on the gradient axis to be the same as the number of multi-finger tapping operations;

[0021] In response to the fourth operation acting on the second area where the gradient axis is located being a second drag operation on the gradient axis, the position of the node on the gradient axis is moved based on the second drag operation.

[0022] In the above scheme, adjusting the number of nodes of the gradient axis and / or restoring the initial color of the nodes based on the single-finger tap operation includes one of the following:

[0023] Based on the single-finger tap operation being a double-click operation on the node, the node's original color is restored;

[0024] Determine to delete the node based on the single-finger tap operation being a triple-tap operation acting on the node;

[0025] Based on the single-finger tap operation being a tap operation acting between two nodes, it is determined to add a node between the two nodes.

[0026] In the above solution, in response to the fifth operation acting on the third area where the node is located, adjusting the color of the node includes at least one of the following:

[0027] In response to the fifth operation acting on the third area where the node is located being a third drag operation, adjusting the hue of the node based on a ratio of a first length to a baseline length of the third area, wherein the first length is a length of a lead line of the node dragged by the third drag operation;

[0028] In response to the fifth operation acting on the third area where the node is located being the fourth drag operation, adjusting the brightness of the node based on the ratio of the first angle to the second angle, wherein the first angle is the angle between the lead line and the reference line of the node dragged by the fourth drag operation, and the second angle is a preset angle;

[0029] In response to a fifth operation acting on the third region where the node is located being a pressing operation, the saturation of the node is adjusted based on the pressing operation.

[0030] In the above solution, adjusting the hue of the node based on the ratio of the first length to the baseline length of the third area includes:

[0031] Determining a first value based on a ratio of the first length to the length of the reference line;

[0032] The hue of the node is determined based on the product of the first value and the second value, wherein the second value is a maximum value of a value range of the hue.

[0033] In the above solution, adjusting the brightness of the node based on the ratio of the first angle to the second angle includes:

[0034] If the first angle is the first angle of the first direction, the third value is determined based on the ratio of the first angle to the second angle; the fifth value is determined based on the product of the third value and the fourth value, and the fourth value is the middle value of the brightness range; the brightness of the node is determined based on the difference between the fourth value and the fifth value; or,

[0035] If the first angle is the first angle in the second direction, determine the third value based on the ratio of the first angle to the second angle; determine the fifth value based on the product of the third value and the fourth value, and the fourth value is the middle value of the brightness range; determine the brightness of the node based on the sum of the fourth value and the fifth value.

[0036] In the above scheme, the saturation of the node is adjusted based on the pressing operation, including:

[0037] In the case where it is determined that the time for which the pressing operation acts on the node is greater than the first predetermined time, monitoring the pressing behavior,

[0038] When the pressure of the pressing behavior is greater than or equal to the preset pressure and the node is continuously pressed, the saturation of the node is adjusted to change cyclically from the maximum value to the minimum value of the saturation until the pressing behavior ends;

[0039] Determines the saturation that the press behavior cycles to when it ends as the saturation of the node.

[0040] In the above scheme, in response to the fifth operation acting on the third area where the node is located, before adjusting the color of the node, the method further includes: adjusting the displayed gradient axis when the third operation is detected again within the second predetermined time range of the gradient axis; or

[0041] The method further includes: adjusting the displayed gradient axis when a third operation acting on the gradient axis is detected again.

[0042] In the above solution, the method further includes: in response to a sixth operation acting on the linear gradient tool, determining that the first graphic exits the linear gradient editing mode.

[0043] In a second aspect, an embodiment of the present invention provides a vector graphics processing device, including:

[0044] A determination module, configured to determine that the first graphic is selected if a first operation acting on the first graphic is detected;

[0045] The determination module is further used to determine that the first graphic enters a linear gradient editing mode in response to a second operation acting on the linear gradient tool button;

[0046] A display module, configured to display a gradient axis in the first area in response to a third operation performed on the first graphic in a linear gradient editing mode;

[0047] The processing module is used for adjusting the nodes of the gradient axis in response to a fourth operation acting on the second area where the gradient axis is located.

[0048] In a third aspect, an embodiment of the present invention provides an electronic device, comprising a processor and a memory for storing a computer program that can be run on the processor; wherein, when the processor is used to run the computer program, the vector graphics processing method described in any embodiment of the present invention is implemented.

[0049] In a fourth aspect, an embodiment of the present invention further provides a computer storage medium, wherein the computer storage medium contains computer executable instructions, and the computer executable instructions are executed by a processor to implement the vector graphics processing method described in any embodiment of the present invention.

[0050] In a fifth aspect, an embodiment of the present invention provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are executed by a processor, the vector graphics processing method described in any embodiment of the present invention is implemented.

[0051] In an embodiment of the present invention, if a first operation acting on a first graphic is detected, it is determined that the first graphic is selected; in response to a second operation acting on a linear gradient tool button, it is determined that the first graphic enters a linear gradient editing mode; in the linear gradient editing mode, in response to a third operation acting on the first graphic, a gradient axis is displayed in a first area; in response to a fourth operation acting on a second area where the gradient axis is located, the nodes of the gradient axis are adjusted.

[0052] In this way, the embodiment of the present invention can directly adjust the nodes of the gradient axis in the touch area (such as the second area) displayed in the first graphic, without the need to additionally expand the color picker or the color adjustment panel, etc.; on the one hand, this can save the area of ​​the display screen occupied by the color picker or the color adjustment panel, so that touch objects such as fingers have more flexible movement space, thereby improving the user experience; on the other hand, there is no need to move back and forth between the first graphic and the color picker or the color adjustment panel, etc., thereby improving the color adjustment efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1 A schematic diagram of a color adjustment panel provided by an embodiment of the present invention.

[0054] Figure 2 A schematic diagram of a first color picker provided by an embodiment of the present invention.

[0055] Figure 3 A schematic diagram of a second color picker provided by an embodiment of the present invention.

[0056] Figure 4 A schematic flow chart of a first vector graphics processing method provided in an embodiment of the present invention.

[0057] Figure 5 A schematic diagram of defining a gradient axis provided in an embodiment of the present invention.

[0058] Figure 6 A schematic flow chart of a second vector graphics processing method provided in an embodiment of the present invention.

[0059] Figure 7 A schematic diagram of restoring the initial color of a node provided by an embodiment of the present invention.

[0060] Figure 8 A schematic diagram of deleting a node provided by an embodiment of the present invention.

[0061] Fig. 9 A schematic diagram of adding a node provided by an embodiment of the present invention.

[0062] Fig.10 A schematic diagram of determining three nodes provided in an embodiment of the present invention.

[0063] Fig.11 A schematic diagram of determining four nodes provided in an embodiment of the present invention.

[0064] Fig.12 A schematic diagram of determining two nodes provided by an embodiment of the present invention.

[0065] Fig.13 A schematic diagram of adjusting the position of a node on a gradient axis provided by an embodiment of the present invention.

[0066] Fig.14 A schematic flow chart of a third vector graphics processing method provided in an embodiment of the present invention.

[0067] Fig.15 A schematic flow chart of a fourth vector graphics processing method provided in an embodiment of the present invention.

[0068] Fig.16 A schematic diagram of a lead line showing a node on a gradient axis provided by an embodiment of the present invention.

[0069] Fig.17 A schematic diagram showing a first graphic and a gradient axis is provided in an embodiment of the present invention.

[0070] Fig.18 A schematic flow chart of a fifth vector graphics processing method provided in an embodiment of the present invention.

[0071] Fig.19 A schematic diagram of adjusting the hue of a node provided by an embodiment of the present invention.

[0072] Fig. 20 A schematic diagram of adjusting the brightness of a node provided by an embodiment of the present invention.

[0073] Fig.21 A schematic diagram of adjusting the saturation of a node provided by an embodiment of the present invention.

[0074] Fig. 22 A schematic flow chart of a sixth vector graphics processing method provided in an embodiment of the present invention.

[0075] Fig.23 A schematic diagram of the structure of a first vector graphics processing device provided in an embodiment of the present invention.

[0076] Fig.24 A schematic diagram of the structure of a second vector graphics processing device provided by an embodiment of the present invention.

[0077] Fig.25 A schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0078] The present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0079] In the subsequent description, the use of suffixes such as "module", "component" or "unit" to indicate elements is only for the purpose of facilitating the description of the present invention, and has no specific meaning in itself. Therefore, "module", "component" or "unit" can be used in a mixed manner. In addition, in the subsequent description, the use of prefixes such as "first" or "second" to identify information is only for the purpose of facilitating the description of the present invention, and has no specific meaning in itself. In addition, in the subsequent description, "multiple" refers to two or more; "multiple" refers to two or more.

[0080] In some embodiments, some terminology explanations for vector graphics are provided:

[0081] Linear gradient: Colors are distributed along a straight line, which is a point-to-point gradient. To create a linear gradient, at least two color nodes must be defined. In design drawings, two-color gradients are most commonly used, and more than two colors are called multi-color gradients. The color node may refer to the node involved in the embodiment of the present invention.

[0082] Hue: One of the attributes of color; used to distinguish various colors such as red, yellow, green, and blue.

[0083] Saturation: refers to the vividness of a color, also known as purity. Saturation depends on the ratio of the color component to the achromatic component (gray) in the color. The larger the color component, the greater the saturation; the larger the achromatic component, the smaller the saturation.

[0084] Brightness: Also known as lightness. Brightness indicates the lightness or darkness of a color, reflecting a person's subjective sense of brightness.

[0085] With the growing demand for mobile office and the increasing use of portable devices and tablet computers, many design and drawing tasks have been transferred to touch-screen devices with small and medium-sized screens, such as mobile phones and / or tablets; for example, scenarios involving flowchart drawing, prototype design, painting creation, slide production, and using office drawing software through cloud computer and cloud desktop services. In these design and drawing scenarios, editing and coloring vector graphics using portable devices with limited screens still face many challenges, and there is a need for simpler and faster interactive methods to improve design output efficiency.

[0086] Because the screen size is limited, the mainstream drawing applications on portable touch screen devices (hand-painted screens, tablets, and mobile phones) usually have the following four solutions when setting linear gradient colors for vector graphics in the screen:

[0087] Solution 1: Select a graphic; select Gradient Fill in the Color option of the Graphic Properties panel to bring up several preset gradient color cards for users to choose directly. Users cannot edit specific color values.

[0088] Solution 2: Select a graphic and expand the graphic properties panel. After selecting Gradient Fill in the color options of the properties panel, a gradient color bar with two color labels at the top and the end will be displayed on the panel by default. Click any color label to open the color palette, which contains square or circular color cards of several pure colors. Users can click the color card to select a color as the color of the node.

[0089] Solution 3: Select a certain graphic, select the Gradient Tool-Linear Fill in the toolbar; slide your finger on the layer, and the starting point and the end point form a gradient line. The direction of the line is the direction of the gradient. The starting point and the end point of the line (gradient axis) are each accompanied by a node by default. Click any node, and then click the color wheel mark on the toolbar to bring up the color palette. For example, Figure 1 As shown in the figure, click any color block of red, yellow, blue, green, and purple in the color palette, and a number of pure color cards arranged in order of lightness and darkness will appear on the right side under the color system. Users can click the color card and select a color as the color of the node. Users can also control the position of the node by sliding. Clicking a blank space on the gradient axis can increase the number of nodes. Selecting a node and clicking the delete button can remove the node.

[0090] Solution 4: Solution 4 is similar to Solution 3, except that when selecting node colors, you can use the color picker to select colors in a more detailed manner, rather than just selecting from the color cards provided by the system. In the color picker, users can select colors based on the HSB (Hue, Saturation, Brightness) or HSL (Hue, Saturation, Lightness), RGB (red, green, blue), LAB (brightness component, green-red axis, blue-yellow axis) or CMYK (cyan, magenta, yellow, black) color models, or enter the hexadecimal value of the color to specify the color; for example, Figure 2 As shown in the figure, the color picker displays HSL and RGB to select colors. There are two specific color picking methods. Taking HSB color as an example: one method requires the user to slide the sliders of the three parameters H\S\B respectively to get the final HSB color value; the other method requires the user to operate twice, such as Figure 3 As shown, first select the desired hue (H value) by sliding the slider on the color wheel, and then click on the saturation-brightness square palette in the middle of the color wheel (to obtain the S value and B value) to get the final color.

[0091] like Figure 4 As shown, an embodiment of the present invention provides a vector graphics processing method, comprising the following steps:

[0092] Step S101: if a first operation acting on a first graphic is detected, determining that the first graphic is selected;

[0093] Step S102: In response to a second operation on a linear gradient tool button, determining that the first graphic enters a linear gradient editing mode;

[0094] Step S103: in the linear gradient editing mode, in response to a third operation acting on the first graphic, displaying a gradient axis in the first area;

[0095] Step S104: In response to the fourth operation acting on the second area where the gradient axis is located, adjusting the nodes of the gradient axis.

[0096] The vector graphics processing method provided in the embodiment of the present invention can be executed by an electronic device; the electronic device can be any mobile terminal or fixed terminal. For example, the terminal can be but not limited to at least one of the following: a mobile communication device, a computer, a server, a tablet computer, a gaming device, an intelligent office device, an industrial device and / or a wearable device, etc. For example, the terminal can be a terminal with a touch screen; the touch screen can be touched by a finger or a touch body.

[0097] In some embodiments, the first graphic may be any vector graphic. For example, the first graphic may be a graphic in the previous embodiment, or the first graphic may have any graphic that is not distorted after editing. For another example, the first graphic may be a graphic of at least one of the following types: Scalable Vector Graphics (SVG), AI (Adobe Illustrator), Encapsulated PostScript (EPS), Portable Document Format (PDF), CDR (CorelDRAW), Drawing Exchange Format (DXF) and WMF. For another example, the first graphic may be a graphic applied to at least one of computer drawing, graphics or drawings or pictures, animation or game development, virtual environment rendering, logo or trademark or poster design, and architecture or engineering.

[0098] Here, SVG is an open standard vector graphics format based on XML syntax, which is suitable for application fields such as Web graphics, icons, maps, etc.; Adobe Illustrator is a software for industrial standard vector illustrations used in publishing, multimedia and / or online images; EPS is a vector graphics format widely used in printing and publishing, which can be exchanged and shared between different devices and software; PDF is a cross-platform document format that can contain vector graphics in addition to text and bitmap images; CDR is a proprietary file format of CorelDRAW software, which is often used in graphic design and printing production; DXF is a vector graphics format developed by AutoCAD, which is widely used in the field of computer-aided design (CAD); WMF is a vector graphics format under the Windows operating system, suitable for graphics processing in the Windows environment.

[0099] In some embodiments, the first operation may be any operation such as selection or selection. For example, the first operation may be an operation of clicking the first graphic, or the first operation may be an operation of dragging the first graphic to the drawing interface, etc. For example, the first graphic may be a graphic to be selected in the drawing interface, or may be a graphic in the graphic library of the drawing software; of course, other graphics, such as the second graphic, may be displayed or not displayed in the drawing interface, or the graphic library of the drawing software may include other graphics, such as the third graphic, etc.

[0100] In some embodiments, if a first operation acting on the first graphic is detected in step S101 , the first graphic is selected and the first graphic remains selected.

[0101] In some embodiments, the second operation may be any operation such as selection or selection. For example, the second operation may be an operation of clicking a linear gradient tool button, or the second operation may be an operation of receiving an instruction to trigger the selection of a linear gradient tool button. For example, a toolbar in a touch panel receives a trigger instruction, and the trigger instruction is used to trigger the linear gradient button in the toolbar.

[0102] In some embodiments, the second operation acting on the linear gradient tool button in step S102 may be: a second operation acting on the linear gradient tool button in the toolbar, or a second operation acting on the opening linear gradient tool button of the first graphic. Optionally, the linear gradient tool button may be replaced by a linear gradient tool key or a linear gradient tool option.

[0103] In some embodiments, after the first graphic enters the linear gradient editing mode, a gradient axis may be defined for the first graphic, and / or the number and / or position and / or color of nodes of the gradient axis may be determined. Here, determining the color of the node may include at least one of the following: determining the hue of the node, determining the saturation (or purity) of the node, and determining the brightness (or saturation) of the node. The node may be a previous color node.

[0104] In some embodiments, the third operation may be any drag operation or any other operation; the other operation may be, but is not limited to, a tap operation, as long as it can define the gradient axis.

[0105] In some embodiments, the third operation applied to the first graphic in step S103 may be: a third operation applied to any area of ​​the touch screen or drawing interface where the first graphic is located. For example, the third operation applied to the fourth area where the first graphic is located may display the gradient axis in the first area, and the first area and the fourth area are the same, or the first area and the fourth area are different; for example, if the first graphic is in the lower left corner area of ​​the drawing interface, the lower left corner area may be clicked to display the first graphic and the gradient axis in the lower left corner area; for example, if the first graphic is in the lower left corner area of ​​the drawing interface, the middle area of ​​the drawing interface may be clicked to display the first graphic and the gradient axis in the middle area.

[0106] Optionally, the first area is the middle area of ​​the touch screen or the drawing interface, or the first area can also be any other area of ​​the touch screen or the drawing interface. If the first area is the middle area of ​​the touch screen or the drawing interface, the gradient axis can be displayed prominently.

[0107] Optionally, the gradient axis may be displayed on the first graphic, or the gradient axis may be displayed in a region within a predetermined range from the first graphic.

[0108] In some embodiments, step S103 may further include: in response to the third operation acting on the first graphic, after the gradient axis is displayed in the first area, the first graphic is filled with a default two-color based on the gradient axis. Here, the gradient axis may include two nodes, so that the first graphic is filled with two colors; the two colors refer to two colors, which are a color set for the two nodes of the gradient axis respectively.

[0109] In some embodiments, the fourth operation may be a tap operation or a click operation, or a drag operation or a move operation, etc.; or, the fourth operation may be any other operation as long as it can be used to adjust the nodes of the gradient axis. For example, the fourth operation may be, but is not limited to: a single-finger tap operation, a multi-finger tap operation, a single-click operation, a multi-click operation, or a drag operation; a multi-finger tap operation may be, but is not limited to, a two-finger tap operation, a three-finger tap operation, ... or a ten-finger tap operation, etc.; a multi-click operation may be, but is not limited to, a double-click operation, a three-click operation, ... or a six-click operation, etc. The tap operation may be performed by one or more fingers, and the tap operation may be a multi-finger simultaneous click; the click operation may be performed by one finger, and the click operation may be an operation of continuous clicks by one finger.

[0110] In some embodiments, the second area refers to an area including a displayed gradient axis, for example, the second area includes an area of ​​the gradient axis and an area within a predetermined range of the gradient axis.

[0111] In some embodiments, adjusting the nodes of the gradient axis includes at least one of the following: adjusting the number of nodes of the gradient axis, adjusting the positions of the nodes of the gradient axis, and restoring the initial colors of the nodes of the gradient axis. For example, adjusting the number of nodes of the gradient axis may be, but is not limited to, adding nodes of the gradient axis or deleting nodes of the gradient axis. For example, adjusting the positions of the nodes of the gradient axis may be moving the positions of the nodes in the gradient axis. For example, restoring the initial colors of the gradient axis may be restoring the default colors set for each node.

[0112] In an embodiment of the present invention, the nodes of the gradient axis can be adjusted directly in the touch area (e.g., the second area) displayed in the first graphic, without the need to additionally expand a color picker or a color adjustment panel. This can save the area of ​​the display screen occupied by the color picker or the color adjustment panel, so that a finger or other touch-sensitive body has more flexible movement space, thereby improving the user experience. On the other hand, there is no need to move back and forth between the first graphic and the color picker or the color adjustment panel, thereby improving the color adjustment efficiency.

[0113] In some embodiments, in response to the third operation on the first graphic, displaying the gradient axis in the first area in step S103 includes:

[0114] In response to the third operation acting on the first graphic being a first drag operation, determining a start point and an end point of the gradient axis based on a start position and an end position of the first drag operation respectively;

[0115] The first area displays a gradient axis formed based on the starting point and the end point, wherein nodes of the gradient axis are displayed at the starting point and the end point respectively, the straight line from the starting point to the end point is the length of the gradient axis, and the direction from the starting point to the end point is the gradient direction of the gradient axis.

[0116] For example, Figure 5As shown, the starting position (or starting point) of the first drag operation is the starting point of the gradient axis, and the ending position (or ending point) of the first drag operation is the end point of the gradient axis. The starting point (or starting point) and the end point (or ending point) each display a node; the length of the straight line from the starting point (or starting point) to the end point (or ending point) is the length of the gradient axis; the direction from the starting point (or starting point) to the end point (or ending point) is the direction of the gradient axis.

[0117] In an embodiment of the present invention, the gradient axis can be delineated by a first drag operation directly acting on the first graphic, without the need to additionally delineate the gradient axis through a selection operation in a toolbar, etc., thereby eliminating the need to move back and forth between the drawing interface of the first graphic and the toolbar, etc., thereby simplifying the operation of delineating the gradient axis and improving the efficiency of delineating the gradient axis.

[0118] In some embodiments, the method further includes: if the third operation is detected again within the second predetermined time range of the gradient axis, adjusting the displayed gradient axis. This step may be before adjusting the node color of the gradient axis.

[0119] Optionally, the second predetermined time may be any time; for example, the second predetermined time may be within 3 seconds or 5 seconds.

[0120] In the disclosed embodiment, the gradient axis can be adjusted within a certain time after the gradient axis is delineated, for example, the starting point, end point, length and / or direction of the gradient axis can be adjusted, so that the gradient axis can be improved to meet user needs. And the displayed gradient axis can be readjusted within a certain time after the gradient axis is delineated, so as to reduce the confusion between the drag operation in the third operation and other operations of adjusting the color of the node, and reduce the probability of no touch.

[0121] In some other embodiments, the method further includes: when a third operation acting on the gradient axis is detected again, adjusting the displayed gradient axis. In this way, the gradient axis can be adjusted at any time during the linear gradient editing process of the first graphic, thereby meeting the user's demand for changing the gradient axis.

[0122] In some embodiments, in response to the third operation on the first graphic, displaying the gradient axis in the first area in step S103 includes:

[0123] In response to a third operation performed on the first graphic, enlarging the first graphic;

[0124] The enlarged first graphic is displayed in the first area and the gradient axis is displayed in the first area.

[0125] For example, Figure 5As shown, what is displayed may be the enlarged first graphic. Here, the first area may be the middle area of ​​the drawing interface; in other embodiments, the first area may be any area of ​​the drawing interface.

[0126] In the embodiment of the present invention, the first graphic to be edited can be enlarged, or enlarged and displayed in the center, so that the first graphic can be displayed more intuitively, so as to facilitate gradient color editing of the first graphic.

[0127] In some embodiments, Figure 6 As shown, step S104 includes one of the following:

[0128] Step S1041: in response to the fourth operation acting on the second area where the gradient axis is located being a single-finger tapping operation, based on the single-finger tapping operation, adjusting the number of nodes of the gradient axis and / or restoring the initial color of the nodes;

[0129] Step S1042: in response to the fourth operation acting on the second area where the gradient axis is located being a multi-finger tapping operation, based on the multi-finger tapping operation, adjusting the number of nodes on the gradient axis to be the same as the number of multi-finger tapping operations;

[0130] Step S1043: In response to the fourth operation acting on the second area where the gradient axis is located being a second drag operation on the gradient axis, based on the second drag operation, the position of the node on the gradient axis is moved.

[0131] In some embodiments, adjusting the number of nodes of the gradient axis and / or restoring the initial color of the nodes based on the single-finger tapping operation in step S1041 includes one of the following:

[0132] Based on the single-finger tap operation being a double-click operation on the node, the node's original color is restored;

[0133] Determine to delete the node based on the single-finger tap operation being a triple-tap operation acting on the node;

[0134] Based on the single-finger tap operation being a tap operation acting between two nodes, it is determined to add a node between the two nodes.

[0135] For example, Figure 7 As shown, it is detected whether the fourth operation acting on the second area where the gradient axis is located is a single-finger tap operation. If so, it is detected whether the single-finger tap operation is acting on a node of the gradient axis; if the single-finger tap operation is acting on a node of the gradient axis, it is detected whether the single-finger tap operation is a double-click operation; if the single-finger tap operation is a double-click operation, the initial color of the node is restored.

[0136] For example, Figure 8As shown, it is detected whether the fourth operation acting on the second area where the gradient axis is located is a single-finger tap operation. If so, it is detected whether the single-finger tap operation is a node acting on the gradient axis; if the single-finger tap operation is a node acting on the gradient axis, it is detected whether the single-finger tap operation is a triple-click operation; if the single-finger tap operation is a triple-click operation, the node is deleted.

[0137] For example, Fig. 9 As shown, it is detected whether the fourth operation acting on the second area where the gradient axis is located is a single-finger tapping operation. If so, it is detected whether the single-finger tapping operation is acting on a node of the gradient axis; if the single-finger tapping operation is: a tapping operation that does not act on a node of the gradient axis but acts between two nodes, it is determined to add a node between the two nodes. For example, the single-finger tapping operation is a tapping operation between a first node and a second node, such as a tapping operation at a first coordinate, then a node is added or added at the first coordinate. Here, the single-finger tapping operation of adding a node can be a single-click operation.

[0138] Here, whether to act on the node of the gradient axis can be: whether to act directly on the node of the gradient axis, or whether to act within a predetermined distance from the node of the gradient line. Acting between two nodes can be: acting between the nodes and on the gradient axis, or acting between the nodes and within a predetermined distance from the gradient axis.

[0139] It is understandable that in the embodiment of the present invention, in the single-finger tapping operation, the single-click operation may correspond to adding a node, the double-click operation may correspond to restoring the initial color of the node, and the triple-click operation may be deleting the node. In other embodiments, the purpose of adjusting the node corresponding to each single-finger tapping operation may be arbitrarily set, as long as the single-finger tapping operation can uniquely correspond to the purpose of adjusting the node; for example, in the single-finger tapping operation, the single-click operation may correspond to restoring the initial color of the node, the double-click operation may correspond to adding a node, and the triple-click operation may correspond to deleting a node; for another example, in the single-finger tapping operation, the double-click operation may correspond to restoring the initial color of the node, the triple-click operation may be used to delete the node, and the quadruple-click operation may correspond to adding a node, etc.; no limitation is made here.

[0140] In the embodiment of the present invention, adding, deleting and / or restoring the initial color of a node can be achieved by a single-finger tapping operation in the area where the gradient axis is located, without moving to the color picker, etc. for operation, that is, without moving back and forth between the node and the color picker, etc., thereby improving the efficiency of drawing. For example, a node can be added or deleted directly on the gradient axis without reducing the multi-color gradient node or adding the node from the color picker, thereby improving the efficiency of drawing, and making the user's convenient operation more convenient and improving the user's operating experience.

[0141] In some embodiments, in step S1042, based on the multi-finger tapping operation, adjusting the number of nodes on the gradient axis to be the same as the number of multi-finger tapping operations, includes one of the following:

[0142] Based on the multi-finger tap operation being a two-finger tap operation, the number of nodes of the gradient axis is adjusted to two;

[0143] Based on the multi-finger tap operation being a three-finger tap operation, the number of nodes of the gradient axis is adjusted to three;

[0144] Based on the multi-finger tap operation being a four-finger tap operation, the number of nodes of the gradient axis is adjusted to four;

[0145] And so on;

[0146] Based on the multi-finger tap operation being a ten-finger tap operation, the number of nodes of the gradient axis is adjusted to ten.

[0147] Optionally, the multi-finger tapping operation is an N-finger tapping operation, and the number of nodes of the gradient axis is adjusted to N, where N is an integer greater than or equal to 2.

[0148] Optionally, in the above embodiment, N nodes may be evenly distributed on the gradient axis. Of course, in other embodiments, N nodes may be unevenly distributed on the gradient axis. For example, there are 4 nodes arranged in sequence on the gradient axis, the distance between the 1st node and the 2nd node is the first distance, the distance between the 2nd node and the 3rd node is the second distance, and the distance between the 3rd node and the 4th node is the third distance. The first distance, the second distance and the third distance are equal; or, at least two of the first distance, the second distance and the third distance are different and equal.

[0149] For example, Fig.10 As shown, it is detected whether the fourth operation acting on the second area where the gradient axis is located is a multi-finger tapping operation. If so, and the multi-finger tapping operation is detected to be a three-finger tapping operation, the number of nodes of the gradient axis becomes three. At this time, it is a three-color gradient.

[0150] For example, Fig.11 As shown, it is detected whether the fourth operation acting on the second area where the gradient axis is located is a multi-finger tapping operation. If so, and the multi-finger tapping operation is detected to be a 4-finger tapping operation, the number of nodes of the gradient axis becomes 4. At this time, it is a 4-color gradient.

[0151] For example, Fig.12 As shown, it is detected whether the fourth operation acting on the second area where the gradient axis is located is a multi-finger tapping operation. If so, and the multi-finger tapping operation is detected to be a two-finger tapping operation, the number of nodes of the gradient axis becomes 2. At this time, it is a two-color gradient.

[0152] In an embodiment of the present invention, the number of nodes can be adjusted by multi-finger tapping in the area where the gradient axis is located, such as increasing or decreasing the appropriate number of nodes, without moving to a color picker or the like to perform the operation, that is, without moving back and forth between the nodes and the color picker or the like, thereby improving drawing efficiency.

[0153] In some embodiments, in step S1043, moving the position of the node on the gradient axis based on the second drag operation includes: determining the end position of the second drag operation as the position of the node on the gradient axis. Optionally, the second drag operation may be a single-finger drag operation.

[0154] For example, Fig.13 As shown, the fourth operation acting on the second area where the gradient axis is located is detected as a second drag operation, and based on the second drag operation, the position of the node on the gradient axis is moved.

[0155] In an embodiment of the present invention, the position of the node can be adjusted by a second drag operation in the area where the gradient axis is located, and the gradient effect can be adjusted without moving to a color picker or the like for operation, thereby improving drawing efficiency and enhancing the user's operating experience.

[0156] In some embodiments, Fig.14 As shown, a vector graphics processing method is provided, comprising the following steps:

[0157] Step S201: Determine whether to detect a tapping operation of a user's finger; if so, execute step S202; if not, execute step S210.

[0158] Step S202: Determine whether the tapping operation is a single-finger tapping operation; if so, execute step S203; if not, execute step S204. Here, the number of touch points N1 is 1.

[0159] Step S203: Determine whether the single-finger tapping operation is a tapping operation on the gradient axis; if so, execute step S205; if not, execute step S210.

[0160] Step S204: Determine whether the multi-finger tapping operation is a tapping operation on the gradient axis; if so, execute step S210, if not, execute step S209. Here, based on step S202, if the tapping operation is not a single-finger tapping operation, it may be a multi-finger tapping operation.

[0161] Step S205: Determine whether the single-finger tapping operation touches a node; if so, execute step S206; if not, execute step S207.

[0162] Step S206: Determine whether the single-finger tap operation is a double-tap or triple-tap operation; if so, execute step S208; if not, execute step S210.

[0163] Step S207: Add a node at the touched position.

[0164] Step S208: If it is a double-click operation, the color of the touched node is restored to the initial color; or, if it is a triple-click operation, the touched node is deleted.

[0165] Step S209: Determine whether the number of nodes on the gradient axis (N2) is equal to the number of touch points (N1); when the number of touch points is greater than 10, the number of nodes is equal to 10.

[0166] Step S210: The number of nodes is not changed.

[0167] In the embodiment of the present invention, a specific number of nodes can be added or deleted, or nodes can be moved or the initial color of nodes can be restored directly on the gradient axis without opening an additional color picker, color palette or control window. This saves the already limited touch screen area, gives fingers more flexible movement space, and improves the user experience. On the other hand, there is no need to move back and forth between the gradient line and the color picker, color palette or control window, which improves the color adjustment efficiency. In addition, the number of gradient nodes can be directly controlled through multi-finger tapping, which also improves the convenience of operation.

[0168] In the embodiment of the present invention, the fourth operation may also be any other operation as long as it can uniquely correspond to the target of adjusting the node on the gradient axis.

[0169] In some embodiments, Fig.15 As shown, the method also includes:

[0170] Step S105: In response to the fifth operation acting on the third area where the node is located, adjusting the color of the node, wherein the color includes at least one of the following: hue, brightness, and saturation.

[0171] In some embodiments, the method further includes: setting a lead for each node on the gradient axis, the end of the lead being a slider, and the hue, brightness, and saturation of the node can be adjusted respectively by dragging, rotating, or pressing the slider.

[0172] For example, Fig.16 As shown, the upper layer of the first figure displays a gradient axis; there are 4 nodes on the gradient axis, each node is provided with a lead, and a slider is provided at the end of each lead; a finger can drag the slider on the node.

[0173] Optionally, the fifth operation may be any drag operation or press operation; or the fifth operation may be any other operation as long as the length or direction of the lead line, or the color of the node can be adjusted.

[0174] Optionally, the fifth operation may be an operation of a slider acting on the node.

[0175] Optionally, the third area may be a touch control area formed with the node as the center.

[0176] Exemplarily, the touch area may be a sector-shaped area, a rectangular area, a trapezoidal area, a semicircular area, a triangular area, or the like.

[0177] Exemplarily, the third area may be a fan-shaped area; the fan-shaped area may not be displayed, or may be displayed only when the lead line of the node is dragged.

[0178] For example, Fig.17 As shown, a first graphic is displayed on the drawing interface, and a gradient axis is displayed on the upper layer of the first graphic; there are 4 nodes on the gradient axis, each node is provided with a lead, and a slider is provided at the end of each lead; a sector-shaped area is displayed on both sides of the second node of the first graphic, and the sector-shaped area is a draggable range (the sector-shaped area is actually invisible on the drawing interface).

[0179] In the embodiment of the present invention, the hue, saturation and / or brightness of the node can be controlled by dragging the finger on the third area where the node is located, thereby adjusting the color (or color value) presented by a certain node. In this way, the three color parameters (such as hue, saturation and brightness) can be set at the same time through one interactive action, without having to remember and set the three parameters one by one, thereby simplifying the steps of the color conditions of the node and reducing repeated touch screen operations.

[0180] like Fig.18 As shown, in step S17, in response to the fifth operation acting on the third area where the node is located, adjusting the color of the node includes at least one of the following:

[0181] Step S1051: in response to the fifth operation acting on the third region where the node is located being the third drag operation, adjusting the hue of the node based on the ratio of the first length to the baseline length of the third region, wherein the first length is the length of the lead line of the node dragged by the third drag operation;

[0182] Step S1052: in response to the fifth operation acting on the third area where the node is located being the fourth drag operation, adjusting the brightness of the node based on the ratio of the first angle to the second angle, wherein the first angle is the angle between the lead line and the reference line of the node dragged by the fourth drag operation, and the second angle is a preset angle;

[0183] Step S1053: In response to the fifth operation acting on the third area where the node is located being a pressing operation, adjusting the saturation of the node based on the pressing operation.

[0184] Optionally, the third drag operation may be any operation of dragging the lead line or a slider of the lead line.

[0185] Optionally, the fourth dragging operation may be any operation of dragging the lead or the slider of the lead. The fourth dragging operation is used to drag the lead to rotate; the third dragging operation is used to drag the length of the lead.

[0186] Optionally, the difference between the pressing operation and the tapping operation is that the action time of the pressing operation is relatively long, while the action time of the tapping operation is relatively short.

[0187] In some embodiments, adjusting the hue of the node based on the ratio of the first length to the baseline length of the third area in step S1501 includes:

[0188] Determining a first value based on a ratio of the first length to the length of the reference line;

[0189] The hue of the node is determined based on the product of the first value and the second value, wherein the second value is a maximum value of a value range of the hue.

[0190] For example, Fig.19 As shown, in Fig.17 On the basis of the above, the length of the lead L0 and the length of the reference line R0 are also marked. The length of the reference line is the radius of the sector in the sector area; in other embodiments, if the third area is a semicircle, the precision line can be the radius of the semicircle, etc. The lead cannot be dragged outside the sector area, then L0 does not exceed R0. The value range of the hue H0 can be 0° to 360°. For example, when L0=0, H0=0°; L0=R0, H0=360°.

[0191] For example, the hue of a node can be Wherein, L0 is the length of the lead, i.e., the first length; R0 is the length of the reference line; is the first value, and 360 is the second value.

[0192] In an embodiment of the present invention, the hue of the node can be adjusted within an appropriate range by the ratio of the length of the lead line to the length of the baseline; and the adjustment can be made directly on the gradient axis without switching to a color picker or the like (i.e., without leaving the original drawn graphics) for adjustment, which can make the adjustment more streamlined and improve the efficiency of adjusting the hue.

[0193] In some embodiments, adjusting the brightness of the node based on the ratio of the first angle to the second angle in step S1052 includes:

[0194] If the first angle is the first angle of the first direction, the third value is determined based on the ratio of the first angle to the second angle; the fifth value is determined based on the product of the third value and the fourth value, and the fourth value is the middle value of the brightness range; the brightness of the node is determined based on the difference between the fourth value and the fifth value; or,

[0195] If the first angle is the first angle in the second direction, determine the third value based on the ratio of the first angle to the second angle; determine the fifth value based on the product of the third value and the fourth value, and the fourth value is the middle value of the brightness range; determine the brightness of the node based on the sum of the fourth value and the fifth value.

[0196] Optionally, the first direction may be clockwise, and the second direction may be counterclockwise; or, the first direction may be counterclockwise, and the second direction may be clockwise; or, the first direction and the second direction may be other directions, as long as the first direction and the second direction are opposite.

[0197] For example, Fig. 20 As shown, in Fig.17 On the basis of the reference line, the first angle (i.e. the angle between the lead line and the reference line) A0, the sector on the clockwise side (i.e. the sector-shaped area) and the sector on the counterclockwise side are also marked; the second angle B0 can be 90°A0 does not exceed B0. The value range of brightness (or lightness) B0 is 0 to 100%; the median value of B0 is 50%. For example, when A0=0°, B0=50%; when A0=90° and in the counterclockwise sector, B0=0%; when A0=90° and in the clockwise sector, B0=100%; in Fig.19 In FIG. 1 , if the first angle A0 is 30°, the brightness of the corresponding node is 67%.

[0198] Exemplarily, the first angle A0 is the first angle of the first direction, and when the first direction is counterclockwise, the brightness of the node can be Alternatively, the first angle A0 is the first angle of the second direction, the second direction is the clockwise direction, and the brightness of the node can be Among them, A0 is the first angle, 90 is the second angle, is the third value; 50% is the fourth value, The fifth value.

[0199] In an embodiment of the present invention, the brightness of the node can be adjusted within an appropriate range by the ratio of the first angle to the second angle; and the adjustment can be made directly on the gradient axis without switching to a color picker or the like (i.e., without leaving the original drawn graphics) for adjustment, which can make the adjustment more streamlined and improve the efficiency of adjusting the brightness.

[0200] In some embodiments, adjusting the saturation of the node based on the pressing operation in step S1053 includes:

[0201] In the case where it is determined that the time for which the pressing operation acts on the node is greater than the first predetermined time, monitoring the pressing behavior,

[0202] When the pressure of the pressing behavior is greater than or equal to the preset pressure and the node is continuously pressed, the saturation of the node is adjusted to change cyclically from the maximum value to the minimum value of the saturation until the pressing behavior ends;

[0203] Determines the saturation that the press behavior cycles to when it ends as the saturation of the node.

[0204] Optionally, the first predetermined time may be any time, for example, the first predetermined time may be 0.5 seconds or 1 second.

[0205] Optionally, the preset pressure may be any pressure. For example, the preset pressure may be greater than the minimum pressure at which the touch screen can sense a touch, and less than the maximum pressure that the touch screen can withstand.

[0206] Optionally, the cyclic change from the maximum value to the minimum value of the saturation may be a change process of “maximum value of the saturation—minimum value of the saturation—maximum value of the saturation—minimum value of the saturation”.

[0207] Optionally, adjusting the saturation of the node to change cyclically from the maximum value to the minimum value of the saturation may be: adjusting the saturation of the node to change cyclically from the maximum value to the minimum value of the saturation at a preset speed. For example, the preset speed may be to reduce the saturation by 1% every 0.1 seconds; or after the pressure of the pressing behavior is greater than the preset pressure, the saturation S0 = 100% - 10T × 100%; wherein T is the time in seconds; if 0.1 seconds have passed, the saturation is 99%, after 1 second has passed, the saturation is 90%, after 10 seconds have passed, the saturation is 0%, and after 10.1 seconds, the saturation is 99%.

[0208] In other embodiments, when the pressure of the pressing action is greater than or equal to the preset pressure and the node is continuously pressed, the saturation of the node is adjusted to change cyclically from the minimum value to the maximum value of the saturation until the pressing action ends. The cyclic change from the minimum value to the maximum value of the saturation can be a change process of "minimum value of saturation - maximum value of saturation - minimum value of saturation - maximum value of saturation".

[0209] For example, Fig.21As shown, the saturation S0 is determined according to the duration T0 of the pressing operation. The value range of the saturation S0 can be 0 to 100%. For example, when T0=0, S0=100%.

[0210] In an embodiment of the present invention, the saturation of the node can be adjusted within an appropriate range by continuously pressing the node. This does not require switching to a color picker (i.e., there is no need to leave the original drawing graphic) for adjustment, which can make the adjustment more streamlined and improve the efficiency of adjusting the hue.

[0211] In other embodiments, the saturation of the node is adjusted based on the pressing operation in step S1053, or the saturation of the node is adjusted based on the pressure of the pressing operation. For example, the saturation of the node can be adjusted according to the ratio of the first pressure of the pressing operation to the preset pressure; the first pressure can be the maximum pressure, minimum pressure or average pressure of the pressing operation within a predetermined time. Alternatively, the saturation of the node is adjusted based on the pressing operation in step S1053, or the saturation of the node is adjusted according to the ratio of the pressing time of the pressing operation to the preset time. Alternatively, the saturation of the node is adjusted based on the pressing operation in step S1053, or the saturation of the node is adjusted in combination with the first pressure and pressing time of the pressing operation.

[0212] In some embodiments, the method further includes: in response to a sixth operation performed on the linear gradient tool, determining that the first graphic exits a linear gradient editing mode.

[0213] Alternatively, the sixth operation may be any click operation; or the sixth operation may be any other arbitrary operation as long as it can exit the linear gradient editing mode. For example, the sixth operation may be clicking a linear gradient tool button in a toolbar.

[0214] Optionally, exiting the linear gradient editing mode may be at least one of the following: the gradient axis disappears; if the first graphic is enlarged in the linear gradient editing mode, it is restored to the size before entering the linear gradient mode; if the first graphic has a fourth area moved to the first area when entering the linear gradient editing mode, it is restored to the fourth area.

[0215] Optionally, the first graphic exiting the linear gradient editing mode may be that the first graphic is selected, or the first graphic is not selected.

[0216] In the embodiment of the invention, the linear gradient editing mode can be exited after the editing is completed, so as to facilitate the subsequent graphic editing process.

[0217] In order to further explain any embodiment of the present invention, a specific embodiment is provided below.

[0218] like Fig. 22As shown, an embodiment of the present invention provides a vector graphics processing method, which is executed by an electronic device and includes the following steps:

[0219] Optionally, a solid color fill tool and a gradient fill tool are provided in a toolbar of a related application of the electronic device, respectively, so that the user can enable the gradient fill function separately.

[0220] Step S301: receiving a user's click operation and determining a vector graphic to be edited in the interface. Here, the vector graphic to be edited may be the first graphic in the previous embodiment; and the click operation may be the first operation in the previous embodiment.

[0221] Step S302: In response to a specific trigger mode, enter the linear gradient editing mode of the vector graphic, and automatically enlarge and center the selected vector graphic to be edited in the full screen. The specific trigger mode here can be that the user clicks the toolbar in the software application and clicks the linear gradient tool button on the toolbar, which is not limited here. Here, the specific trigger mode can be the second operation in the previous embodiment.

[0222] Step S303: In the linear gradient editing mode, the user's dragging action on the touch screen is detected and the gradient axis is defined. The dragging action has a start point and an end point, a length and a direction. The length of the straight line connecting the start point and the end point is the length of the gradient axis, and the direction from the start point to the end point is the gradient direction. Figure 5 As shown, a two-color filling is performed by default, that is, one node is displayed at the start and end of the gradient axis respectively. When the user has not specified a color, the node is filled with a dark red color with an HSB value of (0, 100, 50) by default. Here, the dragging action can be the third operation in the previous embodiment.

[0223] Step S304: After the gradient axis is defined, the corresponding operations of adding nodes, deleting nodes, restoring the initial color of nodes and / or modifying the number of nodes are performed based on the finger tapping operation. Optionally, determine whether the user's finger tapping operation is recognized (such as step S201). If so, determine whether it is a single-finger tapping operation or a multi-finger tapping operation (such as step S202). If it is a multi-finger tapping operation, determine whether the finger tapping operation occurs in an area outside the gradient axis or on the gradient axis (such as step S204). If it is an operation on the gradient axis, the number of nodes will not be changed (such as step S210). If it is a multi-finger tapping recognized in an area outside the gradient axis, the number of nodes will be changed according to the number of touch points. Fig.12 As shown, if it is a two-finger touch screen operation, two nodes are displayed at the starting point and the end point of the gradient axis; Fig.10 As shown in , if it is a three-finger operation, three nodes will be displayed on the gradient axis; Fig.11As shown, if it is a four-finger operation, four nodes are displayed on the gradient axis; and so on, up to 10 nodes are displayed at a time (such as step S209); here, three or more nodes can be displayed on the gradient axis with the same spacing. This operation only affects the number of nodes on the gradient axis, the colors of the starting point and the end point remain unchanged, and the added nodes are automatically assigned color values ​​of the corresponding hue according to their positions on the gradient axis; if it is a single-finger operation, the number of nodes does not change. Here, the finger tapping operation can be the fourth operation in the previous embodiment.

[0224] If it is a single-finger tapping operation, it is also determined whether the single-finger tapping operation occurs on the gradient axis (such as step S203). If a finger tapping operation is recognized on the gradient axis, it is determined whether the touch area of ​​the single-finger tapping operation is on a node or between nodes (such as step S205). Fig. 9 As shown, if the area between the nodes is clicked, a node is added at the finger pressing position (such as step S207); Fig.13 As shown, if it is detected that a finger is pressed on a node and dragged along the gradient axis, the position of the node on the axis is changed accordingly. The finger moves with the center point (x0, y0) of the node as the base point, and the new position is the center coordinate (x1, y1) at the end of the finger drag operation; if the finger double-clicks on a node (such as step S206), the color restoration operation of the node is performed (restoring the original color of the node); Fig.16 If there is a lead line dragged out, it will be automatically retracted at that point; if you triple-click on a node, the node will be deleted. At least 2 nodes must be retained on the gradient axis. If the number of nodes is less than or equal to 2, the remaining nodes cannot be deleted.

[0225] Step S305: Control the hue, brightness, and purity of the response node according to the length, angle, and time of the drag operation. Optionally, two fan-shaped areas are formed with each node on the gradient axis as the center. Detect the drag operation of the user's finger on a node. If the finger moves into the fan-shaped area, collect the touch signal of the user in the corresponding area on the touch screen, and adjust the color of the node according to the touch signal. For example, with the node (x0, y0) as the starting point and the position of the touch signal (x0+dX, y0+dY) as the end point, a lead is displayed, and there is a slider at the end of the lead to indicate the end point position. The changes in the length (L), direction (angle A), and pressing time (T) of the lead at the drag end position correspond to the changes in the hue (H value), brightness (B value), and purity (S value) of the node (such as Figures 19 to 21 ), the color of the node will change in time with the control of the HSB value.

[0226] For example, a circle is drawn with the node center (x0, y0) as the center and radius R0. The sectors corresponding to the two 1 / 4 arcs perpendicular to the gradient axis are the range of the sector area. The area of ​​each sector area is

[0227] For example, in the HSB color model, saturation S and brightness B are expressed as percentage values ​​(0%-100%), and hue is expressed as angle (0°-360°). The corresponding relationship between the hue value of a specific node and the length of the lead line L0 dragged out is: Where L0 is less than or equal to R0.

[0228] For example, with 50% brightness as the starting point, if the lead line falls within the sector area on the counterclockwise side of the gradient axis, and the angle formed by the lead line and the right side line of the sector is A1, then the brightness is If the lead line falls within the sector area on the clockwise side of the gradient axis, let the angle formed by the lead line and the left side of the sector be A2, then the brightness is

[0229]

[0230] Exemplarily, a pressing operation is detected. The purity value S0 of the node is determined based on the length of time T0 that the user presses at the traction end position. After the user drags the lead, if the displacement of the finger is monitored to be 0 for more than 0.5s, it is determined that the drag event has ended and the pressing behavior is monitored. When a pressing behavior is detected at the traction position (it is detected that the pressure F applied at this position is greater than a preset pressure (F0), the purity value is changed from 100% to 0% at a default speed V0. If the finger keeps pressing and is not relaxed, the "highest purity-lowest purity-highest purity-lowest purity" change process is repeated until the user releases his finger.

[0231] Exemplarily, according to the above correspondence, if the user does not perform any dragging or pressing operation on a node, L0=0, T0=0, A0=0 of the node, corresponding to H0=0, S0=100%, B0=50%, and the default color of the point is dark red.

[0232] S306: In response to a specific triggering mode, exit the linear gradient editing mode of the vector graphic. The specific triggering mode here may be that the user clicks the linear gradient tool button on the software application toolbar again, which is not limited here. The specific triggering mode here may be the sixth operation in the previous embodiment.

[0233] In the embodiment of the present invention, the number of nodes on the gradient axis is directly controlled by pressing with multiple fingers, thereby improving the convenience of operation.

[0234] In an embodiment of the present invention, the color adjustment method does not need to leave the original drawing view, or does not need to switch between different views, thereby improving the efficiency of color adjustment. In addition, it can meet the design and drawing needs on medium-screen and small-screen devices. Directly editing gradient colors on the vector graphics to be edited in the current interface not only makes the color adjustment process more intuitive, but also does not require the expansion of additional color pickers, color adjustment panels or control windows, saving the already tight screen area, giving fingers more flexible movement space, and improving the user experience.

[0235] In the embodiment of the present invention, for the color selection of a certain node, the hue, saturation and brightness of the node can be controlled by obtaining the drag length, drag direction and pressing behavior of the finger on the fan-shaped area, thereby adjusting the color value presented by the certain node. There is no need to set multiple attributes such as hue, saturation, brightness, etc. one by one in the color picker. One interactive action can complete the parameter setting of the three color values ​​at the same time, reducing repeated touch screen operations.

[0236] The traditional method of adjusting the colors of multiple nodes requires repeating the process of "selecting - opening the color palette - picking colors" for each node one by one. In the embodiment of the present invention, the "selecting" and "picking colors" steps can be directly integrated into one step through dragging, which makes the process smoother and more immersive without interrupting user communication.

[0237] It should be noted that the following description of the vector graphics processing device is similar to the description of the above-mentioned vector graphics processing method, and the description of the beneficial effects of the same method is not repeated. For technical details not disclosed in the embodiment of the vector graphics processing device of the present invention, please refer to the description of the embodiment of the vector graphics processing method of the present invention.

[0238] like Fig.23 As shown, an embodiment of the present invention provides a vector graphics processing device, comprising:

[0239] A determination module 41, configured to determine that the first graphic is selected if a first operation acting on the first graphic is detected;

[0240] A determination module 41, configured to determine that the first graphic enters a linear gradient editing mode in response to a second operation on a linear gradient tool button;

[0241] A display module 42, configured to display a gradient axis in the first area in response to a third operation performed on the first graphic in a linear gradient editing mode;

[0242] The processing module 43 is configured to adjust the nodes of the gradient axis in response to a fourth operation acting on the second region where the gradient axis is located.

[0243] In some embodiments, the processing module 43 is used to adjust the color of the node in response to a fifth operation acting on the third area where the node is located, wherein the color includes at least one of the following: hue, brightness, and saturation.

[0244] In some embodiments, the processing module 43 is used to respond to the third operation acting on the first graphic being a first drag operation, and to determine the starting point and end point of the gradient axis based on the starting position and end point of the first drag operation respectively; and to display the gradient axis formed based on the starting point and the end point in the first area, wherein the nodes of the gradient axis are displayed at the starting point and the end point respectively, the straight line from the starting point to the end point is the length of the gradient axis, and the direction from the starting point to the end point is the gradient direction of the gradient axis.

[0245] In some embodiments, the display module 42 is used to, in response to a third operation acting on the first graphic, enlarge the first graphic; display the enlarged first graphic in the first area and display the gradient axis in the first area.

[0246] In some embodiments, the processing module 43 is configured to:

[0247] In response to a fourth operation acting on the second area where the gradient axis is located being a single-finger tapping operation, adjusting the number of nodes of the gradient axis and / or restoring the initial color of the nodes based on the single-finger tapping operation;

[0248] In response to a fourth operation acting on the second area where the gradient axis is located being a multi-finger tapping operation, based on the multi-finger tapping operation, adjusting the number of nodes on the gradient axis to be the same as the number of multi-finger tapping operations;

[0249] In response to the fourth operation acting on the second area where the gradient axis is located being a second drag operation on the gradient axis, the position of the node on the gradient axis is moved based on the second drag operation.

[0250] In some embodiments, the processing module 43 is configured to:

[0251] Based on the single-finger tap operation being a double-click operation on the node, the node's original color is restored;

[0252] Determine to delete the node based on the single-finger tap operation being a triple-tap operation acting on the node;

[0253] Based on the single-finger tap operation being a tap operation acting between two nodes, it is determined to add a node between the two nodes.

[0254] In some embodiments, the processing module 43 is configured to:

[0255] In response to the fifth operation acting on the third area where the node is located being a third drag operation, adjusting the hue of the node based on a ratio of a first length to a baseline length of the third area, wherein the first length is a length of a lead line of the node dragged by the third drag operation;

[0256] In response to the fifth operation acting on the third area where the node is located being the fourth drag operation, adjusting the brightness of the node based on the ratio of the first angle to the second angle, wherein the first angle is the angle between the lead line and the reference line of the node dragged by the fourth drag operation, and the second angle is a preset angle;

[0257] In response to a fifth operation acting on the third region where the node is located being a pressing operation, the saturation of the node is adjusted based on the pressing operation.

[0258] In some embodiments, the processing module 43 is used to determine the first value based on the ratio of the first length to the length of the baseline; determine the hue of the node based on the product of the first value and the second value, wherein the second value is the maximum value of the hue value range.

[0259] In some embodiments, the processing module 43 is used to determine the third value based on the ratio of the first angle to the second angle if the first angle is the first angle in the first direction; determine the fifth value based on the product of the third value and the fourth value, where the fourth value is the middle value of the brightness range; determine the brightness of the node based on the difference between the fourth value and the fifth value; or,

[0260] Processing module 43 is used to determine a third value based on the ratio of the first angle to the second angle if the first angle is the first angle in the second direction; determine a fifth value based on the product of the third value and the fourth value, the fourth value being the middle value of the brightness range; and determine the brightness of the node based on the sum of the fourth value and the fifth value.

[0261] In some embodiments, the processing module 43 is used to monitor the pressing behavior when it is determined that the time the pressing operation acts on the node is greater than a first predetermined time, and when the pressure of the pressing behavior is greater than or equal to the preset pressure and the node is continuously pressed, adjust the saturation of the node to cycle from the maximum value to the minimum value of the saturation until the pressing behavior ends; and determine that the saturation cycled to when the pressing behavior ends is the saturation of the node.

[0262] In some embodiments, the processing module 43 is configured to adjust the displayed gradient axis when the third operation is detected again within the second predetermined time range of the gradient axis; or

[0263] The processing module 43 is configured to adjust the displayed gradient axis when a third operation acting on the gradient axis is detected again.

[0264] In some embodiments, the processing module 43 is used to determine that the first graphic exits the linear gradient editing mode in response to a sixth operation acting on the linear gradient tool.

[0265] like Fig.24 As shown, an embodiment of the present invention provides a vector graphics processing device, comprising at least one of the following: a touch screen 51, a touch sensing module 52, a color parameter processing module 53, a storage module 54, a graphics drawing module 55, and a graphics display module 56. Optionally, the touch sensing module 52 is used to respond to at least one of the first operation, the second operation, the third operation, the fourth operation, the fifth operation, and the sixth operation; the color parameter processing module 53 is used to determine the color of the node, etc.; the graphics drawing module 55 is used to adjust the number and position of the node and / or restore the initial color of the node, etc.; the image display module 56 is used to display the first graphic, etc.

[0266] like Fig.25 As shown, an embodiment of the present invention further provides an electronic device, which includes a processor 61 and a memory 62 for storing a computer program that can be run on the processor 61; wherein, when the processor 61 is used to run the computer program, the vector graphics processing method of any embodiment of the present invention is implemented.

[0267] In some embodiments, the memory in the embodiments of the present invention may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct memory bus random access memory (DRRAM). The memory of the systems and methods described herein is intended to include, but is not limited to, these and any other suitable types of memory.

[0268] The processor may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by an integrated logic circuit of hardware in the processor or an instruction in the form of software. The above processor may be a general processor, a digital signal processor (Digital Signal Processor, DSP), an application specific integrated circuit (Application Specific Integrated Circuit, ASIC), a field programmable gate array (Field Programmable Gate Array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present invention can be implemented or executed. The general processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in conjunction with the embodiments of the present invention can be directly embodied as a hardware decoding processor to be executed, or a combination of hardware and software modules in the decoding processor to be executed. The software module may be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0269] In some embodiments, the embodiments described herein may be implemented in hardware, software, firmware, middleware, microcode, or a combination thereof. For hardware implementation, the processing unit may be implemented in one or more application specific integrated circuits (ASIC), digital signal processors (DSP), digital signal processing devices (DSPD), programmable logic devices (PLD), field programmable gate arrays (FPGA), general purpose processors, controllers, microcontrollers, microprocessors, other electronic units for performing the functions described in the invention, or a combination thereof.

[0270] For software implementation, the techniques described herein can be implemented by modules (e.g., procedures, functions, etc.) that perform the functions described herein. The software code can be stored in a memory and executed by a processor. The memory can be implemented in the processor or outside the processor.

[0271] An embodiment of the present invention provides a computer storage medium, wherein the computer-readable storage medium stores an executable program. When the executable program is executed by a processor, the steps of the vector graphics processing method of any embodiment of the present invention can be implemented.

[0272] An embodiment of the present invention provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are executed by a processor, the steps of the vector graphics processing method of any embodiment of the present invention are implemented.

[0273] In some embodiments, the computer storage medium may include: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0274] It should be noted that the technical solutions described in the embodiments of the present invention can be combined arbitrarily without conflict.

[0275] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A vector graphics processing method, characterized in that: The method comprises: If a first operation acting on a first graphic is detected, determining that the first graphic is selected; In response to a second operation on a linear gradient tool button, determining that the first graphic enters a linear gradient editing mode; In the linear gradient editing mode, in response to a third operation acting on the first graphic, displaying a gradient axis in the first area; In response to a fourth operation acting on the second region where the gradient axis is located, the nodes of the gradient axis are adjusted.

2. The method according to claim 1, characterized in that The method further comprises: In response to a fifth operation acting on the third area where the node is located, the color of the node is adjusted, wherein the color includes at least one of the following: hue, brightness, and saturation.

3. The method according to claim 1 or 2, characterized in that: In response to the third operation acting on the first graphic, displaying a gradient axis in the first area includes: In response to the third operation on the first graphic being a first drag operation, determining a start point and an end point of the gradient axis based on a start position and an end position of the first drag operation respectively; The gradient axis formed based on the starting point and the end point is displayed in the first area, wherein nodes of the gradient axis are displayed at the starting point and the end point respectively, the straight line from the starting point to the end point is the length of the gradient axis, and the direction from the starting point to the end point is the gradient direction of the gradient axis.

4. The method according to claim 1 or 2, characterized in that: In response to the third operation acting on the first graphic, displaying a gradient axis in the first area includes: In response to a third operation performed on the first graphic, enlarging the first graphic; The enlarged first graphic is displayed in the first area, and the gradient axis is displayed in the first area.

5. The method according to claim 1 or 2, characterized in that: The adjusting of the nodes of the gradient axis in response to the fourth operation acting on the second area where the gradient axis is located includes one of the following: In response to the fourth operation acting on the second area where the gradient axis is located being a single-finger tapping operation, adjusting the number of the nodes of the gradient axis and / or restoring the initial colors of the nodes based on the single-finger tapping operation; In response to the fourth operation acting on the second area where the gradient axis is located being a multi-finger tapping operation, based on the multi-finger tapping operation, adjusting the number of the nodes on the gradient axis to be the same as the number of the multi-finger tapping operation; In response to the fourth operation acting on the second area where the gradient axis is located being a second drag operation on the gradient axis, the position of the node on the gradient axis is moved based on the second drag operation.

6. The method according to claim 5, characterized in that The adjusting the number of the nodes of the gradient axis and / or restoring the initial color of the nodes based on the single-finger tapping operation comprises one of the following: Based on the single-finger tapping operation being a double-click operation acting on the node, restoring the original color of the node; Determining to delete the node based on the single-finger tapping operation being a triple-tap operation on the node; Based on the single-finger tapping operation being a tapping operation acting between two nodes, it is determined to add a node between the two nodes.

7. The method according to claim 2, characterized in that: In response to the fifth operation acting on the third area where the node is located, adjusting the color of the node includes at least one of the following: In response to the fifth operation acting on the third region where the node is located being a third drag operation, adjusting the hue of the node based on a ratio of a first length to a baseline length of the third region, wherein the first length is a length of a lead line of the node dragged by the third drag operation; In response to the fifth operation acting on the third area where the node is located being a fourth drag operation, adjusting the brightness of the node based on a ratio of a first angle to a second angle, wherein the first angle is an angle between a lead line of the node dragged by the fourth drag operation and the reference line, and the second angle is a preset angle; In response to the fifth operation acting on the third region where the node is located being a pressing operation, the saturation of the node is adjusted based on the pressing operation.

8. The method according to claim 7, characterized in that The adjusting the hue of the node based on the ratio of the first length to the baseline length of the third area includes: Determining a first value based on a ratio of the first length to the length of the reference line; The hue of the node is determined based on the product of the first value and the second value, wherein the second value is a maximum value of a value range of the hue.

9. The method according to claim 7, characterized in that: The step of adjusting the brightness of the node based on the ratio of the first angle to the second angle includes: If the first angle is the first angle in the first direction, a third value is determined based on the ratio of the first angle to the second angle; a fifth value is determined based on the product of the third value and the fourth value, wherein the fourth value is the middle value of the value range of the brightness; the brightness of the node is determined based on the difference between the four values ​​and the fifth value; or, If the first angle is the first angle in the second direction, determine a third value based on the ratio of the first angle to the second angle; determine a fifth value based on the product of the third value and the fourth value, and the fourth value is the middle value of the brightness range; determine the brightness of the node based on the sum of the fourth value and the fifth value.

10. The method according to claim 7, characterized in that The adjusting the saturation of the node based on the pressing operation includes: In the case where it is determined that the time for which the pressing operation acts on the node is greater than a first predetermined time, monitoring the pressing behavior, When the pressure of the pressing behavior is greater than or equal to the preset pressure and the node is continuously pressed, adjusting the saturation of the node to change cyclically from a maximum value to a minimum value of the saturation until the pressing behavior ends; The saturation cycled to when the pressing behavior ends is determined to be the saturation of the node.

11. The method according to claim 2, characterized in that Before adjusting the color of the node in response to the fifth operation acting on the third area where the node is located, the method further includes: adjusting the displayed gradient axis when the third operation is detected again within a second predetermined time range of the gradient axis appearance; or The method further includes: adjusting the displayed gradient axis when the third operation acting on the gradient axis is detected again.

12. The method according to claim 1 or 2, characterized in that: The method further comprises: In response to a sixth operation performed on the linear gradient tool, it is determined that the first graphic exits the linear gradient editing mode.

13. A vector graphics processing device, characterized in that: include: A determination module, configured to determine that the first graphic is selected if a first operation acting on the first graphic is detected; The determining module is further used to determine that the first graphic enters a linear gradient editing mode in response to a second operation acting on a linear gradient tool button; A display module, configured to display a gradient axis in a first area in response to a third operation performed on the first graphic in the linear gradient editing mode; The processing module is used to adjust the nodes of the gradient axis in response to a fourth operation acting on the second area where the gradient axis is located.

14. An electronic device, characterized in that: The electronic device comprises a processor and a memory for storing a computer program that can be run on the processor; wherein, when the processor is used to run the computer program, the vector graphics processing method according to any one of claims 1 to 12 is implemented.

15. A computer storage medium, characterized in that: The computer storage medium contains computer executable instructions, wherein the computer executable instructions are executed by a processor to implement the vector graphics processing method according to any one of claims 1 to 12.

16. A computer program product, comprising a computer program or instructions, characterized in that: When the computer program or instruction is executed by a processor, the vector graphics processing method according to any one of claims 1 to 12 is implemented.

Images