CN111338730A - Method and device for generating display interface and electronic equipment - Google Patents

Method and device for generating display interface and electronic equipment Download PDF

Info

Publication number
CN111338730A
CN111338730A CN202010108796.8A CN202010108796A CN111338730A CN 111338730 A CN111338730 A CN 111338730A CN 202010108796 A CN202010108796 A CN 202010108796A CN 111338730 A CN111338730 A CN 111338730A
Authority
CN
China
Prior art keywords
display area
auxiliary circle
arc
generating
circle display
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010108796.8A
Other languages
Chinese (zh)
Inventor
熊勋泉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN202010108796.8A priority Critical patent/CN111338730A/en
Publication of CN111338730A publication Critical patent/CN111338730A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The embodiment of the disclosure provides a method and a device for generating a display interface and electronic equipment, belonging to the technical field of image processing, wherein the method comprises the following steps: determining a display bar to be generated and a button positioned in the middle of the display bar in a display interface to be generated; generating a first auxiliary circle display area by taking the button as a reference, wherein the circle center of the first auxiliary circle display area is superposed with the center of the button, and the first radius of the first auxiliary circle display area is larger than the radius of the button; generating a second auxiliary circle display area, wherein the second auxiliary circle display area is circumscribed with the first auxiliary circle display area; generating an arc sideline according to the first auxiliary circle display area and the second auxiliary circle display area, wherein an arc gap which is concave to the button is formed between the first arc line segment and the button, and an arc gap which is opposite to the button is formed between the second arc line segment and the button; and extending the two ends of the arc sideline along the edge of the display column to obtain the sideline of the display column. The scheme of the disclosure improves the attractiveness of the display area.

Description

Method and device for generating display interface and electronic equipment
Technical Field
The present disclosure relates to the field of image processing technologies, and in particular, to a method and an apparatus for generating a display interface, and an electronic device.
Background
In the display interfaces of electronic devices such as mobile phones, display columns are mostly uniform rectangular frames. The buttons on the display bar are usually circular buttons, the buttons are directly displayed in the display bar or on the edge of the display bar, and the comprehensive display effect of the buttons and the display bar is single.
Therefore, the technical problem that the display effect is single exists in the existing display scheme of the display bar.
Disclosure of Invention
In view of this, embodiments of the present disclosure provide a method and an apparatus for generating a display interface, and an electronic device, which at least partially solve the problems in the prior art.
In a first aspect, an embodiment of the present disclosure provides a method for generating a display interface, including:
determining a display bar to be generated and a button positioned in the middle of the display bar in a display interface to be generated;
generating a first auxiliary circle display area by taking the button as a reference, wherein the center of the first auxiliary circle display area is superposed with the center of the button, and the first radius of the first auxiliary circle display area is larger than the radius of the button;
generating a second auxiliary circle display area by taking the first auxiliary circle display area as a reference, wherein the second auxiliary circle display area is positioned on one side of the first auxiliary circle display area and is circumscribed with the first auxiliary circle display area;
generating an arc-shaped sideline according to the first auxiliary circle display area and the second auxiliary circle display area, wherein the arc-shaped sideline comprises a first arc line segment positioned right below the first auxiliary circle display area, and a second arc line segment and a third arc line segment which are respectively positioned at two ends of the first arc line segment, an arc-shaped gap which is concave to the button is formed between the first arc line segment and the button, and an arc-shaped gap which is back to the button is formed between the second arc line segment and the button;
and extending the two ends of the arc-shaped sideline along the edge of the display bar to obtain the sideline of the display bar.
According to a specific implementation manner of the embodiment of the present disclosure, the step of generating an arc-shaped edge line according to the first auxiliary circle display area and the second auxiliary circle display area includes:
determining a first included angle between a circle center connecting line of the first auxiliary circle display area and the second auxiliary circle display area and a reference center line, wherein the reference center line is a vertical perpendicular line passing through the center of the button;
generating the first arc line segment according to the first included angle and the first radius of the first auxiliary circle display area;
and generating the second arc line segment and the third arc line segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar.
According to a specific implementation manner of the embodiment of the present disclosure, after the step of generating the first auxiliary circle display area by using the button as a reference, the method further includes:
generating a third auxiliary circle by taking the first auxiliary circle display area as a reference, wherein the third auxiliary circle and the second auxiliary circle display area are respectively and symmetrically arranged at two sides of the first auxiliary circle display area, and the third auxiliary circle is circumscribed with the first auxiliary circle display area;
the step of generating the second arc segment and the third arc segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar includes:
and generating the second arc line segment according to the first included angle, the second radius of the display area of the second auxiliary circle and the transverse width of the display bar, and generating the third arc line segment according to the first included angle, the third radius of the third auxiliary circle and the transverse width of the display bar.
According to a specific implementation manner of the embodiment of the present disclosure, the step of generating the second arc line segment and the third arc line segment according to the first included angle, the radius of the second auxiliary circle display area, and the lateral width of the display bar includes:
generating a second arc line segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar;
and generating a mirror image structure of the second arc segment as the third arc segment by taking the reference center line as a reference.
According to a specific implementation manner of the embodiment of the present disclosure, the step of determining a first included angle between a center line of the first auxiliary circle display area and the second auxiliary circle display area and a reference center line includes:
determining a first distance from the center of the first auxiliary circle display area to a horizontal line where the first tangent point is located, wherein the first tangent point is the tangent point of the first auxiliary circle display area and the second auxiliary circle display area;
calculating a cosine value of the first included angle according to the first distance and the first radius of the first auxiliary circle display area;
and calculating the angle value of the first included angle according to the cosine value of the first included angle.
According to a specific implementation manner of the embodiment of the present disclosure, the step of generating the first arc segment according to the first included angle and the first radius of the first auxiliary circle display area includes:
determining a starting and stopping angle of the first arc line segment according to the first angle by taking the reference middle line as a reference;
and generating the first arc line segment according to the first radius of the first auxiliary circle display area and the starting and stopping angle of the first arc line segment.
According to a specific implementation manner of the embodiment of the present disclosure, the step of generating the second arc line segment according to the first included angle, the second radius of the second auxiliary circle display area, and the transverse width of the display bar includes:
determining the starting angle of the second arc line segment according to the second radius of the second auxiliary circle display area and the transverse width of the display bar;
adding the first angle to the starting angle of the second arc segment to obtain the ending angle of the second arc segment;
and generating the second arc line segment according to the radius of the second auxiliary circle display area, and the starting angle and the ending angle of the second arc line segment.
In a second aspect, an embodiment of the present disclosure provides an apparatus for generating a display interface, including:
the device comprises a determining module, a display module and a display module, wherein the determining module is used for determining a display bar to be generated and a button positioned in the middle of the display bar;
the first generating module is used for generating a first auxiliary circle display area by taking the button as a reference, wherein the circle center of the first auxiliary circle display area is superposed with the center of the button, and the first radius of the first auxiliary circle display area is larger than the radius of the button;
a second generating module, configured to generate a second auxiliary circle display area with the first auxiliary circle display area as a reference, where the second auxiliary circle display area is located on one side of the first auxiliary circle display area, and the second auxiliary circle display area is circumscribed with the first auxiliary circle display area;
a third generating module, configured to generate an arc-shaped edge according to the first auxiliary circle display area and the second auxiliary circle display area, where the arc-shaped edge includes a first arc segment located right below the first auxiliary circle display area, and a second arc segment and a third arc segment located at two ends of the first arc segment, respectively, an arc-shaped gap that is concave toward the button exists between the first arc segment and the button, and an arc-shaped gap that is opposite to the button exists between the second arc segment and the button and between the third arc segment and the button;
and the extension module is used for extending the two ends of the arc-shaped sideline along the edge of the display column to obtain the sideline of the display column.
In a third aspect, an embodiment of the present disclosure further provides an electronic device, where the electronic device includes:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of generating a display interface of the first aspect or any implementation manner of the first aspect.
In a fourth aspect, the disclosed embodiments also provide a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method for generating a display interface in the first aspect or any implementation manner of the first aspect.
In a fifth aspect, the present disclosure also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, where the computer program includes program instructions, and when the program instructions are executed by a computer, the computer is caused to execute the method for generating a display interface in the foregoing first aspect or any implementation manner of the first aspect.
The method for generating the display interface in the embodiment of the disclosure comprises the steps of determining a display bar to be generated and a button positioned in the middle of the display bar; generating a first auxiliary circle display area by taking the button as a reference, wherein the center of the first auxiliary circle display area is superposed with the center of the button, and the first radius of the first auxiliary circle display area is larger than the radius of the button; generating a second auxiliary circle display area by taking the first auxiliary circle display area as a reference, wherein the second auxiliary circle display area is positioned on one side of the first auxiliary circle display area and is circumscribed with the first auxiliary circle display area; generating an arc-shaped sideline according to the first auxiliary circle display area and the second auxiliary circle display area, wherein the arc-shaped sideline comprises a first arc line segment positioned right below the first auxiliary circle display area, and a second arc line segment and a third arc line segment which are respectively positioned at two ends of the first arc line segment, an arc-shaped gap which is concave to the button is formed between the first arc line segment and the button, and an arc-shaped gap which is back to the button is formed between the second arc line segment and the button; and extending the two ends of the arc-shaped sideline along the edge of the display bar to obtain the sideline of the display bar. Through this disclosed scheme, provide the demonstration fence with button assorted level and smooth arc sideline, promoted holistic pleasing to the eye effect and the variety that shows the fence sideline and show the scheme.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings needed to be used in the embodiments will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present disclosure, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a schematic flowchart of a method for generating a display interface according to an embodiment of the present disclosure;
fig. 2 is a schematic view of a display interface involved in a method for generating a display interface according to an embodiment of the present disclosure;
FIG. 3 is a schematic diagram of a related auxiliary circle involved in a method for generating a display interface according to an embodiment of the present disclosure;
FIG. 4 is a partial schematic flow chart diagram of another method for generating a display interface according to an embodiment of the present disclosure;
FIG. 5 is a partial schematic flow chart diagram of another method for generating a display interface according to an embodiment of the present disclosure;
fig. 6 is a schematic structural diagram of an apparatus for generating a display interface according to an embodiment of the present disclosure;
fig. 7 is a schematic view of an electronic device provided in an embodiment of the disclosure.
Detailed Description
The embodiments of the present disclosure are described in detail below with reference to the accompanying drawings.
The embodiments of the present disclosure are described below with specific examples, and other advantages and effects of the present disclosure will be readily apparent to those skilled in the art from the disclosure in the specification. It is to be understood that the described embodiments are merely illustrative of some, and not restrictive, of the embodiments of the disclosure. The disclosure may be embodied or carried out in various other specific embodiments, and various modifications and changes may be made in the details within the description without departing from the spirit of the disclosure. It is to be noted that the features in the following embodiments and examples may be combined with each other without conflict. All other embodiments, which can be derived by a person skilled in the art from the embodiments disclosed herein without making any creative effort, shall fall within the protection scope of the present disclosure.
It is noted that various aspects of the embodiments are described below within the scope of the appended claims. It should be apparent that the aspects described herein may be embodied in a wide variety of forms and that any specific structure and/or function described herein is merely illustrative. Based on the disclosure, one skilled in the art should appreciate that one aspect described herein may be implemented independently of any other aspects and that two or more of these aspects may be combined in various ways. For example, an apparatus may be implemented and/or a method practiced using any number of the aspects set forth herein. Additionally, such an apparatus may be implemented and/or such a method may be practiced using other structure and/or functionality in addition to one or more of the aspects set forth herein.
It should be noted that the drawings provided in the following embodiments are only for illustrating the basic idea of the present disclosure, and the drawings only show the components related to the present disclosure rather than the number, shape and size of the components in actual implementation, and the type, number and ratio of the components in actual implementation may be changed arbitrarily, and the layout of the components may be more complicated.
In addition, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects may be practiced without these specific details.
The embodiment of the disclosure provides a method for generating a display interface. The method for generating the display interface provided by the embodiment may be executed by a computing device, which may be implemented as software or implemented as a combination of software and hardware, and may be integrally provided in a server, a terminal device, and the like.
Referring to fig. 1, a method for generating a display interface provided by an embodiment of the present disclosure includes:
s101, determining a display bar to be generated and a button positioned in the middle of the display bar in a display interface to be generated;
the method for generating the display interface provided by the embodiment is used for generating the edge line of the display column in the display interface of the electronic device. As shown in fig. 2, which is a schematic diagram of a display interface 201 of an electronic device, the display interface 201 includes a display bar 202, and a button 203 is disposed in a middle portion of the display bar, and an object of this embodiment is to generate a sideline of the display bar 202, so that the sideline of the display bar 202 matches with the button 203. Of course, other buttons 204 may also be provided in the display bar 202, and the other buttons 204 may be located in the display bar, and the inner buttons 204 may not be relied upon when generating the edge line of the display bar 202.
And after the electronic equipment determines the display bar to be generated, determining the button needing to be referred in the middle of the display bar. This determination may include determining information such as the location of the display bar within the display interface, the actual location and specific dimensions of the display bar and buttons, and so forth.
S102, generating a first auxiliary circle display area by taking the button as a reference, wherein the center of the first auxiliary circle display area coincides with the center of the button, and the first radius of the first auxiliary circle display area is larger than the radius of the button;
generally, the display bar is a rectangular frame, when the sideline of the display bar is generated, in order to optimize the display effect, the sideline part of the display bar, which is close to the button, is generated into an arc sideline, the sideline part of the display bar, which is far away from the button, is generated into a linear sideline, and the arc sideline and the linear sideline are connected end to form the sideline of the display bar.
When generating the arc-shaped sideline, the method is realized by means of an auxiliary circle. Specifically, an auxiliary circle is generated based on the button, and is defined as a first auxiliary circle display area. The first auxiliary circle display area is set to coincide with the center of the button, and the first radius of the first auxiliary circle display area is greater than the radius of the button, so that the first auxiliary circle display area can completely cover the button. The first radius of the first auxiliary circle display area is set to be within a certain range of the radius difference of the button, so that a gap exists between the generated arc sideline and the button to ensure the overall attractiveness, and the arc sideline is prevented from being too far away from the button.
S103, generating a second auxiliary circle display area by taking the first auxiliary circle display area as a reference, wherein the second auxiliary circle display area is positioned on one side of the first auxiliary circle display area and is circumscribed with the first auxiliary circle display area;
after the first auxiliary circle display area is generated according to the steps, an auxiliary circle is generated by taking the first auxiliary circle display area as a reference, and the auxiliary circle is defined as a second auxiliary circle display area. The second auxiliary circle display area is positioned at one side of the first auxiliary circle display area, and the two auxiliary circles are circumscribed with each other.
Specifically, as shown in fig. 3, a first auxiliary circle display area O is generated according to the button 2031So that the first auxiliary circle display area O1Completely covers the button 203 and the first auxiliary circle display area O1And a second auxiliary circle display area O2Is externally tangent and has a tangent point of Q1Tangent line is L1. Radius R of first auxiliary circle display area1May be larger than the radius R of the second auxiliary circle display area2Or may be smaller than or equal to the radius R of the second auxiliary circle display area2And specifically, the radian and the trend of the arc sideline required by the user are set.
S104, generating an arc-shaped sideline according to the first auxiliary circle display area and the second auxiliary circle display area, wherein the arc-shaped sideline comprises a first arc line segment located right below the first auxiliary circle display area, and a second arc line segment and a third arc line segment respectively located at two ends of the first arc line segment, an arc-shaped gap which is concave to the button is formed between the first arc line segment and the button, and arc-shaped gaps which are back to the button are formed between the second arc line segment and the button;
generating a first auxiliary circle display area and a second auxiliary circle display area according to the stepsAfter the regions are shown, an arc-shaped edge line can be generated. Specifically, as shown in fig. 3, the arc-shaped edge line may be generated by dividing into three parts, including: located in the first auxiliary circle display area O1Lower first arc segment S1A first auxiliary circle display area O1Second arc segment S at lower parts of two sides2And a third arc segment S3Second arc segment S2And a third arc segment S3And are symmetrically distributed.
The arc side line is attached to the first auxiliary circle display area O1The button 203 is located in the first auxiliary circle display area O1And a drop-shaped area for attaching the button is formed, and an arc-shaped gap exists between the arc-shaped sideline and the button 203 in the area. Wherein the first arc segment S1The arc gap between the button 203 is concave to the button 203, and the second arc segment S2And a third arc segment S3The arc-shaped gap with the button 203 faces away from the button 203.
And S105, extending the two ends of the arc-shaped sideline along the edge of the display column to obtain the sideline of the display column.
As shown in fig. 2, the electronic device generates an arc-shaped sideline, i.e. S, according to the above steps1+S1+S1Then, the two ends of the arc sideline can be extended outwards to generate a linear sideline S along the edge of the display bar4. The linear sideline is connected with the arc sideline at the head position, namely the sideline of the display column.
Of course, in other embodiments, a linear sideline may be generated along the edge of the display bar, and then an arc sideline may be generated according to the above steps, and the sidelines of the display bar may be formed by connecting end to end.
It should be noted that the first auxiliary circle display area and the second auxiliary circle display area are only used for an auxiliary process of generating an arc-shaped edge line, and after the operation of generating the display interface is completed, the edge line of the first auxiliary circle display area and the second auxiliary circle display area or other related auxiliary lines can be eliminated or hidden.
In the method for generating a display interface provided by the embodiment of the present disclosure, after determining a display bar to be generated and a button located in the middle of the display bar, a water drop type arc sideline enclosing the button is generated by using a first auxiliary circle display area and a second auxiliary circle display area, a better aesthetic degree is achieved through an arc gap between the arc sideline and the button, and then two ends of the arc sideline extend along the edge of the display bar, so that the sideline of the display bar can be obtained. Through this disclosed scheme, provide the demonstration fence with button assorted level and smooth arc sideline, promoted holistic pleasing to the eye effect and the variety that shows the fence sideline and show the scheme.
As shown in fig. 4, the embodiment of the present disclosure further provides a specific implementation manner, and further defines a generation process of the arc-shaped edge. Specifically, in step S104, generating an arc-shaped edge according to the first auxiliary circle display area and the second auxiliary circle display area may include:
s401, determining a first included angle between a circle center connecting line of the first auxiliary circle display area and the second auxiliary circle display area and a reference center line, wherein the reference center line is a vertical perpendicular line passing through the center of the button;
as shown in fig. 3, the first auxiliary circle display area O is defined1A vertical line passing through the center of the button 203 is a reference center line L0. A center O connected to the first auxiliary circle display region1And a center O of the second auxiliary circle display area2To obtain a circle center connecting line L2Calculating circle center connecting line L2And a reference center line L0Is defined as a first included angle α.
Further, as shown in fig. 5, the specific implementation of calculating the first included angle α may be:
s501, determining a first distance from the circle center of the first auxiliary circle display area to a horizontal line where the first tangent point is located, wherein the first tangent point is the tangent point of the first auxiliary circle display area and the second auxiliary circle display area;
s502, calculating a cosine value of the first included angle according to the first distance and the first radius of the first auxiliary circle display area;
s503, calculating the angle value of the first included angle according to the cosine value of the first included angle.
As shown in fig. 3, a first auxiliary circle display area O1And a second auxiliary circle display area O2The first tangent point of (A) is Q1Calculating the center O of the first auxiliary circle display area1To the first tangent point Q1On the horizontal line L3First distance d of1。
According to the first distance d1And a first radius R of the first auxiliary circle display area1The cosine of the first angle α, cos α ═ d, can be calculated1/R1Then, an angle value of the first included angle α, i.e., ang α ═ acos (d) is obtained1/R1)。
The implementation code of the above specific steps may be:
CGFloat b＝sqrt(R1*R1-d1*d1)；
CGFloat ang1＝acos(d1/R1).
s402, generating the first arc line segment according to the first included angle and the first radius of the first auxiliary circle display area;
after the first included angle α is obtained according to the above steps, a first arc segment S1 is generated according to parameters such as the first included angle α and the first radius R1 of the first auxiliary circle display area by using a common arc generation algorithm.
Optionally, the specific implementation of generating the first arc segment may be:
determining a starting and stopping angle of the first arc line segment according to the first angle by taking the reference middle line as a reference;
and generating the first arc line segment according to the first radius of the first auxiliary circle display area and the starting and stopping angle of the first arc line segment.
The implementation code of the above specific steps may be:
CGFloat startAngle2＝0.5*M_PI+angα；
CGFloat endAngle2＝0.5*M_PI–angα.
and S403, generating the second arc line segment and the third arc line segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar, wherein arc gaps back to the first button exist between the second arc line and the button and between the third arc line and the button.
Accordingly, the area O is displayed according to the first included angle α and the second auxiliary circle using a common arc line generation algorithm2Second radius R2Isoparametric, i.e. to generate the first arc segment S1Second arc segment S connected with the left end of2。
Optionally, the manner of generating the second arc segment may be:
according to a specific implementation manner of the embodiment of the present disclosure, the step of generating the second arc line segment according to the first included angle, the second radius of the second auxiliary circle display area, and the transverse width of the display bar includes:
determining the starting angle of the second arc line segment according to the second radius of the second auxiliary circle display area and the transverse width of the display bar;
adding the first angle to the starting angle of the second arc segment to obtain the ending angle of the second arc segment;
and generating the second arc line segment according to the radius of the second auxiliary circle display area, and the starting angle and the ending angle of the second arc line segment.
In addition, in consideration of the symmetry of the third arc segment and the second arc segment, the third arc segment may be generated in the following two ways:
in one embodiment, after the step of generating the first auxiliary circle display area based on the button, the method may further include:
generating a third auxiliary circle by taking the first auxiliary circle display area as a reference, wherein the third auxiliary circle and the second auxiliary circle display area are respectively and symmetrically arranged at two sides of the first auxiliary circle display area, and the third auxiliary circle is circumscribed with the first auxiliary circle display area;
and generating the second arc line segment according to the first included angle, the second radius of the display area of the second auxiliary circle and the transverse width of the display bar, and generating the third arc line segment according to the first included angle, the third radius of the third auxiliary circle and the transverse width of the display bar.
In another embodiment, the step of generating the second arc segment and the third arc segment according to the first included angle, the radius of the second auxiliary circle display area, and the lateral width of the display bar may include:
generating a second arc line segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar;
and generating a mirror image structure of the second arc segment as the third arc segment by taking the reference center line as a reference.
The second arc segment and the third arc segment are symmetrical structures, the second arc segment and the third arc segment can be respectively generated according to similar steps, and a mirror image structure of the second arc segment can be obtained after the second arc segment is generated and used as the third arc segment. Of course, in other embodiments, the second arc segment and/or the third arc segment may be generated first, and then the first arc segment may be generated, and the order of the second arc segment and/or the third arc segment is not limited.
The implementation codes of the above steps may be:
CGFloat c＝R2*sin(angα)；
CGFloat e＝sqrt(R2*R2-c*c)；
CGFloat leftPx is self. awe _ width 0.5-b-c; // round O2Vertex x value
CGFloat right px is self. awe _ width 0.5+ b + c; // round O3Vertex x value
CGFloat startAngle1 ═ 1.5 × M _ PI; // arc S2Starting angle
CGFloat endAngle1 ═ startAngle1+ ang 1; // arc S2End angle
CGFloat startAngle2 ═ 0.5 × M _ PI + ang 1; // arc S1Starting angle
CGFloat end angle2 ═ 0.5 × M _ PI-ang 1; // arc S1End angle
CGFloat startAngle3 ═ 1.5 × M _ PI-ang 1; // arc S3Starting angle
CGFloat end angle3 ═ 1.5 × M _ PI; // arc S3The starting angle.
In the specific design, the first radius R of the first auxiliary circle display area can be dynamically adjusted1A second radius R of the second auxiliary circle display area2And a first distance d1To meet the user's requirements for an arc-shaped edge line, or to adapt to the specific size of the display interface of the electronic device. In a specific example, the first radius R is for a commonly used 375 screen1Can be in the range of [30, 40 ]]For example 36; second radius R2Can be in the range of [20, 40 ]]Such as 24 or 36; the first distance may have a value in the range of [10, 20 ]]For example 10 or 12. The design schemes of other size screens can be scaled correspondingly without limitation.
The method for generating the display interface provided by the embodiment of the disclosure provides the smooth arc-shaped sideline of the display bar matched with the button, and improves the overall aesthetic effect and the diversity of the display scheme of the sideline of the display bar.
Corresponding to the above method embodiment, referring to fig. 6, the present disclosure also provides an apparatus 60 for generating a display interface, including:
the determining module 601 is configured to determine a display bar to be generated and a button located in the middle of the display bar;
a first generating module 602, configured to generate a first auxiliary circle display area with the button as a reference, where a center of the first auxiliary circle display area coincides with a center of the button, and a first radius of the first auxiliary circle display area is larger than a radius of the button;
a second generating module 603, configured to generate a second auxiliary circle display area with the first auxiliary circle display area as a reference, where the second auxiliary circle display area is located on one side of the first auxiliary circle display area, and the second auxiliary circle display area is circumscribed with the first auxiliary circle display area;
a third generating module 604, configured to generate an arc-shaped edge according to the first auxiliary circle display area and the second auxiliary circle display area, where the arc-shaped edge includes a first arc segment located right below the first auxiliary circle display area and first arc segments located right below the first auxiliary circle display area respectively
A second arc segment and a third arc segment at two ends of the first arc segment, wherein an arc gap which is concave to the button is formed between the first arc segment and the first auxiliary circle display area;
an extending module 605, configured to extend two ends of the arc-shaped sideline along the edge of the display bar, so as to obtain the sideline of the display bar.
The apparatus shown in fig. 6 may correspondingly execute the content in the above method embodiment, and details of the part not described in detail in this embodiment refer to the content described in the above method embodiment, which is not described again here.
Referring to fig. 7, an embodiment of the present disclosure also provides an electronic device 70, including:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of generating a display interface of the above method embodiments.
The disclosed embodiments also provide a non-transitory computer-readable storage medium storing computer instructions for causing the computer to execute the method of generating a display interface in the aforementioned method embodiments.
The disclosed embodiments also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the method of generating a display interface in the aforementioned method embodiments.
Referring now to FIG. 7, a schematic diagram of an electronic device 70 suitable for use in implementing embodiments of the present disclosure is shown. The electronic devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., car navigation terminals), and the like, and fixed terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 7 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.
As shown in fig. 7, the electronic device 70 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 701 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)702 or a program loaded from a storage means 708 into a Random Access Memory (RAM) 703. In the RAM 703, various programs and data necessary for the operation of the electronic apparatus 70 are also stored. The processing device 701, the ROM 702, and the RAM 703 are connected to each other by a bus 704. An input/output (I/O) interface 705 is also connected to bus 704.
Generally, the following devices may be connected to the I/O interface 705: input devices 706 including, for example, a touch screen, touch pad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, or the like; an output device 707 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 708 including, for example, magnetic tape, hard disk, etc.; and a communication device 709. The communication means 709 may allow the electronic device 70 to communicate wirelessly or by wire with other devices to exchange data. While the figures illustrate an electronic device 70 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such embodiments, the computer program may be downloaded and installed from a network via the communication means 709, or may be installed from the storage means 708, or may be installed from the ROM 702. The computer program, when executed by the processing device 701, performs the above-described functions defined in the methods of the embodiments of the present disclosure.
It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device.
The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: acquiring at least two internet protocol addresses; sending a node evaluation request comprising the at least two internet protocol addresses to node evaluation equipment, wherein the node evaluation equipment selects the internet protocol addresses from the at least two internet protocol addresses and returns the internet protocol addresses; receiving an internet protocol address returned by the node evaluation equipment; wherein the obtained internet protocol address indicates an edge node in the content distribution network.
Alternatively, the computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: receiving a node evaluation request comprising at least two internet protocol addresses; selecting an internet protocol address from the at least two internet protocol addresses; returning the selected internet protocol address; wherein the received internet protocol address indicates an edge node in the content distribution network.
Computer program code for carrying out operations for aspects of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present disclosure may be implemented by software or hardware. Where the name of a unit does not in some cases constitute a limitation of the unit itself, for example, the first retrieving unit may also be described as a "unit for retrieving at least two internet protocol addresses".
It should be understood that portions of the present disclosure may be implemented in hardware, software, firmware, or a combination thereof.
The above description is only for the specific embodiments of the present disclosure, but the scope of the present disclosure is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present disclosure should be covered within the scope of the present disclosure. Therefore, the protection scope of the present disclosure shall be subject to the protection scope of the claims.

Claims (10)

1. A method of generating a display interface, comprising:
determining a display bar to be generated and a button positioned in the middle of the display bar in a display interface to be generated;
generating a first auxiliary circle display area by taking the button as a reference, wherein the center of the first auxiliary circle display area is superposed with the center of the button, and the first radius of the first auxiliary circle display area is larger than the radius of the button;
generating a second auxiliary circle display area by taking the first auxiliary circle display area as a reference, wherein the second auxiliary circle display area is positioned on one side of the first auxiliary circle display area and is circumscribed with the first auxiliary circle display area;
generating an arc-shaped sideline according to the first auxiliary circle display area and the second auxiliary circle display area, wherein the arc-shaped sideline comprises a first arc line segment positioned right below the first auxiliary circle display area, and a second arc line segment and a third arc line segment which are respectively positioned at two ends of the first arc line segment, an arc-shaped gap which is concave to the button is formed between the first arc line segment and the button, and an arc-shaped gap which is back to the button is formed between the second arc line segment and the button;
and extending the two ends of the arc-shaped sideline along the edge of the display bar to obtain the sideline of the display bar.
2. The method of claim 1, wherein the step of generating an arc-shaped edge according to the first auxiliary circle display area and the second auxiliary circle display area comprises:
determining a first included angle between a circle center connecting line of the first auxiliary circle display area and the second auxiliary circle display area and a reference center line, wherein the reference center line is a vertical perpendicular line passing through the center of the button;
generating the first arc line segment according to the first included angle and the first radius of the first auxiliary circle display area;
and generating the second arc line segment and the third arc line segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar.
3. The method according to claim 2, wherein after the step of generating the first auxiliary circle display area with reference to the button, the method further comprises:
generating a third auxiliary circle by taking the first auxiliary circle display area as a reference, wherein the third auxiliary circle and the second auxiliary circle display area are respectively and symmetrically arranged at two sides of the first auxiliary circle display area, and the third auxiliary circle is circumscribed with the first auxiliary circle display area;
the step of generating the second arc segment and the third arc segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar includes:
and generating the second arc line segment according to the first included angle, the second radius of the display area of the second auxiliary circle and the transverse width of the display bar, and generating the third arc line segment according to the first included angle, the third radius of the third auxiliary circle and the transverse width of the display bar.
4. The method of claim 2, wherein the step of generating the second arc segment and the third arc segment according to the first included angle, the radius of the second auxiliary circle display area, and the lateral width of the display bar comprises:
generating a second arc line segment according to the first included angle, the second radius of the second auxiliary circle display area and the transverse width of the display bar;
and generating a mirror image structure of the second arc segment as the third arc segment by taking the reference center line as a reference.
5. The method according to any one of claims 2 to 4, wherein the step of determining a first angle between a center-to-center line of the first auxiliary circle display area and the second auxiliary circle display area and a reference center line comprises:
determining a first distance from the center of the first auxiliary circle display area to a horizontal line where the first tangent point is located, wherein the first tangent point is the tangent point of the first auxiliary circle display area and the second auxiliary circle display area;
calculating a cosine value of the first included angle according to the first distance and the first radius of the first auxiliary circle display area;
and calculating the angle value of the first included angle according to the cosine value of the first included angle.
6. The method of claim 5, wherein the step of generating the first arc segment according to the first included angle and the first radius of the first auxiliary circle display area comprises:
determining a starting and stopping angle of the first arc line segment according to the first angle by taking the reference middle line as a reference;
and generating the first arc line segment according to the first radius of the first auxiliary circle display area and the starting and stopping angle of the first arc line segment.
7. The method of claim 6, wherein the step of generating the second arc segment according to the first included angle, the second radius of the second auxiliary circle display area, and the lateral width of the display bar comprises:
determining the starting angle of the second arc line segment according to the second radius of the second auxiliary circle display area and the transverse width of the display bar;
adding the first angle to the starting angle of the second arc segment to obtain the ending angle of the second arc segment;
and generating the second arc line segment according to the radius of the second auxiliary circle display area, and the starting angle and the ending angle of the second arc line segment.
8. An apparatus for generating a display interface, comprising:
the device comprises a determining module, a display module and a display module, wherein the determining module is used for determining a display bar to be generated and a button positioned in the middle of the display bar;
the first generating module is used for generating a first auxiliary circle display area by taking the button as a reference, wherein the circle center of the first auxiliary circle display area is superposed with the center of the button, and the first radius of the first auxiliary circle display area is larger than the radius of the button;
a second generating module, configured to generate a second auxiliary circle display area with the first auxiliary circle display area as a reference, where the second auxiliary circle display area is located on one side of the first auxiliary circle display area, and the second auxiliary circle display area is circumscribed with the first auxiliary circle display area;
a third generating module, configured to generate an arc-shaped edge according to the first auxiliary circle display area and the second auxiliary circle display area, where the arc-shaped edge includes a first arc segment located right below the first auxiliary circle display area, and a second arc segment and a third arc segment located at two ends of the first arc segment, respectively, an arc-shaped gap that is concave toward the button exists between the first arc segment and the button, and an arc-shaped gap that is opposite to the button exists between the second arc segment and the button and between the third arc segment and the button;
and the extension module is used for extending the two ends of the arc-shaped sideline along the edge of the display column to obtain the sideline of the display column.
9. An electronic device, characterized in that the electronic device comprises:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of generating a display interface of any one of the preceding claims 1-7.
10. A non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of generating a display interface of any one of the preceding claims 1-7.
CN202010108796.8A 2020-02-21 2020-02-21 Method and device for generating display interface and electronic equipment Pending CN111338730A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010108796.8A CN111338730A (en) 2020-02-21 2020-02-21 Method and device for generating display interface and electronic equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010108796.8A CN111338730A (en) 2020-02-21 2020-02-21 Method and device for generating display interface and electronic equipment

Publications (1)

Publication Number Publication Date
CN111338730A true CN111338730A (en) 2020-06-26

Family

ID=71183537

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010108796.8A Pending CN111338730A (en) 2020-02-21 2020-02-21 Method and device for generating display interface and electronic equipment

Country Status (1)

Country Link
CN (1) CN111338730A (en)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150253955A1 (en) * 2012-11-22 2015-09-10 Kyocera Corporation Electronic device, control method, and control program
CN104981765A (en) * 2013-03-12 2015-10-14 鹰图公司 User interface for toolbar navigation
CN107544810A (en) * 2017-09-07 2018-01-05 北京小米移动软件有限公司 The method and apparatus for controlling application program
CN108920204A (en) * 2018-05-30 2018-11-30 维沃移动通信有限公司 A kind of interface display method and terminal device
CN109062472A (en) * 2018-07-16 2018-12-21 维沃移动通信有限公司 A kind of display control method and mobile terminal of status bar
CN110531920A (en) * 2019-08-29 2019-12-03 Oppo广东移动通信有限公司 Display methods, device, terminal and the storage medium of side toolbar

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150253955A1 (en) * 2012-11-22 2015-09-10 Kyocera Corporation Electronic device, control method, and control program
CN104981765A (en) * 2013-03-12 2015-10-14 鹰图公司 User interface for toolbar navigation
CN107544810A (en) * 2017-09-07 2018-01-05 北京小米移动软件有限公司 The method and apparatus for controlling application program
CN108920204A (en) * 2018-05-30 2018-11-30 维沃移动通信有限公司 A kind of interface display method and terminal device
CN109062472A (en) * 2018-07-16 2018-12-21 维沃移动通信有限公司 A kind of display control method and mobile terminal of status bar
CN110531920A (en) * 2019-08-29 2019-12-03 Oppo广东移动通信有限公司 Display methods, device, terminal and the storage medium of side toolbar

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
波希米亚: ""智能手机APP应用指导——网络影音之酷狗音乐"", 《HTTPS://MP.WEIXIN.QQ.COM/S/7NL99YITS1M2OZYUMMJB1W》 *

Similar Documents

Publication Publication Date Title
CN107273083B (en) Interaction method, device, equipment and storage medium between terminal equipment
CN111291244B (en) House source information display method, device, terminal and storage medium
CN110188299B (en) Response type page processing method and device and electronic equipment
CN110795196A (en) Window display method, device, terminal and storage medium
CN111325668B (en) Training method and device for image processing deep learning model and electronic equipment
CN111383329B (en) Three-dimensional image display method and device based on browser and electronic equipment
CN110022493B (en) Playing progress display method and device, electronic equipment and storage medium
CN110908752A (en) Control setting method and device, electronic equipment and interaction system
CN110333843B (en) Method and device for realizing high-precision timer of virtual machine and electronic equipment
CN111176707A (en) Templated automatic operation and maintenance method and device and electronic equipment
CN112492399B (en) Information display method and device and electronic equipment
CN111338730A (en) Method and device for generating display interface and electronic equipment
CN111753685A (en) Method and device for adjusting human face hairline in image and electronic equipment
CN111125759A (en) Database login account shielding method and device and electronic equipment
CN113253874B (en) Control method and device of display device, terminal and storage medium
CN113506356B (en) Method and device for drawing area map, readable medium and electronic equipment
CN110969233A (en) Two-dimensional code generation method and device and hardware device
CN111200705B (en) Image processing method and device
CN112416189A (en) Cross-page focus searching method and device and electronic equipment
CN111738415A (en) Model synchronous updating method and device and electronic equipment
CN110609728A (en) Page generation method and device and electronic equipment
CN111626045A (en) Character length calculation method and device and electronic equipment
CN112987934B (en) Portrait identification interaction method and device and electronic equipment
CN111753230B (en) Reference line processing method and device
CN111586261B (en) Target video processing method and device and electronic equipment

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination