Parameterization adjustment manufacturing method and device for sector and arc
Patent Information
- Application Number
- CN202411646117.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-18
- Publication Date
- 2025-02-18
Smart Images
Figure CN119473104A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of software design, and in particular to a method and device for parameterized adjustment of sectors and arcs. Background Art
[0002] Sectors and arcs are common graphic elements in UI design. Among them, a sector is a figure surrounded by an arc and two radii passing through the two ends of the arc (the combination of a semicircle and a diameter is also a sector), which is surrounded by a part of the circumference and its corresponding central angle. Its definition is: a figure surrounded by the two sides of the angle with the vertex at the center of the circle and a section of the arc cut by these two sides. The part between any two points on the circle is called an arc, or arc for short.
[0003] For the production of sectors and arcs, the existing design software or tools either draw manually little by little, or cut the shape by shape, for example: draw a circle first, and then perform a series of deletion operations on the circular figure (such as using scissors tools or path editing tools to delete unnecessary parts, or using tools such as intersection and union to perform multiple subset operations) to generate a sector that meets the requirements. However, the above methods will cause the generated sectors or arcs to be unable to be adjusted again, or they need to be adjusted again through very cumbersome operations. In other words, the generation method and adjustment process of the above sectors and arcs are too complicated. For example, more tools need to be used, and the use methods of each tool are too abstract and not intuitive enough. In addition, due to the lack of parametric design process, when making sectors and arcs, it is not only time-consuming and labor-intensive, but also prone to errors. It also often causes the generated shapes to be inaccurate and difficult to adjust, which makes it difficult to meet the design needs of designers.
[0004] To solve the above problems, the present invention develops a method and device for parameterized adjustment of sectors and arcs to simplify the design and formation process of sectors or arcs, and can quickly design refined sectors or arcs. Summary of the invention
[0005] In view of the above problems, a method and device for parameterized adjustment of sectors and arcs are proposed to simplify the design and formation process of sectors or arcs, so as to facilitate designers to quickly design refined sectors or arcs.
[0006] According to one aspect of the present invention, a method for parameterized adjustment of sectors and arcs is provided, comprising:
[0007] Create a target circular component in the canvas page of the design side;
[0008] Responding to a parameter adjustment operation of a property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc;
[0009] According to the parameters of the attribute setting panel, a sector or arc corresponding to the target circular component is generated.
[0010] In an optional manner, the starting point of the fan-shaped or circular arc opening is used to determine the opening position of the fan-shaped or circular arc;
[0011] The starting point is in degrees, with a maximum value of 360 degrees and a minimum value of -360 degrees. The positive and negative values of the starting point are used to determine the direction of the opening.
[0012] When the starting point is 0 degrees, the opening position of the sector or arc is determined from the right point of the target circular component, the abscissa of the right point is the radius length of the circular component, and the ordinate is 0.
[0013] In an optional manner, the curvature of the fan-shaped or circular arc opening is used to determine the curvature of the fan-shaped or circular arc;
[0014] The arc is in units of a percentage of the degree of the target circular component, with a maximum value of 100% and a minimum value of 0%. When the arc is 100%, it corresponds to a 360-degree circle.
[0015] In an optional manner, the inner hollow radius of the sector-shaped or circular arc opening is used to determine the inner hollow area of the sector-shaped or circular arc;
[0016] Wherein, the inner hollow radius is in units of percentage of the radius of the target circular component, with a maximum value of 100% and a minimum value of 0%;
[0017] When the inner hollow radius is 100%, the inner hollow area of the sector or arc is completely blocked;
[0018] When the inner hollow radius is 0%, the inner hollow area of the sector or arc is 0.
[0019] In an optional manner, the circular size includes length and width;
[0020] The property setting panel also includes but is not limited to: rounded corners, layers, transparency, rotation, flipping, outline, stroke and fill parameters.
[0021] In an optional manner, after creating the target circular component in the canvas page of the design end, the method further includes:
[0022] The starting point of the sector or arc opening of the target circular component is 0 degrees by default;
[0023] When the target circular component is selected, the right dot is displayed on the right side of the target circular component;
[0024] The right dot responds to the dragging operation of the mouse, and the dragging adjustment arc is calculated in real time according to the coordinate position of the mouse and the coordinate position of the right dot;
[0025] According to the dragging adjustment arc and the center coordinates of the target circular component, the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time.
[0026] In an optional manner, when the sector or arc of the target circular component is selected, the method further includes:
[0027] A first adjustment dot and a second adjustment dot are respectively displayed on two boundary lines of the opening of the sector or arc; wherein the first adjustment dot and the second adjustment dot are respectively located in the middle of the boundary lines of the sector or arc;
[0028] The first adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment starting point in real time according to the coordinate position of the mouse and the coordinate position of the first adjustment point; and adjusts the starting point of the sector or arc of the target circular component and the starting point of the sector or arc in the property setting panel in real time according to the drag adjustment starting point;
[0029] The second adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment arc in real time according to the coordinate position of the mouse and the coordinate position of the second adjustment point; the arc of the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment arc.
[0030] In an optional manner, when the sector or arc of the target circular component is selected, the method further includes:
[0031] Displaying a third adjustment dot at the center point of the sector or arc;
[0032] The third adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment inner diameter in real time according to the coordinate position of the mouse and the coordinate position of the third adjustment point; the inner hollow radius of the sector or arc of the target circular component and the inner hollow radius of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment inner diameter.
[0033] In an optional manner, when the target circular component is overlapped and blocked, the method further includes:
[0034] For any obstructed target circular component, a penetration layer selection operation is performed to adjust the parameters of the starting point, arc or inner hollow radius of the target circular component without removing or moving the obstructing layer.
[0035] According to another aspect of the present application, a device for parameterized adjustment of sectors and arcs is provided, comprising:
[0036] The component creation module is used to create the target circular component in the canvas page of the design end;
[0037] A parameter adjustment module, used to respond to the parameter adjustment operation of the property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc;
[0038] The component generation module is used to generate a sector or arc corresponding to the target circular component according to the parameters of the attribute setting panel.
[0039] The solution provided by the above embodiment of the present invention is to create a target circular component in the canvas page of the design end; respond to the parameter adjustment operation of the property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc; generate the sector or arc corresponding to the target circular component according to the parameters of the property setting panel. The present invention avoids the complex way of shape cutting by parameterizing the target circular component, simplifies the design and formation process of the sector or arc, can quickly design a refined sector or arc, and increases the flexibility, adjustability and reusability of the design.
[0040] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above description and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS
[0041] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Moreover, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:
[0042] Figure 1 A schematic diagram showing the flow of a method for parameterized adjustment of sectors and arcs according to an embodiment of the present invention;
[0043] Figure 2 A schematic diagram showing the coordinate and size parameter settings of a circular component according to an embodiment of the present invention is shown;
[0044] Figure 3 A schematic diagram showing the parameter settings of the starting point, arc and inner diameter of a circular component according to an embodiment of the present invention is shown;
[0045] Figure 4 A schematic diagram showing the starting point of a circular component according to an embodiment of the present invention is shown;
[0046] Figure 5 A schematic diagram showing the arc of a circular component according to an embodiment of the present invention is shown;
[0047] Figure 6 The inner diameter of the circular component of the embodiment of the present invention is shown in FIG. Figure 1 ;
[0048] Figure 7 The inner diameter of the circular component of the embodiment of the present invention is shown in FIG. Figure 2 ;
[0049] Figure 8 The inner diameter of the circular component of the embodiment of the present invention is shown in FIG. Figure 3 ;
[0050] Fig. 9 A right-side dot schematic diagram of a circular component according to an embodiment of the present invention is shown;
[0051] Fig.10 A schematic diagram of dragging and adjusting the starting point of a circular component according to an embodiment of the present invention is shown;
[0052] Fig.11 A schematic diagram showing the inner diameter dragging adjustment of a circular component according to an embodiment of the present invention is shown;
[0053] Fig.12 A functional structure diagram of a parameterized adjustment method and device for producing sectors and arcs according to an embodiment of the present invention is shown. DETAILED DESCRIPTION
[0054] The exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present invention and to enable the scope of the present invention to be fully communicated to those skilled in the art.
[0055] Before implementing the embodiments of the present invention, the technical terms or custom terms involved below are uniformly explained here:
[0056] Components: They allow the UI to be divided into independent, reusable parts. In practical applications, components are often organized into a nested tree structure.
[0057] The following is a detailed description of the method and device for parameterized adjustment of sectors and arcs proposed by the present invention through specific embodiments.
[0058] Embodiment 1:
[0059] Figure 1 FIG. 1 is a functional structure diagram of a parameterized adjustment method for a sector and an arc according to an embodiment of the present invention. Specifically, Figure 1 As shown, the following steps are included:
[0060] Step S101, creating a target circular component in the canvas page of the design end.
[0061] In existing design software or tools, to create sectors or arcs, a circle is usually drawn, and then the "scissors tool" or "path finder" function is used to split (or cut) the circle into the desired sectors or arcs. Alternatively, a path of a custom shape is drawn using the pen tool to create sectors or arcs of various shapes. Alternatively, an arc is drawn using the polyline tool, and parameters such as the start point, end point, and radius of the arc are set. Alternatively, an arc is drawn using the "three-point arc" method (including the start point, center point, and end point). Alternatively, a semicircular or arc-shaped path is drawn and combined with the edge of a rectangle or a portion of a circle to create a sector or arc. Alternatively, more complex sectors or arcs are completed through complex command operations, trigonometric functions, or a series of Boolean operations.
[0062] In this embodiment, since the circular component has an inherent correlation and intuitiveness with the sector or arc, the circular component is used as the basic shape, which provides more operational advantages and creative space for creating sectors or arcs. Creating and adjusting sectors or arcs of various styles through parametric design based on the circular component can avoid multiple cutting, path adjustment or execution of complex commands, making the operation more intuitive and reducing the difficulty of operation.
[0063] Specifically, drag the circle tool in the shape toolbar on the design side and create a circle as the target circle component on the canvas page, such as Figure 2 As shown, the size and position of the circle can be adjusted through the center coordinates (horizontal coordinate X and vertical coordinate Y) and size / radius (width W and height H) parameters in the property control panel on the right side of the circle. The circle can also be moved by dragging its position. The color, border width, fill pattern, etc. of the circle can also be set through the property control panel.
[0064] Step S102, responding to the parameter adjustment operation of the property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc.
[0065] In this embodiment, Figure 3 As shown, the parameter adjustment operation is performed through the property setting panel on the right side of the target circular component to adjust the parameters such as the center coordinates, circle size, starting point of the sector or arc opening, radian, and internal hollow radius. The shape and style of the sector or arc can be accurately controlled, which reduces the design threshold. Through parametric design, the target circular component can be easily adjusted and expanded to create more sector or arc styles. Among them, the starting point of the sector or arc opening refers to the position where the sector or arc starts on the circle, usually expressed in angles or radians. The radian of a sector or arc is used to measure the size of the central angle of the sector or arc. The internal hollow radius of a sector or arc refers to the radius of the hollow part inside the sector or arc. When the internal hollow radius is 0, the sector or arc is solid.
[0066] In an optional manner, the starting point of the fan-shaped or circular arc opening is used to determine the opening position of the fan-shaped or circular arc;
[0067] The starting point is in degrees, with a maximum value of 360 degrees and a minimum value of -360 degrees. The positive and negative values of the starting point are used to determine the direction of the opening.
[0068] When the starting point is 0 degrees, the opening position of the sector or arc is determined from the right point of the target circular component, the abscissa of the right point is the radius length of the circular component, and the ordinate is 0.
[0069] In this embodiment, the introduction of positive and negative values can intuitively indicate the opening direction, with positive numbers indicating clockwise direction and negative numbers indicating counterclockwise direction. The starting point is from -360 degrees to 360 degrees, covering all possible opening positions. Figure 4 As shown, the starting point is 0 degrees, and the sector or arc will start from the right point of the circular component and open in a clockwise direction.
[0070] In an optional manner, the curvature of the fan-shaped or circular arc opening is used to determine the curvature of the fan-shaped or circular arc;
[0071] The arc is in units of a percentage of the degree of the target circular component, with a maximum value of 100% and a minimum value of 0%. When the arc is 100%, it corresponds to a 360-degree circle.
[0072] In this embodiment, the degree percentage of the target circular component (the decimal point can be accurate to 2 digits) is used as the arc of the sector or arc opening, especially for the comparison and combination between different sectors or arcs, there is no need to perform complex angle calculations, and the operation is more intuitive and easy to understand. Figure 5 As shown, the actual arc = 360 degrees × arc percentage / 100%. If the arc percentage is 10%, the actual arc is 36 degrees. The sector or arc with a preset arc can be flexibly designed in combination with the starting point. For example, starting from the top of a circular component with a radius of 5 cm (i.e., a point 5 cm above the center of the circle), a sector with an opening of 75% (i.e., 270 degrees) is drawn in a clockwise direction.
[0073] In an optional manner, the inner hollow radius of the sector-shaped or circular arc opening is used to determine the inner hollow area of the sector-shaped or circular arc;
[0074] Wherein, the inner hollow radius is in units of percentage of the radius of the target circular component, with a maximum value of 100% and a minimum value of 0%;
[0075] When the inner hollow radius is 100%, the inner hollow area of the sector or arc is completely blocked;
[0076] When the inner hollow radius is 0%, the inner hollow area of the sector or arc is 0.
[0077] In this embodiment, the actual inner hollow radius = the radius of the target circular component × the percentage of the inner hollow radius / 100%. Based on the radius of the target circular component and the curvature of the set sector or arc, the inner circle is drawn with the actual inner hollow radius as the radius and the center of the sector or arc as the center. The inner circle intersects with the outer contour of the sector or arc to form an inner hollow area. Figure 6 As shown in the figure, when the inner diameter is 0%, the inner hollow area is 0, and the middle of the fan-shaped area is solid. Figure 7 As shown in FIG. 1 , when the inner diameter is 100%, the inner hollow area occupies the entire radius (r) of the circle, which will cause the sector or arc to be completely blocked by the hollow area. Figure 6 Based on the sector shown in FIG. 1 , a circle is drawn with the vertex of the sector as the center and 50% of the radius of the sector as the radius to cover the sector, forming a circle as shown in FIG. Figure 8 The fan shape shown can be applied to various design scenarios such as percentage doughnut charts and dashboards.
[0078] If you use existing design software (such as Sketch) to generate Figure 8For the sector shown, the fastest way is usually to do a Boolean operation (Intersect) with a circle and a rectangle. Alternatively, draw a circle, delete the lower anchor point, set the remaining anchor points to Disconneted, and make the control handle below the anchor point (A) in the lower left corner perpendicular to the upper part. Then move A to a position that is aligned with the remaining two anchor points (two red lines), and then make the control handle on the left side of the upper anchor point and the lower right handle perpendicular to the other control handle to obtain a ring-shaped sector. It can be seen that this embodiment greatly simplifies the design process, avoids complex geometric calculations and manual adjustments, and can not only generate high-precision sectors or arcs, but also improve design efficiency. In addition, the internal hollow radius also provides more creative space, which can generate a variety of novel and unique sectors or arcs.
[0079] In an optional manner, the circular size includes length and width;
[0080] The property setting panel also includes but is not limited to: rounded corners, layers, transparency, rotation, flipping, outline, stroke and fill parameters.
[0081] In this embodiment, the sector or arc and its inner area are an integral component, thereby maintaining the integrity of the graphics. The properties of the sector or arc and its inner area (such as fillet, layer, transparency, rotation, flip, outline, stroke and fill parameters) can be adjusted in the property setting panel, which greatly simplifies the design process and improves design efficiency. Compared with traditional design software, the problem of isolation of graphic edges caused by various operations is avoided. In traditional design software, complex operations may destroy the integrity of the graphics, and each edge is independent of each other. It is necessary to select each edge one by one for property setting, and often results in the inability to set the properties of the internal area.
[0082] In an optional manner, after creating the target circular component in the canvas page of the design end, the method further includes:
[0083] The starting point of the sector or arc opening of the target circular component is 0 degrees by default;
[0084] When the target circular component is selected, the right dot is displayed on the right side of the target circular component;
[0085] The right dot responds to the dragging operation of the mouse, and the dragging adjustment arc is calculated in real time according to the coordinate position of the mouse and the coordinate position of the right dot;
[0086] According to the dragging adjustment arc and the center coordinates of the target circular component, the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time.
[0087] In this embodiment, Fig. 9 As shown, when the target circular component is selected, a draggable right dot (the control point for adjusting the curvature of the sector or arc) is displayed on its right side. The designer can intuitively adjust the curvature of the sector or arc by dragging the right dot. It can be dragged up or down. As the mouse is dragged, the curvature of the sector or arc and the corresponding parameters in the property setting panel are updated accordingly.
[0088] Specifically, the drag adjustment arc is calculated in real time according to the coordinate position (x, y) of the mouse and the initial coordinate position (x0, y0) of the dot on the right. The calculation formula is:
[0089] atan2(y-y0)-atan2(y ref -y0,x ref -x0)
[0090] Among them, (x ref ,y ref ) are the coordinates of the center of the circle, and atan2 is the inverse tangent function.
[0091] For example, the center coordinates of the target circular component are (100,100), the initial coordinates of the right dot are (150,100), and when you drag the mouse to the coordinates (180,100):
[0092] Drag to adjust the arc = atan2(100-100,180-150)-atan2(100-100,100-150)
[0093] = atan2(0,30)-atan2(0,-50)
[0094] =0-(-π / 2)
[0095] =π / 2
[0096] In an optional manner, when the sector or arc of the target circular component is selected, the method further includes:
[0097] A first adjustment dot and a second adjustment dot are respectively displayed on two boundary lines of the opening of the sector or arc; wherein the first adjustment dot and the second adjustment dot are respectively located in the middle of the boundary lines of the sector or arc;
[0098] The first adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment starting point in real time according to the coordinate position of the mouse and the coordinate position of the first adjustment point; and adjusts the starting point of the sector or arc of the target circular component and the starting point of the sector or arc in the property setting panel in real time according to the drag adjustment starting point;
[0099] The second adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment arc in real time according to the coordinate position of the mouse and the coordinate position of the second adjustment point; the arc of the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment arc.
[0100] In this embodiment, Fig.10 As shown, in the canvas of the design tool, select the sector or arc with set curvature. In the graphic opening, two dots will appear on the radius line, corresponding to the starting point adjustment and the curvature adjustment respectively. Click the starting point and drag it up and down to adjust the starting point of the opening.
[0101] Specifically, drag the first adjustment point ("starting point adjustment point") to adjust the starting angle of the sector or arc. The drag adjustment starting point is calculated in real time according to the coordinate position (x, y) of the mouse. Since the starting point is an angle value, polar coordinate conversion is required to calculate the new starting angle. The new starting angle is:
[0102] atan2(yy center ,xx center )-φ0
[0103] Among them, (x center ,y center ) is the coordinate of the center of the circle, φ0 is the initial offset angle, which is the angle between the line connecting the original starting point of the sector or arc and the center of the circle and the positive direction of the x-axis.
[0104] Drag the second adjustment point to adjust the arc of the sector or arc, and calculate the drag adjustment arc in real time according to the coordinate position of the mouse and the coordinates of the center of the circle. The calculation formula is similar to the calculation method of the drag adjustment arc mentioned above, where the drag adjustment arc = new end angle - new start angle.
[0105] For example, the center coordinates of the target circular component are (100,100), the original starting point of the sector or arc is 0 degrees (i.e., coincident with the positive direction of the x-axis), and the original arc is 90 degrees. The initial coordinates of the first adjustment point are located in the middle of the starting point boundary line, and the initial coordinates of the second adjustment point are located on the boundary line that forms a 45-degree angle with the center line. When the mouse is dragged to the coordinates (150,100), the new starting angle is calculated to be approximately 30 degrees (atan2(0,50)≈0.5774, which is converted to an angle of approximately 33 degrees. This article simplifies it to 30 degrees as an example), and the starting point of the sector or arc is adjusted to 30 degrees. When the mouse is dragged to the coordinate (100,30), the new end angle is calculated to be approximately -60 degrees (atan2(-30,0)≈-1.0472, converted to an angle and considering the relative position after the starting point has been adjusted to 30 degrees, it is simplified to -60 degrees as an example), and the drag adjustment radian is -90 degrees (that is, the new end angle -30 degrees - the original starting point 0 degrees), but because the radian should be positive and not exceed 360 degrees (or 2π radians), it is rotated 90 degrees clockwise (or -90 degrees + 360 degrees = 270 degrees).
[0106] In an optional manner, when the sector or arc of the target circular component is selected, the method further includes:
[0107] Displaying a third adjustment dot at the center point of the sector or arc;
[0108] The third adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment inner diameter in real time according to the coordinate position of the mouse and the coordinate position of the third adjustment point; the inner hollow radius of the sector or arc of the target circular component and the inner hollow radius of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment inner diameter.
[0109] In this embodiment, when the mouse drags the third adjustment point, the current coordinate position of the mouse is captured in real time and compared with the original coordinate position of the third adjustment point. The drag adjustment inner diameter is calculated based on the distance change between the two coordinate points. The drag adjustment inner diameter is the radius of the inner hollow part of the sector or arc, and the hollowness of the sector or arc can be controlled. Fig.11 As shown, select the circle with parametric design turned on, and there will be a small round dot. Click and drag it around to adjust the percentage of the inner diameter.
[0110] In an optional manner, when the target circular component is overlapped and blocked, the method further includes:
[0111] For any obstructed target circular component, a penetration layer selection operation is performed to adjust the parameters of the starting point, arc or inner hollow radius of the target circular component without removing or moving the obstructing layer.
[0112] In this embodiment, when the target circular component is blocked by other layers (such as text boxes, pictures or other shapes), it supports directly penetrating the above layers to select and operate the blocked target circular component without removing or moving the blocking layers. Various parameters can be adjusted for it like processing unblocked components, thereby providing a better editing experience without destroying the overall design layout.
[0113] Step S103, generating a sector or arc corresponding to the target circular component according to the parameters of the attribute setting panel.
[0114] In this embodiment, the outer boundary of the sector or arc is calculated according to the center coordinates, radius, starting angle and radian. If the inner hollow radius is not 0, its inner boundary is calculated and the area between the two is filled. The drawing function of the graphics drawing library is called to draw the sector or arc according to the calculated boundary. The specific drawing function is not limited in this article.
[0115] The solution provided by the above embodiment of the present invention is to create a target circular component in the canvas page of the design end; respond to the parameter adjustment operation of the property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc; generate the sector or arc corresponding to the target circular component according to the parameters of the property setting panel. The present invention avoids the complex way of shape cutting by parameterizing the target circular component, simplifies the design and formation process of the sector or arc, can quickly design a refined sector or arc, and increases the flexibility, adjustability and reusability of the design.
[0116] Embodiment 2:
[0117] Fig.12 The functional structure diagram of the device provided in the embodiment of the present application is shown. Fig.12 As shown, the device comprises:
[0118] The component creation module 1201 is used to create a target circular component in the canvas page of the design end;
[0119] A parameter adjustment module 1202, for responding to a parameter adjustment operation of a property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc;
[0120] The component generation module 1203 is used to generate a sector or arc corresponding to the target circular component according to the parameters of the attribute setting panel.
[0121] In an optional manner, the starting point of the sector or arc opening is used to determine the opening position of the sector or arc; wherein the starting point is in degrees, the maximum value is 360 degrees, the minimum value is -360 degrees, and the positive and negative values of the starting point are used to determine the direction of the opening; the parameter adjustment module 1202 is further used to:
[0122] When the starting point is 0 degrees, the opening position of the sector or arc is determined from the right point of the target circular component, the abscissa of the right point is the radius length of the circular component, and the ordinate is 0.
[0123] In an optional manner, the curvature of the fan-shaped or circular arc opening is used to determine the curvature of the fan-shaped or circular arc;
[0124] The arc is in units of a percentage of the degree of the target circular component, with a maximum value of 100% and a minimum value of 0%. When the arc is 100%, it corresponds to a 360-degree circle.
[0125] In an optional manner, the inner hollow radius of the sector-shaped or circular arc opening is used to determine the inner hollow area of the sector-shaped or circular arc;
[0126] Wherein, the inner hollow radius is in units of percentage of the radius of the target circular component, with a maximum value of 100% and a minimum value of 0%;
[0127] When the inner hollow radius is 100%, the inner hollow area of the sector or arc is completely blocked;
[0128] When the inner hollow radius is 0%, the inner hollow area of the sector or arc is 0.
[0129] In an optional manner, the circular size includes length and width;
[0130] The property setting panel also includes but is not limited to: rounded corners, layers, transparency, rotation, flipping, outline, stroke and fill parameters.
[0131] In an optional manner, after creating the target circular component in the canvas page of the design end, the parameter adjustment module 1202 is further used to:
[0132] The starting point of the sector or arc opening of the target circular component is 0 degrees by default;
[0133] When the target circular component is selected, the right dot is displayed on the right side of the target circular component;
[0134] The right dot responds to the dragging operation of the mouse, and the dragging adjustment arc is calculated in real time according to the coordinate position of the mouse and the coordinate position of the right dot;
[0135] According to the dragging adjustment arc and the center coordinates of the target circular component, the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time.
[0136] In an optional manner, when the sector or arc of the target circular component is selected, the parameter adjustment module 1202 is further used to:
[0137] A first adjustment dot and a second adjustment dot are respectively displayed on two boundary lines of the opening of the sector or arc; wherein the first adjustment dot and the second adjustment dot are respectively located in the middle of the boundary lines of the sector or arc;
[0138] The first adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment starting point in real time according to the coordinate position of the mouse and the coordinate position of the first adjustment point; and adjusts the starting point of the sector or arc of the target circular component and the starting point of the sector or arc in the property setting panel in real time according to the drag adjustment starting point;
[0139] The second adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment arc in real time according to the coordinate position of the mouse and the coordinate position of the second adjustment point; the arc of the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment arc.
[0140] In an optional manner, when the sector or arc of the target circular component is selected, the parameter adjustment module 1202 is further used to:
[0141] Displaying a third adjustment dot at the center point of the sector or arc;
[0142] The third adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment inner diameter in real time according to the coordinate position of the mouse and the coordinate position of the third adjustment point; the inner hollow radius of the sector or arc of the target circular component and the inner hollow radius of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment inner diameter.
[0143] In an optional manner, when the target circular component is overlapped and blocked, the parameter adjustment module 1202 is further used to:
[0144] For any obstructed target circular component, a penetration layer selection operation is performed to adjust the parameters of the starting point, arc or inner hollow radius of the target circular component without removing or moving the obstructing layer.
[0145] The solution provided by the above embodiment of the present invention is to create a target circular component in the canvas page of the design end; respond to the parameter adjustment operation of the property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc; generate the sector or arc corresponding to the target circular component according to the parameters of the property setting panel. The present invention avoids the complex way of shape cutting by parameterizing the target circular component, simplifies the design and formation process of the sector or arc, can quickly design a refined sector or arc, and increases the flexibility, adjustability and reusability of the design.
[0146] The algorithm or display provided herein is not inherently related to any particular computer, virtual system or other equipment. Various general purpose systems can also be used together with the teachings based on this. According to the above description, it is obvious to construct the structure required for this type of system. In addition, the embodiment of the present invention is not directed to any specific programming language yet. It should be understood that various programming languages can be utilized to realize the content of the present invention described herein, and the description made to specific languages above is for disclosing the best mode of the present invention.
[0147] In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.
[0148] Similarly, it should be understood that in order to streamline the present invention and aid in understanding one or more of the various inventive aspects, in the above description of exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, this disclosed method should not be interpreted as reflecting the following intention: that the claimed invention requires more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, inventive aspects lie in less than all the features of the individual embodiments disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the present invention.
[0149] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.
[0150] In addition, those skilled in the art will appreciate that, although some embodiments herein include certain features included in other embodiments but not other features, the combination of features of different embodiments is meant to be within the scope of the present invention and form different embodiments. For example, in the claims below, any one of the claimed embodiments may be used in any combination.
[0151] The various component embodiments of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all functions of some or all components according to embodiments of the present invention. The present invention can also be implemented as a device or apparatus program (e.g., computer program and computer program product) for executing part or all of the methods described herein. Such a program implementing the present invention can be stored on a computer-readable medium, or can have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.
[0152] It should be noted that the above embodiments illustrate the present invention rather than limit it, and that those skilled in the art may devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be construed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim enumerating a number of devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be understood as limitations on the order of execution.
Claims
1. A method for parameterized adjustment of sectors and arcs, characterized in that: include: Create a target circular component in the canvas page of the design side; Responding to a parameter adjustment operation of a property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc; According to the parameters of the attribute setting panel, a sector or arc corresponding to the target circular component is generated.
2. The parametric adjustment method for sectors and arcs according to claim 1, characterized in that: The starting point of the fan-shaped or circular arc opening is used to determine the opening position of the fan-shaped or circular arc; The starting point is in degrees, with a maximum value of 360 degrees and a minimum value of -360 degrees. The positive and negative values of the starting point are used to determine the direction of the opening. When the starting point is 0 degrees, the opening position of the sector or arc is determined from the right point of the target circular component, the abscissa of the right point is the radius length of the circular component, and the ordinate is 0.
3. The parametric adjustment method for sectors and arcs according to claim 1, characterized in that: The curvature of the sector or arc opening is used to determine the curvature of the sector or arc; The arc is in units of a percentage of the degree of the target circular component, with a maximum value of 100% and a minimum value of 0%. When the arc is 100%, it corresponds to a 360-degree circle.
4. The parametric adjustment method for sectors and arcs according to claim 1, characterized in that: The inner hollow radius of the sector-shaped or circular arc opening is used to determine the inner hollow area of the sector-shaped or circular arc; Wherein, the inner hollow radius is in units of percentage of the radius of the target circular component, with a maximum value of 100% and a minimum value of 0%; When the inner hollow radius is 100%, the inner hollow area of the sector or arc is completely blocked; When the inner hollow radius is 0%, the inner hollow area of the sector or arc is 0.
5. The parametric adjustment method for sectors and arcs according to claim 1, characterized in that: The circular dimensions include length and width; The property setting panel also includes but is not limited to: rounded corners, layers, transparency, rotation, flipping, outline, stroke and fill parameters.
6. The parametric adjustment method for sectors and arcs according to claim 2, characterized in that: After creating the target circular component in the canvas page of the design end, the method further includes: The starting point of the sector or arc opening of the target circular component is 0 degrees by default; When the target circular component is selected, the right dot is displayed on the right side of the target circular component; The right dot responds to the dragging operation of the mouse, and the dragging adjustment arc is calculated in real time according to the coordinate position of the mouse and the coordinate position of the right dot; According to the dragging adjustment arc and the center coordinates of the target circular component, the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time.
7. The parametric adjustment method for sectors and arcs according to claim 6, characterized in that: When the sector or arc of the target circular component is selected, the method further includes: A first adjustment dot and a second adjustment dot are respectively displayed on two boundary lines of the opening of the sector or arc; wherein the first adjustment dot and the second adjustment dot are respectively located in the middle of the boundary lines of the sector or arc; The first adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment starting point in real time according to the coordinate position of the mouse and the coordinate position of the first adjustment point; and adjusts the starting point of the sector or arc of the target circular component and the starting point of the sector or arc in the property setting panel in real time according to the drag adjustment starting point; The second adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment arc in real time according to the coordinate position of the mouse and the coordinate position of the second adjustment point; the arc of the sector or arc of the target circular component and the arc of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment arc.
8. The parametric adjustment method for sectors and arcs according to claim 6 or 7, characterized in that: When the sector or arc of the target circular component is selected, the method further includes: Displaying a third adjustment dot at the center point of the sector or arc; The third adjustment point responds to the dragging operation of the mouse, and calculates the drag adjustment inner diameter in real time according to the coordinate position of the mouse and the coordinate position of the third adjustment point; the inner hollow radius of the sector or arc of the target circular component and the inner hollow radius of the sector or arc in the property setting panel are adjusted in real time according to the drag adjustment inner diameter.
9. The parametric adjustment method for sectors and arcs according to claim 1 or 8, characterized in that: When the target circular component is overlapped and blocked, the method further includes: For any obstructed target circular component, a penetration layer selection operation is performed to adjust the parameters of the starting point, arc or inner hollow radius of the target circular component without removing or moving the obstructing layer.
10. A parametric adjustment and production device for sectors and arcs, characterized in that: include: The component creation module is used to create the target circular component in the canvas page of the design end; A parameter adjustment module, used to respond to the parameter adjustment operation of the property setting panel of the target circular component, wherein the parameters of the property setting panel include the coordinates of the center of the circle, the size of the circle, the starting point of the sector or arc opening, the curvature of the sector or arc, and the inner hollow radius of the sector or arc; The component generation module is used to generate a sector or arc corresponding to the target circular component according to the parameters of the attribute setting panel.