Component drawing method and apparatus, and device and storage medium

Abstract

A component drawing method, comprising: using a target element to fill a first background of a first component; determining first drawing information of the first component, wherein the first drawing information comprises a first start position and / or a first end position of the target element in the first component, and the first start position and / or the first end position indicate an offset position in the target element; on the basis of the first drawing information, determining second drawing information of a second component associated with the first component, wherein the second drawing information comprises a second start position and / or a second end position of the target element in the second component; and on the basis of the second drawing information, using the target element to fill a second background of the second component.

Description

Methods, apparatus, devices, and storage media for component drawing Technical Field

[0001] The exemplary embodiments disclosed herein generally relate to the field of computers, and more particularly to methods, apparatus, devices, and computer-readable storage media for drawing components. Background Technology

[0002] To make multiple adjacent components share a single background image, a background image is typically set on the parent container that the components share. The backgrounds of the child components inside are transparent, which visually creates the effect that multiple adjacent components share a single background image.

[0003] Summary of the Invention

[0004] In a first aspect of this disclosure, a method for drawing a component is provided. The method includes: filling a first background of a first component with a target element; determining first drawing information for the first component, the first drawing information including a first start position and / or a first end position of the target element in the first component, the first start position and / or the first end position indicating an offset position within the target element; based on the first drawing information, determining second drawing information for a second component associated with the first component, the second drawing information including a second start position and / or a second end position of the target element in the second component; and based on the second drawing information, filling a second background of the second component with the target element.

[0005] In a second aspect of this disclosure, a method for displaying components is provided. The method includes: filling a first background of a first component and a second background of a second component with a target element, wherein the first component and the second component are adjacent and have different sizes; displaying the first component and the second component such that the target element is continuously displayed across the first background of the first component and the second background of the second component; and moving the first component and the second component in response to a movement operation on the first component and / or the second component such that the first background and the second background move together with the first component and the second component.

[0006] In a third aspect of this disclosure, an apparatus for drawing a component is provided. The apparatus includes: a first fill module configured to fill a first background of a first component with a target element; a first determination module configured to determine first drawing information of the first component, the first drawing information including a first start position and / or a first end position of the target element in the first component, the first start position and / or the first end position indicating an offset position in the target element; a second determination module configured to determine second drawing information of a second component associated with the first component based on the first drawing information, the second drawing information including a second start position and / or a second end position of the target element in the second component; and a second fill module configured to fill a second background of the second component with the target element based on the second drawing information.

[0007] In a fourth aspect of this disclosure, an electronic device is provided. The device includes at least one processing unit; and at least one memory coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit. When executed by the at least one processing unit, the instructions cause the device to perform the methods of the first or second aspect.

[0008] In a fifth aspect of this disclosure, a computer-readable storage medium is provided. The computer-readable storage medium stores a computer program that can be executed by a processor to implement the methods of the first or second aspect.

[0009] It should be understood that the content described in this content section is not intended to limit the key or essential features of the embodiments of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0010] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. In the drawings, the same or similar reference numerals denote the same or similar elements, wherein:

[0011] Figure 1 shows a schematic diagram of an example environment in which embodiments of the present disclosure may be implemented;

[0012] Figure 2 shows a flowchart of the process of drawing example components according to some embodiments of the present disclosure;

[0013] Figures 3A and 3B illustrate example interfaces according to some embodiments of the present disclosure;

[0014] Figure 4 shows a schematic structural block diagram of an example component drawing apparatus according to some embodiments of the present disclosure; and

[0015] Figure 5 shows a block diagram of an electronic device capable of implementing several embodiments of the present disclosure. Detailed Implementation

[0016] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0017] It should be noted that the headings of any section / subsection provided herein are not limiting. Various embodiments are described throughout this document, and embodiments of any type may be included under any section / subsection. Furthermore, embodiments described in any section / subsection may be combined in any way with any other embodiments described in the same section / subsection and / or different sections / subsections.

[0018] In the description of embodiments of this disclosure, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may also be included below. The terms "first", "second", etc., may refer to different or the same objects. Other explicit and implicit definitions may also be included below.

[0019] The embodiments of this disclosure may involve user data, data acquisition, and / or use. All of these aspects comply with applicable laws, regulations, and relevant provisions. In the embodiments of this disclosure, all data collection, acquisition, processing, manipulation, forwarding, and use are conducted with the user's knowledge and confirmation. Accordingly, in implementing the embodiments of this disclosure, the type, scope of use, and usage scenarios of any data or information that may be involved should be communicated to the user and their authorization obtained in accordance with relevant laws and regulations through appropriate means. The specific methods of notification and / or authorization may vary depending on the actual situation and application scenario, and the scope of this disclosure is not limited in this respect.

[0020] In this specification and the embodiments, any processing of personal information will be carried out only under the premise of legality (such as obtaining the consent of the personal information subject, or being necessary for the performance of a contract), and will only be carried out within the scope stipulated or agreed upon. A user's refusal to process personal information other than that necessary for basic functions will not affect the user's use of basic functions.

[0021] Traditional solutions, such as using a single background image for multiple adjacent components, typically involve setting a background image on the common parent container of these components, and then making the backgrounds of the inner child components transparent. This achieves the visual effect of multiple adjacent components sharing a single background image. However, this solution cannot be applied to child components of a sliding list.

[0022] Given the rich information needs in reality, displaying this information in a sliding list component creates a continuously scrollable list of content. Each piece of information can occupy a child component, and these contents can slide in and out of the visible area. When multiple adjacent child components in the sliding list need to share a background, and this background slides along with the child components, because these child components only occupy a portion of the parent container, and their positions are scrollable (can slide in and out), and their width and height are also dynamically variable, the above-mentioned solution of setting a background image in the parent container cannot be used.

[0023] Embodiments of this disclosure propose a component rendering scheme. According to this scheme, a first background of a first component can be filled using a target element; first rendering information of the first component can be determined, the first rendering information including a first start position and / or a first end position of the target element in the first component, the first start position and / or the first end position indicating an offset position within the target element; based on the first rendering information, second rendering information of a second component associated with the first component can be determined, the second rendering information including a second start position and / or a second end position of the target element in the second component; and based on the second rendering information, a second background of the second component can be filled using the target element.

[0024] In this way, embodiments of this disclosure can achieve the effect of multiple dynamically changing adjacent components sharing a background image in sliding or fixed arrangement scenarios. Therefore, embodiments of this disclosure can improve the consistency between component displays and support adjustments to dynamic content, thereby enhancing the reliability of the content carried by the components.

[0025] The following section provides a detailed description of various example implementations of this scheme, with reference to the accompanying drawings.

[0026] Example Environment

[0027] Figure 1 illustrates a schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented. As shown in Figure 1, the example environment 100 may include an electronic device 110.

[0028] In this example environment 100, electronic device 110 can run an application 120 that supports user interface interaction. Application 120 can be any suitable type of application for user interface interaction, examples of which may include, but are not limited to, video applications, social applications, or other suitable applications. User 140 can interact with application 120 via electronic device 110 and / or its attached devices.

[0029] In environment 100 of Figure 1, if application 120 is active, electronic device 110 can use application 120 to present interface 150 for supporting interface interaction.

[0030] In some embodiments, electronic device 110 communicates with server 130 to provide services to application 120. Electronic device 110 can be any type of mobile terminal, fixed terminal, or portable terminal, including mobile phones, desktop computers, laptop computers, notebook computers, netbook computers, tablet computers, media computers, multimedia tablets, handheld computers, portable gaming terminals, VR / AR devices, personal communication system (PCS) devices, personal navigation devices, personal digital assistants (PDAs), audio / video players, digital cameras / camcorders, positioning devices, television receivers, radio receivers, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, electronic device 110 can also support any type of user-facing interface (such as "wearable" circuitry).

[0031] Server 130 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks, and big data and artificial intelligence platforms. Server 130 may include, for example, computing systems / servers such as mainframes, edge computing nodes, computing devices in a cloud environment, etc. Server 130 can provide backend services for applications 120 that support virtual scenarios in electronic devices 110.

[0032] A communication connection can be established between server 130 and electronic device 110. This communication connection can be established via wired or wireless means. The communication connection may include, but is not limited to, Bluetooth, mobile network, Universal Serial Bus (USB), and Wireless Fidelity (WiFi) connections; the embodiments of this disclosure are not limited in this respect. In the embodiments of this disclosure, server 130 and electronic device 110 can achieve signaling interaction through the communication connection between them.

[0033] It should be understood that the structure and function of the various elements in environment 100 are described for illustrative purposes only and do not imply any limitation on the scope of this disclosure.

[0034] The following description will continue with reference to the accompanying drawings, which will provide some exemplary embodiments of this disclosure.

[0035] Example process

[0036] Figure 2 shows a flowchart of an example component drawing process 200 according to some embodiments of the present disclosure. Process 200 can be implemented at electronic device 110. Process 200 is described below with reference to Figure 1.

[0037] In box 210, electronic device 110 fills the first background of the first component with the target element.

[0038] In some embodiments, referring to FIG3A, the electronic device 110 may use target elements 310 to fill the first background of the first component 320. It is understood that if the target elements are insufficient to fill the first component, the electronic device 110 will splice the target elements to obtain the first background of the first component. That is, the first background may be filled by a portion of the target elements, a single target element, or more target elements.

[0039] In some embodiments, such target elements may include, but are not limited to, various types of graphic elements, such as images, emoticons, stickers, etc.

[0040] In some embodiments, the size of such a first component can be dynamically changed. For example, the size of the first component can change according to the information content to be displayed within it. For instance, if the first component is a component for displaying a comment, its size can change accordingly based on the length of the comment content.

[0041] In box 220, electronic device 110 determines first drawing information for a first component, the first drawing information including a first start position and / or a first end position of a target element in the first component, the first start position and / or the first end position indicating an offset position in the target element.

[0042] In some embodiments, referring to FIG3B, the figure includes three components 340, 350, and 360. For ease of understanding, the following description uses component 340 as the first component.

[0043] In some embodiments, the electronic device 110 may determine first drawing information of the first component based on the size information of the first component. The size information varies based on the content presented in the first component. Referring to FIG3B, the first drawing information includes a first start position 370 and / or a first end position 380 of the target element in component 340.

[0044] As shown in Figure 3B, the first starting position 370 and the first ending position 380 can represent offset positions within the target element. For example, the first starting position 370 can correspond to the height "0" of the target element; the first ending position can correspond to the height offset of the corresponding position within the target element, such as "h1". It should be understood that after determining the first starting position 370, the electronic device 110 can determine the corresponding first ending position 380 based on the height of the component 340.

[0045] In some embodiments, if the first component is in a first position (e.g., the initial position of a child component within a common parent container of multiple child components) and is the first to be drawn, the electronic device 110 can draw the target element from the first initial position of the first component, and the first ending position is the height of the first component, that is, the height of the first component is the height of the target element occupied by the first component. It is understood that the occupied target element can be one or multiple. In this way, the electronic device 110 can obtain the first drawing information of the first component.

[0046] In some embodiments, the component list consisting of multiple adjacent components includes a first component and a second component. Electronic device 110 can determine whether the first component is the first component in the component list based on the following process. Specifically, electronic device 110 can determine whether the component list includes a third component associated with the first component, wherein the third component has a higher priority in the component list than the first component. As an example, as shown in FIG3B, electronic device 110 can determine that the component list includes component 340, which has a higher priority than component 350, but excludes other components with a higher priority than component 340. Accordingly, electronic device 110 can determine that component 340 is the first component in the component list and can determine the first starting position 370 of component 370 based on a preset offset (e.g., 0) of the filled elements.

[0047] Furthermore, the electronic device 110 determines the first end position 380 based on the size information (e.g., height or width) of component 370 and the first start position 370.

[0048] In other embodiments, if the component list includes a third component with a higher priority than the component currently being calculated, the electronic device 110 can determine the start or end position of the current component accordingly based on the drawing information of that third component. For example, as described below, the start position of component 350 may correspond to the end position of component 370.

[0049] In box 230, electronic device 110 determines second drawing information of a second component associated with the first component based on the first drawing information. The second drawing information includes a second start position and / or a second end position of the target element in the second component.

[0050] In some embodiments, the electronic device 110 constructs a first node corresponding to the first component and a second node corresponding to the second component, and establishes an association between the first node and the second node to indicate the association between the first component and the second component. The electronic device 110 stores first drawing information of the first component in the first node. As an example, the first start position and first end position information of the first component are stored in the first node.

[0051] In some embodiments, in response to completing the storage of first drawing information in a first node, the electronic device 110 determines second drawing information based on the first drawing information and stores it in a second node. As an example, after determining the second drawing information, the electronic device stores the second start position and second end position information of the second component in the second node.

[0052] As an example, electronic device 110 can construct such nodes using a doubly linked list. As an example, the data structure of such a node can include multiple fields: a "prev" field, representing the previous node in the linked list; a "next" field, representing the next node in the linked list; a "startoffset" field, representing the starting drawing position of the node; an "endoffset" field, representing the ending drawing position of the node; and "iscompletelayout", indicating whether the current node has completed position calculation.

[0053] In this way, embodiments of the present disclosure can manage multiple components in a component list using a doubly linked list, and the adjacency between components can be characterized by the association between nodes in the linked list.

[0054] In some embodiments, the electronic device 110 determines a target orientation of the second component relative to the first component. Referring to FIG3B, the target orientation of the second component 350 relative to the first component 340 is downward. Based on this target orientation and the first drawing information, the electronic device 110 determines second drawing information for the second component. Such second drawing information may, for example, be a second start position of the target element in the second component as 380 and a second end position as 390.

[0055] In some embodiments, the electronic device 110 determines a second end position based on a first start position in response to a target direction being a first direction. Referring to FIG3B, such a first direction could be upward. When sliding the component downward, the first start position of the first component is 380, the first end position of the first component is 370, the second start position of the second component is 390, and the end position of the second component is 380.

[0056] In some embodiments, the electronic device 110 determines a first starting position based on a first ending position in response to a target direction being a second direction. As an example, such a second direction could be downwards. When sliding the component upwards, the first starting position of the first component is 370, the first ending position of the first component is 380, the second starting position of the second component is 380, and the ending position of the second component is 390.

[0057] In some embodiments, if the first component is in the first position and is the last to be drawn, the electronic device 110 needs to obtain the position information of the target element occupied by the next component of the first component, the first component needs to occupy the target element forward, and calculate the occupied position information.

[0058] In some embodiments, if the first component is in the last position and is the first component to be drawn, the electronic device 110 can place the first component at the end position of the target element, or adjust it as needed. For example, the electronic device 110 can record the position of the first component, and when the first component is drawn first, it will directly use the position information calculated when the first component was the last component drawn previously. In this way, when sliding in reverse, the target element positions occupied by multiple components sharing the target element will not change.

[0059] In some embodiments, if the first component is in the last position and is drawn last, the electronic device 110 needs to obtain the end position of the target element occupied by the previous component as the start position of the target element occupied by the first component, and then calculate the end position of the target element occupied by the first component in combination with the height of the first component.

[0060] In some embodiments, if the first component is an intermediate component (a component with shared target elements at both ends) and the sliding direction is from front to back, the electronic device 110 needs to obtain the position information of the target element occupied by the previous component, and then the first component occupies the target element backward and calculates the occupied position information.

[0061] In some embodiments, if the first component is an intermediate component (a component with a shared target element at both ends) and the sliding direction is from back to front, the electronic device 110 needs to obtain the position information of the target element occupied by the next component, and then the first component moves forward to occupy the target element and calculates the occupied position information.

[0062] In some embodiments, the height of the target element can be smaller or larger than the content of its child components. The size of both the target element and the size of each child component can be adjusted arbitrarily, and they are not necessarily perfectly matched.

[0063] In some embodiments, if there are many sub-components and the target element cannot accommodate multiple sub-components, the electronic device 110 can repeatedly splice the target element to fit the size of the sub-components. If the height of the target element is smaller than that of the sub-components, the target element will automatically repeat splicing to fill the background of the sub-components, ensuring that the joints of adjacent sub-components can be spliced ​​into a complete splicing unit, so that the background of all sub-components sharing the target element appears as a whole.

[0064] In some embodiments, the electronic device 110 may obtain the second drawing information of the second component based on the process described above.

[0065] In box 240, electronic device 110 fills the second background of the second component with target elements based on the second drawing information.

[0066] In some embodiments, the electronic device 110 fills the second background of the second component using target elements based on second start position and second end position information. Thus, as shown in FIG3B, the electronic device 110 enables components 340 and 350 to have a continuous background filling effect. Furthermore, when the height of component 340 changes due to content, the electronic device 110 can recalculate the drawing information of component 350 based on the drawing information of component 340, while still ensuring background continuity. Compared to the traditional method of setting independent backgrounds for each component, the embodiments of this disclosure can reduce the manual cost of background adjustment and improve the reliability of displaying dynamic content.

[0067] In this way, embodiments of this disclosure can achieve the effect of multiple dynamically changing adjacent components sharing a background image in sliding or fixed arrangement scenarios. Therefore, embodiments of this disclosure can improve the consistency between component displays and support adjustments to dynamic content, thereby enhancing the reliability of the content carried by the components.

[0068] In some embodiments, embodiments of this disclosure also provide a component display method. Specifically, as discussed above, electronic device 110 may use target elements to fill a first background of a first component and a second background of a second component, wherein the first component and the second component are adjacent and the first component and the second component have different sizes.

[0069] Taking Figure 3B as an example, electronic device 110 can use target elements to fill components 340, 350, and 360. Components 340 and 350 may, for example, have different sizes.

[0070] Furthermore, the electronic device 110 can display the first component and the second component, such that the target element is continuously displayed across the first background of the first component and the second background of the second component. As shown in Figures 3A and 3B, based on the filling process described above, embodiments of this disclosure can ensure that the target element is continuously displayed across different components. For example, components 340 and 350 can continuously display different portions of a single target element.

[0071] Furthermore, in response to a movement operation on the first component and / or the second component, the electronic device 110 can move the first component and the second component such that the first background and the second background move together with the first component and the second component.

[0072] Continuing with Figure 3B as an example, when electronic device 110 receives a movement operation (e.g., a swipe up operation) for component 340, component 350 or component 360, electronic device 110 can move component 340, component 350 and component 360 accordingly.

[0073] Furthermore, the electronic device 110 can also control the background in components 340, 350, and 360 to move in coordination with the corresponding components. That is, during the sliding process, component 340 can maintain the corresponding portion of the target element as shown in FIG3B. Thus, the embodiments of this disclosure can maintain the continuity of the target element across different components during the movement of multiple adjacent components.

[0074] Based on this approach, the embodiments of this disclosure can support continuous background filling for multiple related components and ensure the continuity of the background during component movement, thereby enabling more effective use of components to present corresponding information and improving the efficiency of obtaining information within components.

[0075] Example devices and equipment

[0076] Embodiments of this disclosure also provide corresponding apparatus for implementing the methods or processes described above. FIG4 shows a schematic structural block diagram of an example component drawing apparatus 400 according to certain embodiments of this disclosure. Apparatus 400 may be implemented as or included in electronic device 110. The various modules / components in apparatus 400 may be implemented by hardware, software, firmware, or any combination thereof.

[0077] As shown in Figure 4, the device 400 includes a first filling module 410 configured to fill a first background of a first component with a target element; a first determining module 420 configured to determine first drawing information of the first component, the first drawing information including a first start position and / or a first end position of the target element in the first component, the first start position and / or the first end position indicating an offset position in the target element; a second determining module 430 configured to determine second drawing information of a second component associated with the first component based on the first drawing information, the second drawing information including a second start position and / or a second end position of the target element in the second component; and a second filling module 440 configured to fill a second background of the second component with the target element based on the second drawing information.

[0078] In some embodiments, the second determining module 430 is specifically configured to determine the target direction of the second component relative to the first component; and to determine the second drawing information of the second component based on the target direction and the first drawing information.

[0079] In some embodiments, the second determining module 430 is specifically configured to determine a second ending position based on a first starting position in response to a target direction being a first direction; or to determine a second starting position based on a first ending position in response to a target direction being a second direction.

[0080] In some embodiments, the first determining module 420 is specifically configured to determine the first drawing information of the first component based on the size information of the first component.

[0081] In some embodiments, the size information varies based on the content presented in the first component.

[0082] In some embodiments, the first component and the second component are included in a component list, and the first determining module 420 is specifically configured to determine whether the component list includes a third component associated with the first component, wherein the third component has a higher priority in the component list than the first component; in response to the component list not including the third component, to determine a first starting position of the first component based on a preset offset of the padding element; and to determine a first ending position based on the size information of the first component and the first starting position.

[0083] In some embodiments, the first determining module 420 is specifically configured to, in response to the component list including a third component, determine a first starting position of the first component based on third drawing information of the third component; and determine a first ending position of the first component based on the first starting position.

[0084] In some embodiments, the apparatus 400 further includes a processing module specifically configured to construct a first node corresponding to the first component and a second node corresponding to the second component; establish an association between the first node and the second node to indicate the association between the first component and the second component; and store first drawing information of the first component in the first node.

[0085] In some embodiments, the second determining module 430 is specifically configured to determine second drawing information based on the first drawing information in response to the completion of storing the first drawing information in the first node, so as to store the second drawing information in the second node.

[0086] The modules included in device 400 can be implemented in various ways, including software, hardware, firmware, or any combination thereof. In some embodiments, one or more units can be implemented using software and / or firmware, such as machine-executable instructions stored on a storage medium. In addition to or as an alternative to machine-executable instructions, some or all of the modules in device 400 can be implemented at least partially by one or more hardware logic components. By way of example, and not limitation, exemplary types of hardware logic components that can be used include field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), system-on-a-chip (SoCs), complex programmable logic devices (CPLDs), and so on.

[0087] Figure 5 shows a block diagram of an electronic device 500 in which one or more embodiments of the present disclosure may be implemented. It should be understood that the electronic device 500 shown in Figure 5 is merely exemplary and should not constitute any limitation on the functionality and scope of the embodiments described herein. The electronic device 500 shown in Figure 5 can be used to implement the electronic device 110 of Figure 1.

[0088] As shown in Figure 5, the electronic device 500 is in the form of a general-purpose electronic device. Components of the electronic device 500 may include, but are not limited to, one or more processors or processing units 510, memory 520, storage devices 530, one or more communication units 540, one or more input devices 550, and one or more output devices 560. The processing unit 510 may be a physical or virtual processor and is capable of performing various processes according to programs stored in the memory 520. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capability of the electronic device 500.

[0089] Electronic device 500 typically includes multiple computer storage media. Such media can be any accessible media that is accessible to electronic device 500, including but not limited to volatile and non-volatile media, removable and non-removable media. Memory 520 can be volatile memory (e.g., registers, cache, random access memory (RAM)), non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. Storage device 530 can be removable or non-removable media and can include machine-readable media, such as flash drives, disks, or any other media that can be used to store information and / or data and can be accessed within electronic device 500.

[0090] Electronic device 500 may further include additional removable / non-removable, volatile / non-volatile storage media. Although not shown in FIG. 5, disk drives for reading from or writing to removable, non-volatile disks (e.g., "floppy disks") and optical disk drives for reading from or writing to removable, non-volatile optical disks may be provided. In these cases, each drive may be connected to a bus (not shown) via one or more data media interfaces. Memory 520 may include computer program product 525 having one or more program modules configured to perform various methods or actions of various embodiments of the present disclosure.

[0091] Communication unit 540 enables communication with other electronic devices via a communication medium. Additionally, the functionality of components of electronic device 500 can be implemented using a single computing cluster or multiple computing machines capable of communicating via communication connections. Therefore, electronic device 500 can operate in a networked environment using logical connections to one or more other servers, network personal computers (PCs), or another network node.

[0092] Input device 550 can be one or more input devices, such as a mouse, keyboard, trackball, etc. Output device 560 can be one or more output devices, such as a monitor, speaker, printer, etc. Electronic device 500 can also communicate with one or more external devices (not shown) via communication unit 540 as needed. These external devices include storage devices, display devices, etc., and can communicate with one or more devices that enable user interaction with electronic device 500, or with any device that enables electronic device 500 to communicate with one or more other electronic devices (e.g., network card, modem, etc.). Such communication can be performed via input / output (I / O) interface (not shown).

[0093] According to an exemplary implementation of this disclosure, a computer-readable storage medium is provided that stores computer-executable instructions thereon, wherein the computer-executable instructions are executed by a processor to implement the methods described above. According to an exemplary implementation of this disclosure, a computer program product is also provided, which is tangibly stored on a non-transitory computer-readable medium and includes computer-executable instructions, which are executed by a processor to implement the methods described above.

[0094] Various aspects of this disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatuses, devices, and computer program products implemented according to this disclosure. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer-readable program instructions.

[0095] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that, when executed by the processing unit of the computer or other programmable data processing apparatus, they create means for implementing the functions / actions specified in one or more blocks of the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium that causes a computer, programmable data processing apparatus, and / or other device to operate in a particular manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing aspects of the functions / actions specified in one or more blocks of the flowchart and / or block diagram.

[0096] Computer-readable program instructions can be loaded onto a computer, other programmable data processing apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions that execute on the computer, other programmable data processing apparatus, or other device to perform the functions / actions specified in one or more boxes of a flowchart and / or block diagram.

[0097] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of an instruction, which contains one or more executable instructions for implementing the specified logical function. In some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0098] Various implementations of this disclosure have been described above. The foregoing description is exemplary and not exhaustive, nor is it limited to the disclosed implementations. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described implementations. The terminology used herein is chosen to best explain the principles, practical applications, or improvements to technology in the market, or to enable others skilled in the art to understand the various implementations disclosed herein.

Claims

1. A component drawing method, comprising: Fill the first background of the first component with the target element; Determine first drawing information for the first component, the first drawing information including a first start position and / or a first end position of the target element in the first component, the first start position and / or the first end position indicating an offset position in the target element; Based on the first drawing information, second drawing information of a second component associated with the first component is determined, the second drawing information including a second start position and / or a second end position of the target element in the second component; and Based on the second drawing information, the target element is used to fill the second background of the second component.

2. The method of claim 1, wherein determining the second drawing information of the second component associated with the first component based on the first drawing information comprises: Determine the target orientation of the second component relative to the first component; Based on the target direction and the first drawing information, the second drawing information related to the second component is determined.

3. The method of claim 2, wherein determining the second drawing information relative to the second component based on the target direction of the second component relative to the first component and based on the first drawing information comprises: In response to the target direction being a first direction, a second end position is determined based on the first start position; or In response to the target direction being the second direction, the second starting position is determined based on the first ending position.

4. The method of claim 1, wherein determining the first drawing information of the first component includes: Based on the size information of the first component, the first drawing information of the first component is determined.

5. The method of claim 4, wherein the size information varies based on the content presented in the first component.

6. The method of claim 1, wherein the first component and the second component are included in a component list, and determining the first drawing information of the first component includes: Determine whether the component list includes a third component associated with the first component, wherein the third component has a higher priority than the first component in the component list; In response to the fact that the component list does not include a third component, the first starting position of the first component is determined based on the preset offset of the fill element; as well as The first ending position is determined based on the size information of the first component and the first starting position.

7. The method of claim 6, wherein determining the first drawing information of the first component includes: In response to the component list including a third component, the first starting position of the first component is determined based on the third drawing information of the third component; as well as Based on the first starting position, the first ending position of the first component is determined.

8. The method according to claim 1, further comprising: Construct a first node corresponding to the first component and a second node corresponding to the second component; Establish an association between the first node and the second node to indicate the association between the first component and the second component; as well as The first drawing information of the first component is stored in the first node.

9. The method of claim 8, wherein determining the second drawing information of the second component associated with the first component based on the first drawing information comprises: In response to completing the storage of the first drawing information in the first node, the second drawing information is determined based on the first drawing information and stored in the second node.

10. A component display method, comprising: The target element is used to fill the first background of the first component and the second background of the second component, wherein the first component and the second component are adjacent, and the first component and the second component They come in different sizes; Display the first component and the second component such that the target element is displayed continuously across the first background of the first component and the second background of the second component; as well as In response to a movement operation on the first component and / or the second component, the first component and the second component are moved such that the first background and the second background move together with the first component and the second component.

11. The method of claim 10, wherein filling the first background of the first component and the second background of the second component with the target element comprises: Fill the first background of the first component with the target element; Determine first drawing information for the first component, the first drawing information including a first start position and / or a first end position of the target element in the first component, the first start position and / or the first end position indicating an offset position in the target element; Based on the first drawing information, second drawing information of a second component associated with the first component is determined, the second drawing information including a second start position and / or a second end position of the target element in the second component; and Based on the second drawing information, the target element is used to fill the second background of the second component.

12. The method of claim 11, wherein determining the second drawing information of the second component associated with the first component based on the first drawing information comprises: Determine the target orientation of the second component relative to the first component; Based on the target direction and the first drawing information, the second drawing information related to the second component is determined.

13. The method of claim 12, wherein determining the second drawing information relative to the second component based on the target direction of the second component relative to the first component and based on the first drawing information comprises: In response to the target direction being a first direction, a second end position is determined based on the first start position; or In response to the target direction being the second direction, the second starting position is determined based on the first ending position.

14. A component drawing apparatus, comprising: The first fill module is configured to fill the first background of the first component with the target element; A first determining module is configured to determine first drawing information of the first component, the first drawing information including a first start position and / or a first end position of the target element in the first component, the first start position and / or the first end position indicating an offset position in the target element; The second determining module is configured to determine, based on the first drawing information, second drawing information of a second component associated with the first component, wherein the second drawing information includes a second start position and / or a second end position of the target element in the second component; as well as The second filling module is configured to fill the second background of the second component with the target element based on the second drawing information.

15. An electronic device comprising: At least one processing unit; as well as At least one memory, coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method according to any one of claims 1 to 9 or 10 to 13 when executed by the at least one processing unit.

16. A computer-readable storage medium having a computer program stored thereon, the computer program being executable by a processor to implement the method according to any one of claims 1 to 9 or 10 to 13.

Images