CN113656736A - Data processing method and device - Google Patents
Data processing method and device Download PDFInfo
- Publication number
- CN113656736A CN113656736A CN202110956642.9A CN202110956642A CN113656736A CN 113656736 A CN113656736 A CN 113656736A CN 202110956642 A CN202110956642 A CN 202110956642A CN 113656736 A CN113656736 A CN 113656736A
- Authority
- CN
- China
- Prior art keywords
- functional component
- component
- information
- target
- instruction
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 28
- 230000006870 function Effects 0.000 claims description 30
- 238000000034 method Methods 0.000 claims description 25
- 238000012545 processing Methods 0.000 claims description 15
- 238000012544 monitoring process Methods 0.000 claims description 14
- 230000004044 response Effects 0.000 claims description 5
- 230000005540 biological transmission Effects 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 description 13
- 230000008569 process Effects 0.000 description 5
- 239000011159 matrix material Substances 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000001413 cellular effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000003825 pressing Methods 0.000 description 1
- 239000004984 smart glass Substances 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides a data processing method and a device, wherein the data processing method comprises the following steps: acquiring at least one element of the canvas layer and element information corresponding to each element; establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element; determining a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjustment instruction; responding to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtaining target element adjusting information of a target element corresponding to the functional component to be adjusted; adjusting the target element based on the target element adjustment information. This application has realized receiving the adjustment instruction by functional component to data transmission to the canvas layer that will adjust the completion is used for adjusting the element, thereby realizes that the user carries out the purpose adjusted to the element in the canvas layer.
Description
Technical Field
The present application relates to the field of internet technologies, and in particular, to a data processing method. The application also relates to a data processing apparatus, a computing device, and a computer-readable storage medium.
Background
Canvas, a Canvas element of HTML, is used to draw images. The Canvas element itself has no drawing capability and needs to be scripted to complete the actual drawing task. Konvajs and Fabricjs are two Canvas libraries which are used most in the industry at present, when elements in the Canvas are operated, the Canvas elements can only monitor the first layer of the Canvas, no matter how many figures are drawn by the Canvas, the Canvas is a whole body, and a monitoring event cannot be added to a certain figure independently, so that a complete event system needs to be designed, the event system determines whether the element is selected or not by calculating the position of a mouse on the Canvas and the position of the element on the Canvas, and the position and the display effect of the element are modified by calculating and converting.
However, it is difficult to customize the styles and functions using the Canvas library, and it is also difficult to expand the library, which requires a lot of time for developers and cannot meet the requirements.
Disclosure of Invention
In view of this, the present application provides a data processing method. The application also relates to a data processing device, a computing device and a computer readable storage medium, which are used for solving the problems that the customization of functions and styles is complex and a large amount of time is consumed by developers in the prior art.
According to a first aspect of embodiments of the present application, there is provided a data processing method, including:
acquiring at least one element of the canvas layer and element information corresponding to each element;
establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element;
determining a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjustment instruction;
responding to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtaining target element adjusting information of a target element corresponding to the functional component to be adjusted;
adjusting the target element based on the target element adjustment information.
According to a second aspect of embodiments of the present application, there is provided a data processing apparatus including:
the acquisition module is configured to acquire at least one element of the canvas layer and element information corresponding to each element;
the establishing module is configured to establish a functional component corresponding to each element in a component layer according to the element information corresponding to each element;
the determining module is configured to determine a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjusting instruction;
the functional component adjusting module is configured to respond to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtain target element adjusting information of a target element corresponding to the functional component to be adjusted;
an element adjustment module configured to adjust the target element based on the target element adjustment information.
According to a third aspect of embodiments herein, there is provided a computing device comprising a memory, a processor and computer instructions stored on the memory and executable on the processor, the processor implementing the steps of the data processing method when executing the computer instructions.
According to a fourth aspect of embodiments of the present application, there is provided a computer-readable storage medium storing computer instructions which, when executed by a processor, implement the steps of the data processing method.
The data processing method provided by the application comprises the steps of obtaining at least one element of a canvas layer and element information corresponding to each element; establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element; determining a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjustment instruction; responding to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtaining target element adjusting information of a target element corresponding to the functional component to be adjusted; adjusting the target element based on the target element adjustment information.
According to the embodiment of the application, the element information of the elements in the canvas layer is transmitted to the component layer, the component layer draws the corresponding functional components based on the element information, the functional components receive the adjusting instruction, and the data after the adjustment is transmitted to the canvas layer to be used for adjusting the elements, so that the purpose that the elements in the canvas layer are adjusted by a user is achieved.
Drawings
Fig. 1 is a flowchart of a data processing method according to an embodiment of the present application;
fig. 2 is a processing flow chart of a data processing method applied to the canvas layer Q according to an embodiment of the present application;
FIG. 3 is a diagram of a functionality control provided by an embodiment of the present application;
FIG. 4a is a schematic diagram of a proportional scaling of functionality controls provided by an embodiment of the present application;
FIG. 4b is a diagram illustrating functionality controls provided in an embodiment of the present application before scaling;
FIG. 4c is a schematic diagram illustrating a scaled function control according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of a data processing apparatus according to an embodiment of the present application;
fig. 6 is a block diagram of a computing device according to an embodiment of the present application.
Detailed Description
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present application. This application is capable of implementation in many different ways than those herein set forth and of similar import by those skilled in the art without departing from the spirit of this application and is therefore not limited to the specific implementations disclosed below.
The terminology used in the one or more embodiments of the present application is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of the present application. As used in one or more embodiments of the present application and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used in one or more embodiments of the present application refers to and encompasses any and all possible combinations of one or more of the associated listed items.
It will be understood that, although the terms first, second, etc. may be used herein in one or more embodiments of the present application to describe various information, these information should not be limited by these terms. These terms are only used to distinguish one type of information from another. For example, a first aspect may be termed a second aspect, and, similarly, a second aspect may be termed a first aspect, without departing from the scope of one or more embodiments of the present application. The word "if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination", depending on the context.
First, the noun terms to which one or more embodiments of the present application relate are explained.
DOM: the Document Object Model (Document Object Model) is a programming interface for HTML and XML documents.
A Canvas: is an HTML element that can use script (typically JavaScript) to render graphics.
Matrix: is a square matrix formed by complex or real numbers arranged according to a rectangular array, and coefficients and constants from an equation set at the earliest.
Vector quantity: the method is a basic concept in multiple natural sciences such as mathematics, physics, engineering science and the like, and refers to a geometric object which has both size and direction and meets the parallelogram rule.
In the present application, a data processing method is provided, and the present application relates to a data processing apparatus, a computing device, and a computer-readable storage medium, which are described in detail in the following embodiments one by one.
Fig. 1 shows a flowchart of a data processing method according to an embodiment of the present application, which specifically includes the following steps:
step 102: at least one element of the canvas layer and element information corresponding to each element are obtained.
The canvas layer is a container for storing elements and element information; the elements refer to image elements such as rectangles, circles or pictures; the element information refers to information such as attributes and positions of elements, for example, an element is a rectangle, the element information corresponding to the rectangular element is a rectangle with a length of 3 cm and a width of 2 cm, and the center coordinate of the element is (3, 2). Acquiring at least one element in the canvas layer means acquiring all elements in the canvas layer and acquiring element information corresponding to each element.
In practical applications, the Canvas layer refers to a Canvas in HTML, and can be used for drawing a graphic by using a script, for example, creating the Canvas, and drawing an element a and an element B in the created Canvas by using a script, that is, at this time, the Canvas layer contains an element a, an element B, element information IA corresponding to the element a, and element information IB corresponding to the element B.
In a specific embodiment of the present application, taking an example that the canvas layer includes an element a and an element B, determining all elements in the canvas layer as the element a and the element B, and obtaining element information "perimeter 3 cm" corresponding to the element a and element information "side length 4 cm" corresponding to the element B.
By obtaining the elements and the element information in the canvas layer, the functional components corresponding to the elements in the canvas can be conveniently generated based on the element information.
In order to facilitate the subsequent component layer to draw the corresponding functional component according to the element information of the element in the canvas, the acquired element information can be transmitted to the corresponding component layer.
Specifically, after at least one element of the canvas layer and the element information corresponding to each element are acquired, the element information corresponding to each element may be transmitted to the component layer.
In a specific embodiment of the present application, the element information "perimeter 3 cm" corresponding to the acquired element a and the element information "side length 4 cm" corresponding to the acquired element B are transmitted to the component layer corresponding to the canvas, along with the above example.
By transmitting the element information obtained from the canvas to the component layer, the subsequent component layer is facilitated to draw the functional component corresponding to the element based on the received element information.
Step 104: and establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element.
The component layer is composed of functional components corresponding to elements drawn according to the element information, for example, a corresponding functional component a is drawn for an element a in the canvas, a corresponding functional component B is drawn for an element B in the canvas, and the component layer corresponding to the canvas is composed of the component a and the component B.
In practical applications, the component layer may be a DOM layer, and the DOM is a programming interface for which a Document Object Model (Document Object Model) is an HTML and XML Document; the DOM has a convenient self-defined function, an operation component is built based on the DOM, the function and the style can be expanded at will, and the DOM is provided with a complete event monitoring system for monitoring the movement, clicking, pressing, releasing, double-clicking and the like of a mouse. For example, a functional component completely consistent with the element a in width and height, rotation angle, coordinates and the like is drawn according to the element information of the element a in the DOM layer, and the initial color of the functional component can be set to be transparent, so that the canvas element is prevented from being shielded. In an embodiment of the present application, the functional component may include operation buttons such as a copy button, a zoom button, and a rotate button, so as to facilitate operation of the functional component.
In a specific embodiment of the present application, taking elements as a rectangle C and a circle D as an example, a functional component C corresponding to the rectangle C is drawn according to element information "length is 2 cm and width is 1 cm" corresponding to the rectangle C, a functional component D corresponding to the circle D is drawn according to element information "diameter is 4 cm" of the circle D, and a component layer is composed of the functional component C and the functional component D.
By establishing the corresponding functional component for each element, the subsequent monitoring of the interaction events of the user based on the functional components is facilitated.
In practical application, the component layer may further receive element information transmitted by the canvas layer to establish a functional component, specifically including:
and drawing the functional components corresponding to each element at the component layer according to the received element information corresponding to each element.
In a specific embodiment of the present application, taking the component layer M as an example, the element E and the element F are all elements in the canvas layer N; and the component layer M respectively draws the functional component E of the element E and the functional component F of the element F in the component layer M according to the received element information transmitted by the canvas layer N.
Step 106: and determining the functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjusting instruction.
The functional component adjustment instruction refers to an instruction for adjusting the functional component, and may be an instruction generated by a user touching the functional component or an instruction of a mouse click event touch; the functional component to be adjusted refers to a functional component whose component information needs to be adjusted, which is determined according to the functional component adjustment instruction.
Specifically, which functional component is to be adjusted is determined according to the received functional component adjustment instruction, and the adjusted functional component is determined to be the functional component to be adjusted.
In practical application, a functional component adjustment instruction may be generated by a user touching a functional component, and if the user has translated the functional component g by 3 units to the right, a functional component adjustment instruction for translating the functional component by 3 units to the right may be generated according to the translation. The generation method of the functional component adjustment instruction includes, but is not limited to, generation according to user touch, and is not limited specifically herein.
In an embodiment of the present application, taking the functional component adjustment instruction I1 as an example, according to the functional component received by the component layer, the functional component I1 is determined to be the functional component corresponding to the functional component adjustment instruction I1 among all the functional components in the component layer, and the functional component I1 is taken as the functional component to be adjusted.
By determining the functional component to be adjusted in the functional components of the component layer, the functional component to be adjusted can be further processed conveniently according to the functional component adjustment instruction.
In practical application, the specific method for determining the functional component to be adjusted in the functional component corresponding to each element according to the functional component adjustment instruction received by the component layer comprises the following steps:
monitoring a functional component adjusting instruction aiming at the component layer, and acquiring instruction position information of the functional component adjusting instruction;
and determining the functional component to be adjusted according to the instruction position information.
Specifically, the component layer is formed by functional components generated based on the DOM. The DOM itself has a complete event mechanism, and can directly monitor the user's interaction events, i.e., the functional components of the component layer can monitor the functional component adjustment instructions for the functional components. For example, the functional component a can listen for user mouse events including: onClick, dbClick, onmousedown, onmouseup, onmouseabove, etc.
The functional component adjustment instruction comprises instruction position information, wherein the instruction position information refers to position information when the instruction is triggered, for example, a user triggers a functional component m located at a coordinate (0, 0) position to generate a functional component adjustment instruction, the functional component adjustment instruction at the moment carries instruction coordinate information (0, 0), and the functional component to be adjusted can be determined to be the functional component m according to the instruction coordinate information. In practical applications, the position information may also be expressed in x form such as a center coordinate and a radius (2, 2, r ═ 2) or a center coordinate and a side length (3, 2, a ═ 2), and is not specifically limited herein.
In one embodiment of the present application, taking the functional component adjustment instruction I2 as an example, the functional component adjustment instruction I2 for the component layer is determined by listening for the component function adjustment instruction for the component layer. And acquiring instruction position information (2, 3) in the functional component adjusting instruction I2, and determining the functional component positioned at the coordinates (2, 3) in the component layer as the functional component I2 to be adjusted according to the instruction position information (2, 3).
The functional component corresponding to the functional component adjusting instruction is determined according to the position information in the functional component adjusting instruction, so that the determined functional component can be further adjusted conveniently in the follow-up process.
In practical applications, the component function adjustment instruction may include a move instruction, a rotate instruction, and a zoom instruction.
The movement instruction refers to an instruction for moving the functional component, for example, moving the functional component m from the coordinate position (3, 0) to the coordinate position (3, 1); the rotation instruction refers to an instruction to rotate the functional component, for example, to rotate the functional component m clockwise by 30 degrees; the scaling instruction is, for example, to scale the width and height of the functional component, e.g., to reduce the size of the functional component m by a factor of two.
By receiving different functional component adjusting instructions, different adjustments can be performed on the functional components according to the instructions, so that different adjustments can be subsequently performed on elements in the canvas.
Step 108: and responding to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtaining target element adjusting information of a target element corresponding to the functional component to be adjusted.
Adjusting the functional component to be adjusted according to the functional component adjustment instruction means adjusting component information of the functional component to be adjusted according to adjustment information carried in the functional component adjustment instruction; the target element is an element in the canvas corresponding to the functional component to be adjusted, and if the functional component a is constructed according to the element information of the element A in the canvas, the functional component a corresponds to the element A; the target element adjustment information is a specific value for adjusting the target element or a standard to which the target element is to be adjusted, and for example, the target element adjustment information is "move the target element one unit to the right", and for example, the target element adjustment information is "coordinates of the moved target element are (3, 4)".
In an embodiment of the present application, taking a to-be-adjusted functional component as an example of a functional component a, adjusting the functional component a in response to a functional component adjustment instruction, and obtaining a target element adjustment instruction of a target element a corresponding to the functional component a.
In practical application, the method for adjusting the functional component to be adjusted in response to the functional component adjustment instruction comprises the following steps:
acquiring a component adjusting parameter carried in the functional component adjusting instruction;
and adjusting the functional component to be adjusted according to the component adjustment parameter to obtain a target functional component.
The component adjusting parameters refer to parameters according to which the functional components to be adjusted are adjusted; the target functional component is a functional component which is obtained by adjusting the functional component to be adjusted according to the component adjustment parameter.
Specifically, the functional component adjustment instruction received by the component layer is determined, and the component adjustment parameter in the functional component adjustment instruction is obtained. Acquiring component information of the functional component to be adjusted, adjusting the component information of the functional component to be adjusted based on the component adjustment parameter, and taking the functional component to be adjusted with the adjusted component information as a target functional component.
In an embodiment of the present application, taking the functional component adjustment command I3 as an example, the component adjustment parameter "shift down by 2 units" in the functional component adjustment command I3 received by the component layer is obtained, and the coordinate information (4, 5) of the functional component I3 to be adjusted is adjusted to (4, 3) according to the component adjustment parameter "shift down by 2 units". The functional component i3 to be adjusted whose coordinate information is (4, 3) at this time is taken as the target functional component.
By adjusting the functional component to be adjusted, the elements corresponding to the functional component can be adjusted conveniently in the follow-up process.
In practical application, the method for obtaining the target element adjustment information of the target element corresponding to the functional component to be adjusted comprises the following steps:
determining target component information of the target function component and a target element corresponding to the target function component;
and generating target element adjustment information according to the target component information and the target element.
The target component information refers to attribute information such as width, height, coordinates, rotation angle and the like of the functional component; the target element corresponding to the target element functional component refers to a target element corresponding to the functional component to be adjusted.
Specifically, determining target component information of a target functional component, for example, width and height of the component, and determining a target element corresponding to the target functional component, wherein the target element is an element corresponding to the functional component to be adjusted; and determining a basis for adjusting the target element according to the target component information and the element information of the target element, namely target element adjustment information.
In a specific embodiment of the present application, taking a target function component as an example of the function component E, determining component information of the function component E as "component center coordinate position is (4, 5)", and determining an element corresponding to the function component E as an element E. And generating element adjustment information of shifting the center coordinates (4, 3) of the element e up by 2 units or generating element adjustment information of shifting the center coordinate position of the element e to (4, 5) according to the component information of 'the component center coordinate position is (4, 5)' and the element e.
By determining the target element adjustment information for the target element according to the component information of the target function component and the target element corresponding to the target function component, the target element can be subsequently adjusted based on the target element adjustment information.
In practical application, the component information of the target function component can be transmitted to the canvas layer, and the canvas layer generates a target element adjusting instruction according to the target element and the component information; or the component layer generates a target element adjusting instruction based on the component information and the target element, and then transmits the target element adjusting instruction to the canvas layer for adjusting the target element of the canvas layer subsequently.
Wherein, the functional assembly comprises an outward exposure method, comprising: and the system comprises an onTranslate (move), an onScale (zoom), an onRotate (rotate), an onClick (click select), a dbClick (double click) and the like, and is used for monitoring callback of the functional component, namely synchronizing the changed data of the component layer to the canvas layer and correspondingly adjusting the target element.
Specifically, the process of transmitting the component information to the canvas layer to generate the target element adjustment information includes:
and transmitting the target component information to the canvas layer before generating target element adjustment information according to the target component information and the target element.
In a specific embodiment of the present application, taking the generation of target element adjustment information "move 1 cm to the right" as an example, component information of a target functional component in a component layer is obtained and transmitted to a canvas layer; the canvas layer generates target element adjustment information "moves 1 cm to the right" according to the received component information and the element information of the target element in the canvas layer.
Specifically, the process of generating the target element adjustment information at the component layer and transmitting the target element adjustment information to the canvas layer includes:
and after generating target element adjustment information according to the target component information and the target element, transmitting the target element adjustment information to the canvas layer.
In a specific embodiment of the present application, taking the generation of target element adjustment information "rotate 30 degrees counterclockwise" as an example, component information of a target function component in a component and element information of a target element corresponding to the target function component are acquired, the target element adjustment information "rotate 30 degrees counterclockwise" is generated at a component layer, and the generated target element adjustment information "rotate 30 degrees counterclockwise" is transmitted to a canvas layer.
In practical application, the function component monitors an outward exposure method, and is used for monitoring callback of the function component and transmitting update data
Step 110: adjusting the target element based on the target element adjustment information.
Wherein the target element adjustment information may be target element adjustment information generated by a canvas layer or a component layer.
In practical application, adjusting the target element based on the target element adjustment information includes:
and adjusting the target element on the canvas layer according to the target element adjustment information.
Specifically, the canvas layer receives the target element adjustment information transmitted by the component layer or acquires the target element adjustment information generated by the canvas layer, and adjusts the target element of the canvas layer at the canvas layer.
In a specific embodiment of the present application, taking a target element as an element L as an example, obtaining target element adjustment information "rotate the element L clockwise by 15 degrees" received by a canvas layer, and rotating the target element L in the canvas layer clockwise by 15 degrees in the canvas layer based on the target element adjustment information, thereby completing adjustment of the target element L.
The data processing method comprises the steps of obtaining at least one element of a canvas layer and element information corresponding to each element; establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element; determining a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjustment instruction; responding to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtaining target element adjusting information of a target element corresponding to the functional component to be adjusted; adjusting the target element based on the target element adjustment information. According to the data processing method, the element information of the elements in the canvas layer is transmitted to the component layer, the component layer draws the corresponding functional components based on the element information, the functional components receive the adjusting instruction, and the adjusted data is transmitted to the canvas layer to be used for adjusting the elements, so that the purpose that the elements in the canvas layer are adjusted by a user is achieved.
The following describes the data processing method further by taking the application of the data processing method provided by the present application in the canvas layer Q as an example, with reference to fig. 2. Fig. 2 shows a processing flow chart of a data processing method applied to a canvas layer Q according to an embodiment of the present application, which specifically includes the following steps:
step 202: and drawing the elements on a canvas layer.
In one embodiment of the present application, a Canvas layer is defined, i.e., a Canvas layer Q is defined. Element 1, element 2.
Step 204: and acquiring element information in the canvas layer and transmitting the element information to the component layer.
In a specific embodiment of the present application, along with the above example, all the elements in the canvas layer Q and the element information corresponding to each element are obtained, for example, element 1 in the canvas layer Q is obtained, the element information "element radius is 3 cm" of element 1 is obtained in the canvas layer Q, and the element information of element 1 is transmitted to the component layer. Similarly, the element information of all elements in the canvas layer, including element 2.
Step 206: and the component layer draws the functional components according to the element information.
And establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element.
In a specific embodiment of the present application, following the above example, the functional components corresponding to each element of element 1. For example, the element information of the element 1 is acquired, and the functional component a which is consistent with the element radius of the element 1 and is transparent in color is drawn according to the element information "element radius is 3 cm". Similarly, according to the element information of the element 2 and the element 3.
Step 208: and monitoring a mouse click event. If the mouse click status is clicked, go to step 210, and if the mouse click status is not clicked, go to step 212.
In a specific embodiment of the present application, along the above example, a mouse click instruction is generated by a mouse click event of a mouse clicked by a user, so that which functional component in the canvas Q is further processed is determined according to the instruction. Determining a functional component to be adjusted in the functional components corresponding to each element according to the mouse click event, for example, if the functional component a receives a click event of the mouse click functional component a triggered by a user, that is, the mouse click functional component event is in a click state, the functional component a determines that the functional component a is a functional component to be processed by monitoring that the mouse click event is in the click state, and then, the step 210 is continuously executed.
Step 210: and displaying the functional component to be adjusted.
In a specific embodiment of the present application, following the above example, the functional component a is determined to be a functional component to be adjusted in the functional component according to the position information carried in the mouse click instruction of the user, and the functional component a is displayed. As shown in fig. 3, fig. 3 is a schematic diagram illustrating a functionality control provided in an embodiment of the present application, and a functionality component a includes a rotation button, a copy button, and a zoom button.
Step 212: and hiding the functional components.
In a specific embodiment of the present application, following the above example, when the mouse click event is in a non-click state, that is, when the functional component a does not monitor the mouse click event, the functional component a is hidden.
Step 214: and monitoring whether the subsequent mouse click is in the functional component to be adjusted, if so, executing step 216, and if not, executing step 212.
In a specific embodiment of the present application, following the above example, after the mouse click event is monitored and the functional component a is clicked, the subsequent mouse click event is monitored. And determining that the area clicked by the mouse is still on the functional component a according to the position information in the mouse click command generated by the subsequent mouse monitoring event, and executing the step 216.
Step 216: and judging the selected area of the mouse click event.
The selectable middle areas of the mouse click include a rotation button, a zoom button or the inside of a functional component.
In one embodiment of the present application, following the above example, the selected area of the mouse click event is determined to be the zoom button of the functional component a.
Step 218: and determining the operation of the mouse on the functional component based on the selected area.
According to different areas selected by mouse clicking, different operations on the functional components can be determined. When the selected area is a rotating button, the functional component can be rotated subsequently through mouse rotation; when the selected area is inside the component, the component can be dragged subsequently to move; in the case where the selected region is a zoom button, the component may subsequently be zoomed.
In a specific embodiment of the present application, following the above example, in a case that the zoom button of the functional component a is clicked, it is determined to zoom the functional component a.
Step 220: and monitoring mouse moving events.
In a specific embodiment of the present application, following the above example, the functional component a monitors a mouse movement event that moves a zoom button of the functional component a, and generates a zoom instruction for the functional component a.
Step 222: functional components are redrawn based on mouse movement events.
According to different areas selected by mouse clicking, moving the mouse in different areas to generate corresponding adjusting instructions: generating a functional component rotation instruction under the condition of selecting a rotation button and moving a mouse; generating a functional component moving instruction under the condition of selecting the interior of the functional component and moving the mouse; in the case where the functional component zoom button is selected, a functional component zoom instruction is generated.
In one embodiment of the present application, the functional component a is scaled based on the adjustment parameter in the scaling instruction. And acquiring a component adjusting parameter 'amplified by one time' carried in the functional component adjusting instruction, and adjusting the functional component a to be adjusted according to the component adjusting parameter to acquire a target functional component. And responding to the mouse movement instruction to adjust the functional component a to be adjusted, zooming the functional component a based on the instruction for zooming the functional component a, and redrawing the functional component a. And acquiring target element adjustment information of the functional component a to be adjusted corresponding to the target element A.
Step 224: and transmitting the target element adjustment information to the canvas layer to redraw the target element.
In a specific embodiment of the present application, the component information of the redrawn functional component a is obtained and transmitted to the canvas layer Q. The canvas layer Q determines that the target element adjustment information is "enlarge element 1 by 1" based on the component information and the target element 1 corresponding to the functional component, and enlarges element 1 located in the canvas layer by one time based on the target element adjustment information, that is, redraws of element 1 in the canvas Q.
As shown in fig. 4a, fig. 4a is a schematic diagram of scaling a function control according to an embodiment of the present application, and a principle of scaling an element 1 according to a scaling ratio is as follows: obtaining an angle theta according to the vector OC and the vector OA; calculating the projection of the OA vector in the OC direction, and further obtaining the coordinate of B; o and B > new center point coordinates; calculating coordinates before rotation through a matrix; the resulting new width and height allows for scaling of the functional components. As shown in fig. 4b, fig. 4b is a schematic diagram of the function control provided in an embodiment of the present application before geometric scaling, a movement instruction for the function component a is generated through a mouse movement event, the function component a is adjusted according to the movement instruction, and element adjustment information is transmitted to the canvas layer, the canvas layer scales the element 1 corresponding to the function component a, and the scaled element 1 is obtained as shown in fig. 4c, and fig. 4c is a schematic diagram of the function control provided in an embodiment of the present application after geometric scaling.
Corresponding to the above method embodiment, the present application further provides an embodiment of a data processing apparatus, and fig. 5 shows a schematic structural diagram of a data processing apparatus provided in an embodiment of the present application. As shown in fig. 5, the apparatus includes:
an obtaining module 502 configured to obtain at least one element of the canvas layer and element information corresponding to each element;
an establishing module 504 configured to establish a functional component corresponding to each element in a component layer according to the element information corresponding to each element;
a determining module 506, configured to determine, according to the received functional component adjustment instruction, a functional component to be adjusted in the functional component corresponding to each element;
a functional component adjusting module 508 configured to adjust the functional component to be adjusted in response to the functional component adjusting instruction, and obtain target element adjusting information of a target element corresponding to the functional component to be adjusted;
an element adjustment module 510 configured to adjust the target element based on the target element adjustment information.
In a specific embodiment of the present application, the apparatus further includes:
the element information transmission module is configured to transmit the element information corresponding to each element to a component layer;
the establishing module 504 is further configured to:
drawing a functional component corresponding to each element on a component layer according to the received element information corresponding to each element;
the determining module 506, further configured to:
monitoring a functional component adjusting instruction aiming at the component layer, and acquiring instruction position information of the functional component adjusting instruction; determining a functional component to be adjusted according to the instruction position information;
the functional component adjustment instruction comprises a movement instruction, a rotation instruction or a scaling instruction.
The functional component adjustment module 508, further configured to:
acquiring a component adjusting parameter carried in the functional component adjusting instruction;
and adjusting the functional component to be adjusted according to the component adjustment parameter to obtain a target functional component.
The functional component adjustment module 508, further configured to:
determining target component information of the target function component and a target element corresponding to the target function component;
and generating target element adjustment information according to the target component information and the target element.
The device further comprises:
a component information transmission module configured to transmit the target component information to the canvas layer.
The device further comprises:
an element adjustment information transmission module configured to transmit the target element adjustment information to the canvas layer.
The element adjustment module 510 is further configured to:
and adjusting the target element on the canvas layer according to the target element adjustment information.
The data processing apparatus of the present application includes: the acquisition module is used for acquiring at least one element of the canvas layer and element information corresponding to each element; the establishing module is used for establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element; the determining module is used for determining a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjusting instruction; the functional component adjusting module is used for responding to the functional component adjusting instruction to adjust the functional component to be adjusted and acquiring target element adjusting information of a target element corresponding to the functional component to be adjusted; an element adjustment module that adjusts the target element based on the target element adjustment information. According to the embodiment of the application, the element information of the elements in the canvas layer is transmitted to the component layer, the component layer draws the corresponding functional components based on the element information, the functional components receive the adjusting instruction, and the data after the adjustment is transmitted to the canvas layer to be used for adjusting the elements, so that the purpose that the elements in the canvas layer are adjusted by a user is achieved.
The above is a schematic configuration of a data processing apparatus of the present embodiment. It should be noted that the technical solution of the data processing apparatus and the technical solution of the data processing method belong to the same concept, and details that are not described in detail in the technical solution of the data processing apparatus can be referred to the description of the technical solution of the data processing method.
Fig. 6 illustrates a block diagram of a computing device 600 provided according to an embodiment of the present application. The components of the computing device 600 include, but are not limited to, a memory 610 and a processor 620. The processor 620 is coupled to the memory 610 via a bus 630 and a database 650 is used to store data.
Computing device 600 also includes access device 640, access device 640 enabling computing device 600 to communicate via one or more networks 660. Examples of such networks include the Public Switched Telephone Network (PSTN), a Local Area Network (LAN), a Wide Area Network (WAN), a Personal Area Network (PAN), or a combination of communication networks such as the internet. Access device 640 may include one or more of any type of network interface (e.g., a Network Interface Card (NIC)) whether wired or wireless, such as an IEEE802.11 Wireless Local Area Network (WLAN) wireless interface, a worldwide interoperability for microwave access (Wi-MAX) interface, an ethernet interface, a Universal Serial Bus (USB) interface, a cellular network interface, a bluetooth interface, a Near Field Communication (NFC) interface, and so forth.
In one embodiment of the present application, the above-described components of computing device 600, as well as other components not shown in FIG. 6, may also be connected to each other, such as by a bus. It should be understood that the block diagram of the computing device architecture shown in FIG. 6 is for purposes of example only and is not limiting as to the scope of the present application. Those skilled in the art may add or replace other components as desired.
Computing device 600 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., tablet, personal digital assistant, laptop, notebook, netbook, etc.), mobile phone (e.g., smartphone), wearable computing device (e.g., smartwatch, smartglasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or PC. Computing device 600 may also be a mobile or stationary server.
Wherein the processor 620, when executing the computer instructions, performs the steps of the data processing method.
The above is an illustrative scheme of a computing device of the present embodiment. It should be noted that the technical solution of the computing device and the technical solution of the data processing method belong to the same concept, and details that are not described in detail in the technical solution of the computing device can be referred to the description of the technical solution of the data processing method.
An embodiment of the present application further provides a computer readable storage medium, which stores computer instructions, and the computer instructions, when executed by a processor, implement the steps of the data processing method as described above.
The above is an illustrative scheme of a computer-readable storage medium of the present embodiment. It should be noted that the technical solution of the storage medium belongs to the same concept as the technical solution of the data processing method, and details that are not described in detail in the technical solution of the storage medium can be referred to the description of the technical solution of the data processing method.
The foregoing description of specific embodiments of the present application has been presented. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.
The computer instructions comprise computer program code which may be in the form of source code, object code, an executable file or some intermediate form, or the like. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), Random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like. It should be noted that the computer readable medium may contain content that is subject to appropriate increase or decrease as required by legislation and patent practice in jurisdictions, for example, in some jurisdictions, computer readable media does not include electrical carrier signals and telecommunications signals as is required by legislation and patent practice.
It should be noted that, for the sake of simplicity, the above-mentioned method embodiments are described as a series of acts or combinations, but those skilled in the art should understand that the present application is not limited by the described order of acts, as some steps may be performed in other orders or simultaneously according to the present application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.
In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
The preferred embodiments of the present application disclosed above are intended only to aid in the explanation of the application. Alternative embodiments are not exhaustive and do not limit the invention to the precise embodiments described. Obviously, many modifications and variations are possible in light of the above teaching. The embodiments were chosen and described in order to best explain the principles of the application and its practical applications, to thereby enable others skilled in the art to best understand and utilize the application. The application is limited only by the claims and their full scope and equivalents.
Claims (13)
1. A data processing method, comprising:
acquiring at least one element of the canvas layer and element information corresponding to each element;
establishing a functional component corresponding to each element in a component layer according to the element information corresponding to each element;
determining a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjustment instruction;
responding to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtaining target element adjusting information of a target element corresponding to the functional component to be adjusted;
adjusting the target element based on the target element adjustment information.
2. The method of claim 1, wherein after obtaining at least one element of the canvas layer and element information corresponding to each element, further comprising:
and transmitting the element information corresponding to each element to a component layer.
3. The method of claim 2, wherein establishing the functional component corresponding to each element in the component layer according to the element information corresponding to each element comprises:
and drawing the functional components corresponding to each element at the component layer according to the received element information corresponding to each element.
4. The method of claim 1, wherein determining the functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjustment instruction comprises:
monitoring a functional component adjusting instruction aiming at the component layer, and acquiring instruction position information of the functional component adjusting instruction;
and determining the functional component to be adjusted according to the instruction position information.
5. The method of claim 4, wherein the functional component adjustment instruction comprises a move instruction, a rotate instruction, or a zoom instruction.
6. The method of claim 1, wherein adjusting the functional component to be adjusted in response to the functional component adjustment instruction comprises:
acquiring a component adjusting parameter carried in the functional component adjusting instruction;
and adjusting the functional component to be adjusted according to the component adjustment parameter to obtain a target functional component.
7. The method of claim 6, wherein obtaining target element adjustment information of a target element corresponding to the functional component to be adjusted comprises:
determining target component information of the target function component and a target element corresponding to the target function component;
and generating target element adjustment information according to the target component information and the target element.
8. The method of claim 7, prior to generating target element adjustment information from the target component information and the target element, further comprising:
and transmitting the target component information to the canvas layer.
9. The method of claim 7, after generating target element adjustment information based on the target component information and the target element, further comprising:
and transmitting the target element adjustment information to the canvas layer.
10. The method of claim 7 or 8, wherein adjusting the target element based on the target element adjustment information comprises:
and adjusting the target element on the canvas layer according to the target element adjustment information.
11. A data processing apparatus, comprising:
the acquisition module is configured to acquire at least one element of the canvas layer and element information corresponding to each element;
the establishing module is configured to establish a functional component corresponding to each element in a component layer according to the element information corresponding to each element;
the determining module is configured to determine a functional component to be adjusted in the functional component corresponding to each element according to the received functional component adjusting instruction;
the functional component adjusting module is configured to respond to the functional component adjusting instruction to adjust the functional component to be adjusted, and obtain target element adjusting information of a target element corresponding to the functional component to be adjusted;
an element adjustment module configured to adjust the target element based on the target element adjustment information.
12. A computing device comprising a memory, a processor, and computer instructions stored on the memory and executable on the processor, wherein the processor implements the steps of the method of any one of claims 1-10 when executing the computer instructions.
13. A computer-readable storage medium storing computer instructions, which when executed by a processor, perform the steps of the method of any one of claims 1 to 10.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110956642.9A CN113656736B (en) | 2021-08-19 | 2021-08-19 | Data processing method and device |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110956642.9A CN113656736B (en) | 2021-08-19 | 2021-08-19 | Data processing method and device |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113656736A true CN113656736A (en) | 2021-11-16 |
CN113656736B CN113656736B (en) | 2024-07-23 |
Family
ID=78492450
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110956642.9A Active CN113656736B (en) | 2021-08-19 | 2021-08-19 | Data processing method and device |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113656736B (en) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114443719A (en) * | 2022-01-29 | 2022-05-06 | 上海哔哩哔哩科技有限公司 | Animation processing method and device |
CN114742020A (en) * | 2022-04-06 | 2022-07-12 | 深圳坐标软件集团有限公司 | Text redrawing method and rich text editor |
CN115562192A (en) * | 2022-09-27 | 2023-01-03 | 北京虎蜥信息技术有限公司 | Assembly process graphical management method, system, terminal and storage medium |
CN117033844A (en) * | 2023-10-07 | 2023-11-10 | 之江实验室 | Canvas element layout method and device, storage medium and electronic equipment |
Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060005114A1 (en) * | 2004-06-25 | 2006-01-05 | Richard Williamson | Procedurally expressing graphic objects for web pages |
CN103336690A (en) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | HTML (Hypertext Markup Language) 5-based text-element drawing method and device |
US20130283192A1 (en) * | 2012-04-19 | 2013-10-24 | Motorola Mobility, Inc. | Generation of Canvas Elements for Drawing Objects |
WO2015139469A1 (en) * | 2014-03-21 | 2015-09-24 | 小米科技有限责任公司 | Webpage adjustment method and device, and electronic device |
CN108388661A (en) * | 2018-03-09 | 2018-08-10 | 北京搜狐新媒体信息技术有限公司 | The generation method and system of advertising creative picture |
CN108573008A (en) * | 2017-06-15 | 2018-09-25 | 北京金山云网络技术有限公司 | Massive point methods of exhibiting and device in a kind of electronic map |
CN109254771A (en) * | 2018-08-24 | 2019-01-22 | 北京国电智深控制技术有限公司 | A kind of monitoring page generation method and device |
CN110569453A (en) * | 2018-03-27 | 2019-12-13 | 优酷网络技术(北京)有限公司 | Path blurring method and device based on canvas element |
CN110955477A (en) * | 2019-10-12 | 2020-04-03 | 中国平安财产保险股份有限公司 | Image self-defining method, device, equipment and storage medium |
CN112783488A (en) * | 2019-11-08 | 2021-05-11 | 腾讯科技(深圳)有限公司 | Business mode canvas drawing method and device |
US20210208562A1 (en) * | 2018-10-31 | 2021-07-08 | Toshiba Mitsubishi-Electric Industrial Systems Corporation | Hybrid rendering hmi terminal device |
-
2021
- 2021-08-19 CN CN202110956642.9A patent/CN113656736B/en active Active
Patent Citations (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060005114A1 (en) * | 2004-06-25 | 2006-01-05 | Richard Williamson | Procedurally expressing graphic objects for web pages |
US20130283192A1 (en) * | 2012-04-19 | 2013-10-24 | Motorola Mobility, Inc. | Generation of Canvas Elements for Drawing Objects |
CN103336690A (en) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | HTML (Hypertext Markup Language) 5-based text-element drawing method and device |
WO2015139469A1 (en) * | 2014-03-21 | 2015-09-24 | 小米科技有限责任公司 | Webpage adjustment method and device, and electronic device |
CN108573008A (en) * | 2017-06-15 | 2018-09-25 | 北京金山云网络技术有限公司 | Massive point methods of exhibiting and device in a kind of electronic map |
CN108388661A (en) * | 2018-03-09 | 2018-08-10 | 北京搜狐新媒体信息技术有限公司 | The generation method and system of advertising creative picture |
CN110569453A (en) * | 2018-03-27 | 2019-12-13 | 优酷网络技术(北京)有限公司 | Path blurring method and device based on canvas element |
CN109254771A (en) * | 2018-08-24 | 2019-01-22 | 北京国电智深控制技术有限公司 | A kind of monitoring page generation method and device |
US20210208562A1 (en) * | 2018-10-31 | 2021-07-08 | Toshiba Mitsubishi-Electric Industrial Systems Corporation | Hybrid rendering hmi terminal device |
CN110955477A (en) * | 2019-10-12 | 2020-04-03 | 中国平安财产保险股份有限公司 | Image self-defining method, device, equipment and storage medium |
CN112783488A (en) * | 2019-11-08 | 2021-05-11 | 腾讯科技(深圳)有限公司 | Business mode canvas drawing method and device |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114443719A (en) * | 2022-01-29 | 2022-05-06 | 上海哔哩哔哩科技有限公司 | Animation processing method and device |
CN114742020A (en) * | 2022-04-06 | 2022-07-12 | 深圳坐标软件集团有限公司 | Text redrawing method and rich text editor |
CN115562192A (en) * | 2022-09-27 | 2023-01-03 | 北京虎蜥信息技术有限公司 | Assembly process graphical management method, system, terminal and storage medium |
CN117033844A (en) * | 2023-10-07 | 2023-11-10 | 之江实验室 | Canvas element layout method and device, storage medium and electronic equipment |
CN117033844B (en) * | 2023-10-07 | 2024-01-16 | 之江实验室 | Canvas element layout method and device, storage medium and electronic equipment |
Also Published As
Publication number | Publication date |
---|---|
CN113656736B (en) | 2024-07-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN113656736A (en) | Data processing method and device | |
US11875010B2 (en) | Systems, methods, and computer-readable media for managing collaboration on a virtual work of art | |
US10984169B2 (en) | Systems, methods, and computer-readable media for providing a dynamic loupe for displayed information | |
US8711147B2 (en) | Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects | |
US11809684B2 (en) | Coordinated display of software application interfaces | |
US20070188496A1 (en) | Graphic display control apparatus and program | |
AU2018241118B2 (en) | Persistent node framework | |
CN114675925B (en) | Configuration image processing method and device, computer equipment and storage medium | |
CN114022604A (en) | Model drawing method and device, electronic equipment and storage medium | |
US9646362B2 (en) | Algorithm for improved zooming in data visualization components | |
CN111467803A (en) | In-game display control method and device, storage medium, and electronic device | |
US11294556B1 (en) | Editing digital images using multi-panel graphical user interfaces | |
US20150084961A1 (en) | Map performance by dynamically reducing map detail | |
WO2022228211A1 (en) | Method and apparatus for constructing visual view | |
CN114797109A (en) | Object editing method and device, electronic equipment and storage medium | |
JP2024506879A (en) | Methods and apparatus, computer equipment and storage media for presenting virtual representations | |
KR102560619B1 (en) | Electronic device providing no-code tool service and method thereof | |
CN114895832B (en) | Object adjustment method, device, electronic equipment and computer readable medium | |
CN116841439B (en) | Display method and device for image pixel grid, computer equipment and storage medium | |
WO2023070538A1 (en) | Information display method, system, electronic device, and computer-readable storage medium | |
AU2013299742B2 (en) | Manipulating graphical objects | |
US20240004534A1 (en) | Click and swap | |
KR101075420B1 (en) | Tabletop interface apparatus, collaboration control apparatus, tabletop interface based collaboration system and its method | |
CN116700704A (en) | Image processing method, device, storage medium and electronic equipment | |
CN117093069A (en) | Cross-dimension interaction method, device and equipment for hybrid application |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |