CN111813479A - A method and system for constructing a scroll wheel object - Google Patents

Abstract

The invention discloses a method and a system for constructing a roller object, wherein the method comprises the following steps: acquiring operation information of an adjusting roller control, wherein the roller control at least comprises: the roller element comprises a current value attribute; updating the value of the current value attribute of the roller element according to the operation information, wherein the current value attribute is used for defining the current selection item of the roller object; determining user visible items according to the currently selected items, wherein the user visible items comprise forward adjacent items and backward adjacent items of the currently selected items; and constructing a target roller object according to the roller control and the user visible item. According to the technical scheme provided by the invention, the roller control is formed by the newly added roller elements and the current value attributes of the roller elements, and the current options and selectable items of the roller object can be determined by the current value attributes, so that a large number of div elements are avoided, and the memory occupation of the page is reduced.

Description

A method and system for constructing a scroll wheel object

technical field

The invention relates to the technical field of computer information processing, in particular to a method and system for constructing a scroll wheel object.

Background technique

At present, Hypertext Marked Language (HTML) pages are mainly used for document content with mixed text and images, and Cascading Style Sheets (CSS) related specifications for layout, layout and rendering of web pages, among which, It is mainly based on rectangular areas, such as attributes (width and height) used to control its width and height, and attributes used to control the layout of HTML elements. With the development of HTML5 and CSS3 technologies, many applications (Apps) running on PCs and smartphones have begun to use Web technology to present content for users and serve as a human-computer interaction interface. However, CSS style sheets based on rectangular blocks , When implementing the scroll wheel control through an HTML page, each option in the scroll wheel control needs to be wrapped by a div element, and each div element corresponds to multiple CSS properties, which increases the overhead of system memory and has low execution efficiency. Takes up a lot of memory.

SUMMARY OF THE INVENTION

In view of this, the embodiments of the present invention provide a method and system for constructing a scroll wheel object, so as to solve the technical problems that the prior art cannot provide effective support for the scroll wheel control, the execution efficiency is low, and the memory is occupied.

To achieve the above object, the present invention provides the following technical solutions:

A first aspect of the present invention provides a method for constructing a scroll wheel object, including: acquiring operation information for adjusting a scroll wheel control, the scroll wheel control at least including: a scroll wheel element, the scroll wheel element including a current value attribute; updating the current value attribute of the scroll wheel element according to the operation information. Value, the current value attribute is used to define the currently selected item of the scroll wheel object; the user-visible item is determined according to the currently selected item, and the user-visible item includes the forward and backward adjacent items of the currently selected item; according to the scroll wheel control and user-visible items item, constructs the target wheel object.

Optionally, in the method for building a scroll wheel object provided by the present invention, the scroll wheel element further includes an option type attribute and a step size attribute. If the option type attribute is an integer type, determining the user-visible item according to the currently selected item includes: according to The difference between the currently selected item and the value of the step attribute determines the forward neighbor; the backward neighbor is determined according to the sum of the currently selected item and the value of the step attribute.

Optionally, in the method for constructing a wheel object provided by the present invention, the wheel control further includes a plurality of optional elements, the plurality of optional elements are arranged in sequence, and the optional elements include optional value attributes, and the optional value attributes are used for Defines the value of the optional items in the wheel control. The wheel element also includes the optional item type attribute. If the optional item type attribute is text type, the user-visible item is determined according to the currently selected item, including: before the optional element corresponding to the currently selected item The value of the optional value attribute of the optional element of is determined as the forward neighbor; the value of the optional value attribute of the optional element after the optional element corresponding to the currently selected item is determined as the backward neighbor.

Optionally, in the method for constructing a scroll wheel object provided by the present invention, constructing a target scroll wheel object according to scroll wheel controls and user-visible items includes: identifying and parsing each element and attribute in the scroll wheel controls to obtain corresponding parsing controls. value; obtain the member variables of the preset rendering node; configure the value of each parsing control into each member variable through the preset configuration function to obtain the current member variable; according to each member variable and the preset drawing function, the currently selected item and the user Visible items are laid out and rendered to get the target wheel object.

Optionally, in the method for constructing a scroll wheel object provided by the present invention, the scroll wheel control further includes: CSS properties for defining the display characteristics of the currently selected item and the user-visible item, and constructing the target scroll wheel object according to the scroll wheel control and the user-visible item. , including: identifying and parsing each element and attribute in the scroll wheel control to obtain the corresponding parsing control value; identifying and parsing CSS properties to obtain the drawing parsing value; obtaining the member variables of the preset rendering node; function, configure each analytical control value and drawing analytical value into each member variable, and get the current member variable; according to each current member variable and the preset drawing function, layout and render the currently selected item and user-visible item, and get the target wheel object.

Optionally, in the method for building a scroll wheel object provided by the present invention, identifying and parsing each element and attribute in the scroll wheel control to obtain a corresponding analytical value, including: changing the element name of each element to the attribute name of each attribute Save to the corresponding file; generate the corresponding hash value for the element and attribute according to the element name and attribute name; obtain the member function corresponding to the wheel element according to the hash value of the wheel element; parse the attribute of the wheel element according to the member function, Get the corresponding parsed control value.

Optionally, in the method for constructing a scroll wheel object provided by the present invention, the scroll wheel control further includes: an event attribute, and the event attribute is used to define the logical change of the current scroll wheel and the adjacent scroll wheel; the method for constructing the scroll wheel object also includes: according to the current value The value of the property and the event property determine the value range of the options of the wheel control corresponding to the event property.

A second aspect of the present invention provides a system for constructing a scroll wheel object, including: an operation information acquisition module for acquiring operation information for adjusting a scroll wheel control, the scroll wheel control at least includes: a scroll wheel element, and the scroll wheel element includes a current value attribute; the current value attribute The update module is used to update the value of the current value attribute of the scroll wheel element according to the operation information. The current value attribute is used to define the currently selected item of the scroll wheel object; the user-visible item determination module is used to determine the user-visible item according to the currently selected item. The item includes the forward and backward neighbors of the currently selected item; the target wheel object building module is used to construct the target wheel object according to the wheel control and user-visible items.

A third aspect of the present invention provides a computer-readable storage medium, where the computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, implements the method for constructing a scroll wheel object provided in the first aspect of the present invention.

A fourth aspect of the present invention provides an electronic device, comprising: a memory and a processor, the memory and the processor are connected in communication with each other, and computer instructions are stored in the memory, and the processor executes the computer instructions by executing the computer instructions to execute the first step of the present invention. The method provided by the aspect to construct the wheel object.

The technical solution of the invention has the following advantages:

In the method for constructing a wheel object provided by the present invention, the wheel control is formed by the wheel element and the current value attribute of the wheel element. The selected item determines the user-visible item, and finally builds the target scroll wheel object based on the scroll wheel control and the user-visible item. In the method for constructing a scroll wheel object provided by the embodiment of the present invention, a scroll wheel control is formed by the newly added scroll wheel element and the current value attribute of the scroll wheel element. In order to use a large number of div elements, thereby reducing the memory footprint of the page.

Description of drawings

In order to illustrate the specific embodiments of the present invention or the technical solutions in the prior art more clearly, the following briefly introduces the accompanying drawings that need to be used in the description of the specific embodiments or the prior art. Obviously, the accompanying drawings in the following description The drawings are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can also be obtained based on these drawings without creative efforts.

1 is a flowchart of a specific example of a method for constructing a scroll wheel object provided by an embodiment of the present invention;

2 is a schematic diagram of a scroll wheel object in the implementation of the present invention;

3-6 are flowcharts of specific examples of the method for constructing a scroll wheel object provided by an embodiment of the present invention;

7 is a schematic diagram of a scroll wheel object in the implementation of the present invention;

8 is a flowchart of a specific example of a method for constructing a scroll wheel object provided by an embodiment of the present invention;

9 is a schematic diagram of a system for constructing a scroll wheel object provided by an embodiment of the present invention;

FIG. 10 is a schematic block diagram of a specific example of an electronic device provided by an embodiment of the present invention.

Detailed ways

The technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are a part of the embodiments of the present invention, but not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

In the description of the present invention, it should be noted that the technical features involved in the different embodiments of the present invention described below can be combined with each other as long as there is no conflict with each other.

Example 1

An embodiment of the present invention provides a method for constructing a wheel object, as shown in FIG. 1 , the method includes the following steps:

Step S10: Obtaining operation information for adjusting the wheel control, the wheel control at least includes: a wheel element, and the wheel element includes a current value attribute. The wheel element is used to define the rotating wheel. The operation information of the wheel control is the information input by the user to the device where the wheel control is located for operating the wheel, and the operation information is input by the user through operations such as mouse movement, mouse wheel rotation, and touch.

In a specific embodiment, in order to realize the scroll wheel used for displaying the date as shown in FIG. 2 , the scroll wheel control provided by the embodiment of the present invention is as follows:

In the above process, three wheel controls are defined, namely: a wheel control named "year", a wheel control named "month", and a wheel control named "day", where "hipicker" represents the wheel element, "value" represents the current value attribute of the scroll wheel element. The above three wheel controls are only wrapped by a div element, and no redundant div elements are used.

Step S20: Update the value of the current value attribute of the wheel element according to the operation information. The current value attribute is used to define the currently selected item of the wheel object. Taking the wheel control whose name attribute (name) is "year" as an example, the value of the wheel control is The current value property is "2019", then in the target wheel object constructed by the wheel control, the currently selected item is 2019.

Step S30: Determine the user-visible item according to the currently selected item, the user-visible item includes the forward adjacent item and the backward adjacent item of the currently selected item, and the current optional item includes n forward adjacent items of the currently selected item and the currently selected item. The m backward adjacent items of the item, n and m are integers greater than or equal to 1. In the scroll wheel object shown in Figure 2, in addition to the currently selected item, it also displays 2 forwards of the currently selected item. The adjacent items and the 2 backward selected items of the currently selected item, therefore, in this embodiment, both n and m are 2.

Step S40: Construct a target wheel object according to the wheel control and the user-visible items. In the embodiment of the present invention, the construction of the target scroll wheel object specifically includes identifying and parsing each element and element attribute in the scroll wheel control, and then laying out and rendering the currently selected item and the user-visible item according to the identification and parsing results, to obtain The target wheel object.

In the method for constructing a wheel object provided by the present invention, the wheel control is formed by the wheel element and the current value attribute of the wheel element. The selected item determines the user-visible item, and finally builds the target scroll wheel object based on the scroll wheel control and the user-visible item. In the method for constructing a scroll wheel object provided by the embodiment of the present invention, a scroll wheel control is formed by the newly added scroll wheel element and the current value attribute of the scroll wheel element. In order to use a large number of div elements, thereby reducing the memory footprint of the page.

In an optional embodiment, in the method for constructing a scroll wheel object provided by the embodiment of the present invention, the scroll wheel element further includes an optional item type attribute and a step size attribute, and the type attribute is used to represent the currently selected item and the user-visible item in the scroll wheel control. The value type of , the step size attribute is used to indicate the step value between the currently selected item and the forward adjacent item and the backward adjacent item. Taking the scroll wheel element whose name attribute is "day" as an example, in the present invention In the embodiment, the type attribute is represented by "type", and the step attribute is represented by "step". If the optional type attribute is the integer type "integer", as shown in FIG. 3, the above step S30 specifically includes:

Step S31: Determine the forward adjacent item according to the difference between the currently selected item and the value of the step attribute. Taking the wheel element whose name attribute is “day” as an example, the value of the step attribute is 1, then the first one moves forward. The adjacent item is the currently selected item 1 minus the step value 1, and the second forward adjacent item is the currently selected item 1 minus 2. However, in this embodiment of the present invention, the minimum value attribute "min" defines The minimum value of the optional item is 1, and the maximum value of the optional item is defined by the maximum value attribute "max" as 31, so 0 and -1 cannot be displayed in the target wheel object, and because the wheel attribute includes the boolean attribute "endtoend" ", the end-to-end circular rotation is defined by the Boolean property, so the two forward neighbors of the currently selected item are 31 and 30, respectively.

Step S32: Determine the backward adjacent item according to the sum of the value of the currently selected item and the step size attribute. In this embodiment of the present invention, the first backward adjacent item is the currently selected item 1 plus the step value 1, and the value is is 2, the second backward adjacent item is the currently selected item 1 plus 2, and the value is 3.

In a specific embodiment, if the scroll wheel element contains a Boolean attribute, it means that the scroll wheel rotates cyclically end to end; if the scroll wheel element does not contain a Boolean attribute, it means that the scroll wheel is not connected at the end and does not rotate cyclically. When the number of options is greater than the preset threshold, a Boolean attribute is added to the scroll wheel element. In a specific embodiment, the preset threshold can be set to 10, that is, when the number of options is greater than 10, the end of the scroll wheel is controlled by the Boolean attribute Continuous cyclic rotation, when the number of options is less than or equal to 10, there is no need for cyclic rotation.

In the embodiment of the present invention, a type attribute is introduced into the wheel element, and when the type attribute is an integer type, there is no need to define the optional items of the wheel one by one. The input value determines the user-visible items, avoids building a large number of sub-elements for regular integer options, reduces the complexity of defining integer options, simplifies the interface, and saves memory usage.

In an optional embodiment, the wheel control further includes a plurality of optional elements. Taking the wheel defined by the wheel element whose name attribute is "year" in the above example as an example, the optional element is represented by "hiitem". The elements are arranged in order. The optional element includes the optional value attribute "value". The optional value attribute is used to define the value of the optional items in the scroll wheel control. The value of the current value attribute in the scroll wheel element is the optional value of one of the optional elements. The value of the value attribute, the wheel element also includes an optional item type attribute. If the optional item type attribute is a text type, as shown in FIG. 4 , the above step S30 specifically includes:

Step S33: Determine the value of the optional value attribute of the optional element before the optional element corresponding to the currently selected item as the forward adjacent item. In this embodiment of the present invention, the optional item corresponding to the currently selected item is The element is an optional element with an optional value attribute of 2019, so the forward neighbors are 2018 and 2017.

Step S34: Determine the value of the optional value attribute of the optional element after the optional element corresponding to the currently selected item as the backward adjacent item. In this embodiment of the present invention, the optional value attribute is the optional item of 2019 There is no definition of an optional element after the element, and no boolean property is defined in the wheel element, so the backward neighbors are not displayed in the target wheel object.

In an optional embodiment, in the method for constructing a scroll wheel object provided by the embodiment of the present invention, the scroll wheel element in the scroll wheel control further includes a name attribute "name", which is used to represent the name of the scroll wheel control. It is convenient to use the name attribute of the scroll wheel element. Integrate scroll wheel controls into forms.

In an optional embodiment, in the method for constructing a scroll wheel object provided by the embodiment of the present invention, the scroll wheel element in the scroll wheel control further includes a width attribute "width" and a height attribute "height" attribute, and the width attribute and height attribute are used to represent The intrinsic size of the scroll wheel element, used to define the size of the rendering canvas used by the scroll wheel element. When the HTML document does not define these two attributes, the user agent uses 200 and 150 as the default values, respectively.

In an optional embodiment, in the method for constructing a scroll wheel object provided by the embodiment of the present invention, the scroll wheel element in the scroll wheel control further includes a sound attribute "sound", which is used to define the sound file when the scroll wheel rotates. No sound when spinning.

In an optional embodiment, in the method for constructing a scroll wheel object provided by the embodiment of the present invention, the optional element in the scroll wheel control further includes a forbidden item attribute. If there is a prohibited item attribute defined in the optional element, it means that the optional item is prohibited, and the value defined by the optional value attribute of the optional item cannot be used as the currently selected item.

In an optional embodiment, in the method for constructing a scroll wheel object provided by the embodiment of the present invention, the scroll wheel element in the scroll wheel control further includes an event attribute, and the event attribute is used to define the logical change of the current scroll wheel and the adjacent scroll wheel, and construct the scroll wheel object. The method also includes:

According to the value of the current value attribute and the event attribute, the value range of the optional items of the wheel control corresponding to the event attribute is determined.

In a specific embodiment, the change of the currently selected item of the wheel control can be monitored through the event attribute onchange. When the currently selected item in the wheel control changes, the user agent triggers this event, and the script listens to this event to complete the dynamic adjustment. works, thereby changing the selectable items in the adjacent wheel controls, for example:

The above process can adjust the optional date range in the adjacent scroll wheel controls according to the current month (small and large month, leap month, flat month, etc.).

The event attribute onchange in the above process indicates that the event is triggered when the currently selected item changes. The event attribute onpickstart can also be used to indicate that the event is triggered when the wheel selection starts (starts to rotate), and the event attribute onpickend can also be used to indicate that the wheel selection ends (stops). Rotation) triggers an event.

In an optional embodiment, as shown in FIG. 5 , the foregoing step S40 specifically includes:

Step S41: Identify and parse each element and attribute in the scroll wheel control to obtain the corresponding parsed control value. Because the scroll wheel element in the embodiment of the present invention is a custom element, identification and parsing should be implemented in the user agent. In the embodiment of the present invention, if there is only a scroll wheel element in the scroll wheel control, only the scroll wheel element and the attributes of the scroll wheel element are identified and analyzed. If the scroll wheel element also includes optional element elements, the optional element and the optional element element are also required to be identified and analyzed. Attributes are identified and resolved.

Step S42: Obtain the member variables of the preset rendering node.

Step S43: Configure each analytical control value into each member variable by using a preset configuration function to obtain the current member variable. In the embodiment of the present invention, after obtaining the member variables of the preset rendering node, according to the preset function, the value of each parsing control is configured into each member variable, and the current member variable is obtained. It should be noted that the preset function in the present invention is It is determined by the value of each analytical control, and the present invention is not limited to this.

Step S44: Layout and render the currently selected item and the user-visible item according to each member variable and the preset drawing function to obtain the target scroll wheel object. In this embodiment of the present invention, the currently selected items and user-visible items are laid out and rendered according to each current member variable and a preset corresponding function, wherein according to the different attribute value types and clear meanings, according to the current member variables , in the preset corresponding function to complete the construction of the target wheel object.

In an optional embodiment, as shown in FIG. 6 , step S41 specifically includes:

Step S411: Save the element name of each element and the attribute name of each attribute to the corresponding file. In the embodiment of the present invention, add the scroll wheel element and each attribute name of the scroll wheel element to the HTMLAttributeNames.in file, and add the optional element and the attribute name to the HTMLAttributeNames.in file. Each attribute name of the optional element is added to the HTMLTagNames.in file.

Step S412 : respectively generating corresponding hash values for the elements and attributes according to the element names and attribute names. In a specific embodiment, each element and attribute is given a unique and fixed ID according to the hash value of each element and attribute.

In a specific embodiment, two new classes are created for the wheel element and the optional element, respectively HVMLHiPickerElement and HVMLHiItemElement, wherein the HVMLHiItemElement class inherits from the HTMLElement class, and the HVMLHiPickerElement inherits from the HTMLFormControlElementWithState class. Among them, the HTMLElement class is the base class of the page, and all the elements of the page need to directly acquire and indirectly inherit this class, and the HTMLFormControlElementWithState class is the base class of the form, and all form elements directly or indirectly inherit this class.

Step S413: Obtain a member function corresponding to the wheel element according to the hash value of the wheel element.

Step S414: Parse the attributes of the scroll wheel element according to the member function to obtain the corresponding parsing control value. In the embodiment of the present invention, the member function for parsing the scroll wheel element is parseAttribute.

In a specific embodiment, in the method for building a wheel object provided by the embodiment of the present invention, when the wheel element is identified and parsed, the appendFormData member function is also implemented in the HVMLHiPickerElement class. When the information is sent to the server, this function is used to add the data of the wheel control to the request when sending the information to the server.

In an optional embodiment, in order to make the constructed target scroll wheel object have a better visual effect, in the method for constructing a scroll wheel object provided by the present invention, the scroll wheel control further includes: CSS properties for defining the currently selected item and the user-visible item. display characteristics.

In an optional embodiment, in order to define the display feature of the target scroll wheel object, a CSS pseudo-element may be defined first, and then a CSS property may be defined in the CSS pseudo-element, and the display feature may be defined by the CSS property. For example, the CSS pseudo-element "::-hi-picker-selected" can be defined in the scroll wheel element, and then the size, border, font and text color of the currently selected item can be defined through the CSS properties defined in the CSS pseudo-element; The CSS pseudo-element "::-hi-picker-selected-before" is defined in the scroll wheel element. The CSS properties defined in the CSS pseudo-element define the text content and properties added before the currently selected item. The currently selected item includes the current value and the appended Text, the value defined by the optional value attribute in the optional element contains the current value, the appended text is the content after the current value and/or the content before the current value, the content and attribute of the appended text before the current value can be passed ":: -hi-picker-selected-before" definition; the CSS pseudo-element "::-hi-picker-selected-after" can be defined in the scroll wheel element, and the CSS attribute defined in the CSS pseudo-element defines the current selected item to be appended Text content and attributes; CSS pseudo-element "::-hi-picker-items" can be defined in the scroll wheel element, and the color, font, and mask gradient transition effect of user-visible items can be defined through the CSS attributes defined in the CSS pseudo-element. etc. (using the standard mask property).

In a specific embodiment, in order to realize the "hour" wheel object in Figure 7, the CSS properties of the CSS pseudo-element can be defined as follows:

In the above process, three CSS pseudo-elements are defined: "picker::-hi-picker-items", "hipicker.hour::-hi-picker-selected", "hipicker.hour::-hi-picker- selected-after", the font-size attribute in the CSS pseudo-element "picker::-hi-picker-items" defines the font size of user-visible items as 12px, the color attribute defines the font color of user-visible items as dark gray, mask The attribute defines that the gradient transition effect of the mask of the user-visible item is a linear gradient; the color attribute in the CSS pseudo-element "hipicker.hour::-hi-picker-selected" defines the font color of the currently selected item as black, font-size The attribute defines the font size of the currently selected item as 14px, the border-style attribute defines the border shape of the currently selected item as left and right without borders, and the top and bottom single lines, the border-width attribute defines the border width of the currently selected item as 1px, and the border-color attribute defines the current The border color of the selected item is gray; the content attribute in the CSS pseudo-element "hipicker.hour::-hi-picker-selected-after" defines the currently selected item, and the additional display content after the current value is "hour".

In an optional embodiment, among the rollers shown in FIG. 7 , the three rows of rollers have different inclination angles: the middle roller is vertical, the left roller is inclined to the right, and the right roller is inclined to the left. Therefore, the present In the embodiment of the invention, the "-hi-picker-rotate-y:" attribute needs to be introduced to control the overall inclination of the wheel. The initial value of the horizontal inclination (rotation around the y-axis) of the entire wheel is 0 degrees (0deg). The user's operation experience, in the embodiment of the present invention, the "-hi-picker-damping-factor:" attribute is used to control the damping coefficient of the rotating scroll wheel when it is in a static state. This attribute is used to simulate the physical characteristics of the rotating scroll wheel: Rotation damping coefficient, a floating point number, the initial value is 100, which means the default damping coefficient, the user can adjust the value of this property to obtain faster (decrease) or slower (increase) rotation effect:

In the above process, three CSS pseudo-elements are defined: "hipicker.hour", "hipicker.minute", "hipicker.second", and the "hour" wheel, "minute" wheel, The characteristics of the "second" wheel, the display attribute defines the layout level of the element, the width attribute defines the width of the scroll wheel, the height attribute defines the height of the scroll wheel, the -hi-picker-rotate-y attribute defines the inclination angle of the scroll wheel along the y-axis, and the -hi- The picker-damping-factor defines the rotation speed of the wheel, and the y-axis is the vertical axis perpendicular to the horizontal axis.

In the embodiment of the present invention, after introducing new CSS pseudo-elements and attributes, the user can define the rendering attributes of different parts of the scroll wheel control through CSS pseudo-elements and attributes. On the one hand, the convenience brought by CSS is fully utilized; More flexibility for front-end developers.

In an optional embodiment, after adding the CSS property, as shown in FIG. 8 , the foregoing step S40 specifically includes:

Step S45 : Identify and parse each element and attribute in the scroll wheel control to obtain a corresponding parsed control value. For a detailed description, see the description in step S41 above. The specific process of step S45 is shown in the above-mentioned steps S411-step S414. Since the CSS property is used to define the display characteristics of the currently selected item and the user-visible item, when identifying and analyzing the scroll wheel element in the scroll wheel control, it also includes, for the scroll wheel. The element creation class, in which the member functions used to monitor the change of the attribute value in the scroll wheel element and complete the association with CSS-related properties (property) are implemented. In the embodiment of the present invention, the class created for the scroll wheel element is HVMLHiPickerElement, the member function is collectStyleForPresentationAttribute.

Step S46: Identifying and parsing the CSS property to obtain a drawing parsing value. In the embodiment of the present invention, the steps of identifying and parsing CSS properties specifically include:

The CSS property name is added to the preset file, and the preset file is set with a format corresponding to the required value type according to the required value type of the CSS property. In the embodiment of the present invention, the preset file is CSSProperties.json document.

Determine the ID of the CSS property according to the hash value of the CSS property;

The parsing code of the CSS property is written according to the value type, meaning, and ID required by the CSS property, and the value type of the CSS property is converted into the required value type according to the parsing code. In the embodiment of the present invention, the parsing code is The writing is done in CSSPropertyParser.cpp.

If the required value type of the CSS property is a shorthand type, each independent property included in the defined CSS property is displayed in the second preset file. In the embodiment of the present invention, the second preset file is StylePropertyShorthandFunctions.cpp.

Step S47: obtaining the member variables of the preset rendering node;

Step S48: configure each parsing control value and drawing parsing value into each member variable through a preset configuration function to obtain the current member variable. In the embodiment of the present invention, each CSS property has a getter() and a setter corresponding to it () function, after parsing the CSS property, set the drawing parsing value to the variable of the member node of the rendering node through the getter() and setter() functions.

Step S49: Layout and render the currently selected item and the user-visible item according to each current member variable and the preset drawing function to obtain the target wheel object.

In an optional embodiment, in the method for constructing a wheel object provided by the embodiment of the present invention, the wheel element processes user interaction events (such as mouse movement, mouse wheel rotation, touch operation, etc.) Physical properties of the wheel spin effect:

First of all, because the dynamic effect of the scroll wheel is continuously rotated around the X axis, and the X axis is the horizontal axis around which the scroll wheel rotates, therefore, in the embodiment of the present invention, the current selected item position is defined by an angle; the initial angle value is represented by 0deg , the angle becomes larger when you rotate up, and the angle becomes smaller when you rotate down;

Secondly, according to the user's interactive operation strength (speed) and the value defined by the CSS property -hi-picker-damping-factor as parameters, determine a target angle value of the wheel rotation generated by the user interaction;

Then, in the one-dimensional space with the rotation angle as the parameter, create a function from a certain angle (such as 0 degrees) to the target angle (such as 720 degrees), which can be defined according to the CSS property -hi-picker-damping-factor The value of , as a parameter, can calculate the time required for the wheel to stop naturally from the rotating state, and can determine the intermediate transition target angle value according to the time it has rotated. Calculate the intermediate transition target angle values at intervals of 1/20 second (50 updates per second), draw the hipicker element, and repeatedly render the scroll wheel under these angle values;

Finally, play the sound defined by the sound property while rotating.

It should be noted that the above events are executed through member functions such as defaultEventHandler, listBoxDefaultEventHandler, and willRespondToMouseClickEvents in the file HVMLHiPickerElement.cpp.

In an optional embodiment, before drawing the target wheel object, the rendering calculation needs to be completed, for example:

User-visible item height determination: Obtain the font size of the selected item according to the font-size value set in the CSS pseudo-element (::-hi-picker-selected), if the font-size is not set, the default font size is used; Get the font size of non-selected items according to the value of font-size set in CSS pseudo-element (::-hi-picker-items), if font-size is not set, the default font size is used; according to the font size of selected items and the font size of unselected items, and the Row space calculates the height of user-visible items.

Determination of the wheel rotation radius: Calculate the height of the user-visible item; calculate the wheel rotation radius according to the height of the user-visible item and the number of options displayed;

The rotation angle of the optional item along the X axis is determined: according to the rotation radius of the wheel and the height of the user-visible item, calculate the range and angle of the optional item in the occupied circle; according to the rotation displacement of the wheel, calculate the rotation angle of the optional item along the X axis.

Determination of the initial speed of inertial sliding of the scroll wheel element: record the position and time of the user's sliding operation pressing and lifting; calculate the speed when lifting according to the sliding time and distance, as the initial speed of inertial sliding;

Determination of the inertial sliding distance of the wheel element: Calculate the initial speed of the inertial sliding of the wheel element; calculate the sliding distance according to the initial speed of the inertial sliding and the animation time;

Scroll wheel element inertial sliding position and speed change: Calculate the initial speed of the scroll wheel element inertial sliding;

Calculate the inertial sliding distance of the wheel element; according to the initial inertial sliding speed, inertial sliding distance and current time, use the Bezier curve algorithm to calculate the current position and speed.

The above calculations are just examples. The construction of the target wheel object requires a lot of calculations based on the wheel control. The wheel control only exposes a simple interface, and a large number of calculations and logic are encapsulated and run.

The method for constructing a wheel object provided by the embodiment of the present invention is implemented by a user agent. Since the user agent is often implemented in C/C++ language, better performance and interactive experience can be obtained. In the method of the wheel object, the newly defined elements and attributes can be easily integrated into the form, which simplifies the workload of front-end developers to develop scripts and reduces the learning difficulty of front-end developers.

Example 2

An embodiment of the present invention provides a system for constructing a wheel object, as shown in FIG. 9 , including:

The operation information acquisition module 10 is used for acquiring operation information for adjusting the scroll wheel control. The scroll wheel control includes at least the scroll wheel element, and the scroll wheel element includes the current value attribute. For a detailed description, see the description of step S10 in Embodiment 1 above.

The current value attribute updating module 20 is used to update the value of the current value attribute of the scroll wheel element according to the operation information, and the current value attribute is used to define the currently selected item of the scroll wheel object.

The user-visible item determining module 30 is configured to determine the user-visible item according to the currently selected item. The user-visible item includes the forward adjacent item and the backward adjacent item of the currently selected item. For a detailed description, see the step S30 in the above-mentioned embodiment 1. describe.

The target scroll wheel object construction module 40 is configured to construct a target scroll wheel object according to the scroll wheel control and the user-visible items. For a detailed description, see the description of step S40 in the above-mentioned Embodiment 1.

The system for constructing a wheel object provided by the present invention constitutes a wheel control by using the wheel element and the current value attribute of the wheel element. After obtaining the operation information for adjusting the wheel control, the currently selected item of the wheel control is updated according to the operation information, and according to the current The selected item determines the user-visible item, and finally builds the target scroll wheel object based on the scroll wheel control and the user-visible item. In the system for constructing a scroll wheel object provided by the embodiment of the present invention, the scroll wheel control is formed by the newly added scroll wheel element and the current value attribute of the scroll wheel element. In order to use a large number of div elements, thereby reducing the memory footprint of the page.

Example 3

An embodiment of the present invention provides an electronic device. As shown in FIG. 10 , the electronic device mainly includes one or more processors 51 and a memory 52 . In FIG. 10 , one processor 51 is used as an example.

The electronic device may further include: an input device 53 and an output device 54 .

The processor 51 , the memory 52 , the input device 53 and the output device 54 may be connected by a bus or in other ways, and the connection by a bus is taken as an example in FIG. 10 .

The processor 51 may be a central processing unit (Central Processing Unit, CPU). The processor 51 may also be other general-purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuit (Application Specific Integrated Circuit, ASIC), Field-Programmable Gate Array (Field-Programmable Gate Array, FPGA) or Other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components and other chips, or a combination of the above types of chips. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The memory 52 may include a stored program area and a stored data area, wherein the stored program area may store an operating system, an application program required for at least one function; the storage data area may store data created according to the use of the system constructing the wheel object, and the like. Additionally, memory 52 may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid state storage device. In some embodiments, memory 52 may optionally include memory located remotely from processor 51, which may be connected via a network to the system that constructs the scroll wheel object. The input device 53 may receive a calculation request (or other numerical or character information) entered by the user, and generate key signal input related to the system for constructing the scroll wheel object. The output device 54 may include a display device such as a display screen, and is used to output the calculation result.

Example 4

A fourth aspect of the present invention provides a computer-readable storage medium, where the computer-readable storage medium stores computer instructions, the computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions can execute any of the foregoing method embodiments. A method to construct the wheel object. Wherein, the storage medium may be a magnetic disk, an optical disk, a read-only memory (Read-Only Memory, ROM), a random access memory (Random Access Memory, RAM), a flash memory (Flash Memory), a hard disk (Hard) Disk Drive, abbreviation: HDD) or solid-state drive (Solid-State Drive, SSD), etc.; the storage medium may also include a combination of the above-mentioned types of memories.

Obviously, the above-mentioned embodiments are only examples for clear description, and are not intended to limit the implementation manner. For those of ordinary skill in the art, changes or modifications in other different forms can also be made on the basis of the above description. There is no need and cannot be exhaustive of all implementations here. However, the obvious changes or changes derived from this are still within the protection scope of the present invention.

Claims (10)

1. A method of building a roller object, comprising:

obtaining operation information of an adjusting roller control, wherein the roller control at least comprises: a wheel element, the wheel element including a current value attribute;

updating the value of a current value attribute of the roller element according to the operation information, wherein the current value attribute is used for defining a current selection item of the roller object;

determining user-visible items from the currently selected item, the user-visible items including forward-adjacent items and backward-adjacent items of the currently selected item;

and constructing a target roller object according to the roller control and the user visible item.

2. The method of building a roller object of claim 1, wherein the roller element further comprises a selectable type attribute, a step attribute,

if the selectable item type attribute is an integer type, determining a user visible item according to the currently selected item includes:

determining the forward neighbor according to a difference between the current selected item and the value of the stride attribute;

and determining the backward adjacent item according to the sum of the currently selected item and the value of the step length attribute.

3. A method of constructing a roller object according to claim 1, wherein the roller control further comprises a plurality of selectable elements, the plurality of selectable elements being in order, the selectable elements comprising a selectable value property for defining a value of a selectable in the roller control, the roller element further comprising a selectable type property,

if the selectable item type attribute is a text type, determining a user visible item according to the currently selected item includes:

determining a value of a selectable value attribute of a selectable item element preceding a selectable item element corresponding to the currently selected item as the forward neighbor;

determining a value of a selectable value attribute of a selectable item element subsequent to the selectable item element corresponding to the currently selected item as the backward-adjacent item.

4. A method for building a roller object according to any of claims 1-3, wherein said building a target roller object from the roller control and user visible items comprises:

identifying and analyzing each element and attribute in the roller control to obtain a corresponding analysis control value;

acquiring member variables of preset rendering nodes;

configuring each analysis control value into each member variable through a preset configuration function to obtain a current member variable;

and according to the member variables and a preset drawing function, the currently selected item and the user visible item are laid out and rendered to obtain the target roller wheel object.

5. A method of building a roller object according to any of claims 1-3, wherein the roller control further comprises: CSS attributes defining display characteristics of the currently selected item and the user-viewable item,

the constructing a target roller object according to the roller control and the user visible item comprises:

identifying and analyzing each element and attribute in the roller control to obtain a corresponding analysis control value;

identifying and analyzing the CSS attribute to obtain a drawing analysis value;

acquiring member variables of preset rendering nodes;

configuring each analysis control value and a drawing analysis value into each member variable through a preset configuration function to obtain a current member variable;

and according to each current member variable and a preset drawing function, carrying out layout and rendering on the current selected item and the user visible item to obtain the target roller wheel object.

6. The method for constructing a roller object according to claim 4 or 5, wherein the identifying and parsing each element and attribute in the roller control to obtain a corresponding parsed value comprises:

storing the element names of the elements and the attribute names of the attributes to corresponding files;

generating corresponding hash values for the element and the attribute according to the element name and the attribute name respectively;

acquiring a member function corresponding to the roller element according to the hash value of the roller element;

and analyzing the attribute of the roller element according to the member function to obtain a corresponding analysis control value.

7. The method of building a roller object of claim 1, wherein the roller control further comprises: event attributes for defining logical changes of a current wheel and an adjacent wheel;

the method for constructing the roller object further comprises the following steps:

and determining the value range of the selectable items of the roller control corresponding to the event attribute according to the value of the current value attribute and the event attribute.

8. A system for building a roller object, comprising:

an operation information obtaining module, configured to obtain operation information for adjusting a roller control, where the roller control at least includes: a wheel element, the wheel element including a current value attribute;

a current value attribute updating module, configured to update a value of a current value attribute of the roller element according to the operation information, where the current value attribute is used to define a current option of the roller object;

a user visible item determining module for determining a user visible item according to the currently selected item, wherein the user visible item comprises a forward adjacent item and a backward adjacent item of the currently selected item;

and the target roller object building module is used for building a target roller object according to the roller control and the user visible item.

9. A computer-readable storage medium storing computer instructions which, when executed by a processor, implement a method of constructing a roller object according to any one of claims 1-7.

10. An electronic device, comprising:

a memory and a processor communicatively coupled to each other, the memory having stored therein computer instructions, the processor executing the computer instructions to perform the method of building a roller object according to any one of claims 1-7.

Images