CN114816202A - Method, device, equipment and medium for chart cross-boundary interaction in tab component - Google Patents
Method, device, equipment and medium for chart cross-boundary interaction in tab component Download PDFInfo
- Publication number
- CN114816202A CN114816202A CN202210499289.0A CN202210499289A CN114816202A CN 114816202 A CN114816202 A CN 114816202A CN 202210499289 A CN202210499289 A CN 202210499289A CN 114816202 A CN114816202 A CN 114816202A
- Authority
- CN
- China
- Prior art keywords
- tab
- canvas
- chart
- target
- height
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 42
- 230000003993 interaction Effects 0.000 title claims abstract description 30
- 238000010586 diagram Methods 0.000 claims abstract description 62
- 238000012544 monitoring process Methods 0.000 claims abstract description 12
- 238000004590 computer program Methods 0.000 claims description 13
- 230000008569 process Effects 0.000 claims description 11
- 238000004364 calculation method Methods 0.000 claims description 4
- 238000012937 correction Methods 0.000 abstract description 10
- 238000006243 chemical reaction Methods 0.000 abstract description 5
- 230000009471 action Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000002904 solvent Substances 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Abstract
The embodiment of the invention relates to the technical field of reports, and discloses a method, a device, equipment and a medium for chart cross-boundary interaction in a tab component. The method comprises the following steps: establishing an X-Y coordinate system for the canvas and the tab respectively; defining, the coordinates of the tab and the upper left corner of the target diagram in the X-Y coordinate system of the canvas, and defining the coordinates of the target diagram in the upper left corner of the X-Y coordinate system of the tab; monitoring the dragging operation of the target diagram, and judging that the whole target diagram is dragged into the tab if a first group of conditions are met when the target diagram is dragged into the tab from the canvas; and when the target diagram is dragged into the canvas from the tab, if the second group of conditions are not met, judging that the target diagram exceeds the tab in whole. By implementing the embodiment of the invention, the final attribution container of the chart can be determined through the conversion of the reference object, and meanwhile, when the chart is dragged into the canvas, the coordinate correction of the chart can be realized so as to ensure that the chart is positioned in the canvas.
Description
Technical Field
The invention relates to the technical field of reports, in particular to a method, a device, equipment and a medium for chart cross-boundary interaction in a tab component.
Background
In the process of report design, a canvas and a tab component are often used, wherein the canvas is a container and has a boundary, and a diagram (a report embodiment) in the canvas can only move within the range.
tab is a chart component that can:
1. dragging the component into a canvas in a component library directly;
2. load any chart other than itself (whether a chart in the canvas is dragged into tab or a chart in the component library is dragged into tab);
3. tab is also a container with its own boundaries within which the chart can be moved or dragged into the canvas.
Since the canvas and tab are containers, the diagram can move in the two containers, but the reference object changes during the movement (when the diagram in the canvas is dragged, the moved reference object is the canvas, and when the diagram in tab is dragged, the reference object is the tab).
The canvas and the tab can be understood as different layers, both of which have own coordinate systems, when a reference object is changed, the attribution of a container of the moved diagram is difficult to determine, and when the reference object is changed, if the attribution of the container of the moved diagram cannot be determined, the moved diagram cannot be displayed easily. Because it does not belong to the canvas or the content inside the tab, it cannot be assigned to the corresponding coordinates, and when the diagram is dragged into the canvas, if it cannot be determined that its container belongs, it cannot be automatically corrected when it exceeds the canvas boundary.
Disclosure of Invention
Aiming at the defects, the embodiment of the invention discloses a method, a device, equipment and a medium for chart cross-boundary interaction in a tab component, which can realize the movement interlude of a chart in a tab and a canvas and can determine the attribution of a moved container.
The first aspect of the embodiment of the invention discloses a diagram cross-boundary interaction method in a tab component, which comprises the following steps:
establishing X-Y coordinate systems for the canvas and the tab respectively, defining coordinates of the upper left corners of the canvas and the tab in the respective X-Y coordinate systems as origin points, wherein each X-Y coordinate system is a positive value from the origin point to the right and is a positive value from the origin point to the bottom;
defining the coordinates of the upper left corner of the tab and the target chart in the X-Y coordinate system of the canvas as (tx, ty), (X0, Y0); defining the coordinates of the upper left corner of the target diagram in an X-Y coordinate system of tab as (X1, Y1);
monitoring a dragging operation on a target chart, and if all the following conditions are met when the target chart is dragged into tab from a canvas:
tx≤x0；
ty≤y0；
tx+tWidth≥x0+Width；
ty+tHeight≥y0+Height；
judging that the whole target chart is dragged into tab;
when the target chart is dragged from tab into canvas, if all of the following conditions are not met:
x1≥0；
y1≥0；
x1+Width＜tWidth；
y1+Height＜tHeight；
judging that the whole target chart exceeds the tab;
wherein, tWidth and tHeight are the width and height of tab respectively; width and Height are the Width and Height of the target chart, respectively.
As a preferred embodiment, in the first aspect of the embodiment of the present invention, after the target chart is dragged from tab to canvas tab, it is calculated whether any one of the following conditions is satisfied:
condition one, y2 is less than or equal to 0;
the second condition is that y2+ Height is more than or equal to cHeight;
the condition three, x2 is less than or equal to 0;
if x2+ Width is more than or equal to cWidth, the coordinates of the graph are shown;
wherein, cWidth and cHeight are respectively the width and height of the canvas, x2 is x1+ tx, y2 is x1+ ty;
and if any one condition is satisfied, automatically correcting the coordinates of the target diagram.
As a preferred embodiment, in the first aspect of the embodiment of the present invention, the correcting process is: when the condition is satisfied, aligning an upper edge of a target chart with an upper edge of the canvas; aligning a lower edge of a target chart with a lower edge of the canvas when the condition is established; aligning a left edge of a target chart with a left edge of the canvas when the condition three is true; when the condition is four-up, a right edge of the target chart is aligned with a right edge of the canvas.
As a preferred embodiment, in the first aspect of the embodiment of the present invention, if the target chart is not a rectangle, the coordinate of the upper left corner of the minimum bounding rectangle of the target chart, the width and the height are taken as the calculation parameters when it is dragged.
The second aspect of the embodiment of the invention discloses a chart cross-boundary interaction device in a tab component, which comprises:
the system comprises a creating unit, a calculating unit and a judging unit, wherein the creating unit is used for respectively establishing an X-Y coordinate system for a canvas and a tab, defining the coordinates of the upper left corners of the canvas and the tab in the respective X-Y coordinate system as an origin, and each X-Y coordinate system is a positive value from the origin to the right and is a positive value from the origin to the bottom;
the defining unit is used for defining that in an X-Y coordinate system of the canvas, coordinates of the tab and the upper left corner of the target diagram are (tx, ty), (X0 and Y0); defining the coordinates of the upper left corner of the target diagram in an X-Y coordinate system of tab as (X1, Y1);
the first judgment unit is used for monitoring the dragging operation of the target chart, and when the target chart is dragged into tab from the canvas, if all the following conditions are met:
tx≤x0；
ty≤y0；
tx+tWidth≥x0+Width；
ty+tHeight≥y0+Height；
judging that the whole target chart is dragged into tab;
a second judging unit, configured to, when the target chart is dragged from tab to the canvas, if all of the following conditions are not satisfied:
x1≥0；
y1≥0；
x1+Width＜tWidth；
y1+Height＜tHeight；
judging that the whole target chart is not in the tab;
wherein, tWidth and tHeight are the width and height of tab respectively; width and Height are the Width and Height of the target chart, respectively.
A third aspect of an embodiment of the present invention discloses an electronic device, including: a memory storing executable program code; a processor coupled with the memory; the processor calls the executable program code stored in the memory for executing the chart cross-boundary interaction method in the tab component disclosed by the first aspect of the embodiment of the invention.
A fourth aspect of the present invention discloses a computer-readable storage medium storing a computer program, where the computer program enables a computer to execute a graph cross-boundary interaction method in a tab component disclosed in the first aspect of the present invention.
A fifth aspect of the embodiments of the present invention discloses a computer program product, which, when running on a computer, causes the computer to execute a method for chart cross-boundary interaction in a tab component disclosed in the first aspect of the embodiments of the present invention.
A sixth aspect of the present invention discloses an application publishing platform, where the application publishing platform is configured to publish a computer program product, and when the computer program product runs on a computer, the computer is enabled to execute a graph cross-boundary interaction method in a tab component disclosed in the first aspect of the present invention.
Compared with the prior art, the embodiment of the invention has the following beneficial effects:
the embodiment of the invention can realize free movement and interpenetration of the chart in the canvas and tab, can determine the final attribution container of the chart through the conversion of the reference object, and can realize coordinate correction when the chart is dragged into the canvas so as to ensure that the chart is positioned in the canvas.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to these drawings without creative efforts.
FIG. 1 is a flow chart diagram of a chart cross-boundary interaction method in a tab component according to an embodiment of the present invention;
FIG. 2 is a relational diagram of a canvas, tab, and chart disclosed in an embodiment of the present invention;
FIG. 3 is a diagram illustrating a diagram dragged from tab to canvas according to an embodiment of the present disclosure;
FIG. 4 is a diagram I illustrating a diagram before coordinate correction after dragging the diagram from tab to canvas according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of FIG. 4 after coordinate correction;
FIG. 6 is a schematic diagram II of the diagram disclosed in the embodiment of the present invention before coordinate correction after being dragged from tab to canvas;
FIG. 7 is a diagram illustrating the corrected coordinates of FIG. 6;
FIG. 8 is a schematic structural diagram of a chart cross-border interaction device in a tab component according to an embodiment of the present invention;
fig. 9 is a schematic structural diagram of an electronic device according to an embodiment of the disclosure.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that the terms "first", "second", "third", "fourth", and the like in the description and the claims of the present invention are used for distinguishing different objects, and are not used for describing a specific order. The terms "comprises," "comprising," and any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
The embodiment of the invention discloses a method, a device, equipment and a medium for chart cross-boundary interaction in a tab component, which can realize free movement and interpenetration of a chart in a canvas and a tab, can determine a final attribution container of the chart through conversion of a reference object, and can realize coordinate correction when the chart is dragged into the canvas to ensure that the chart is positioned in the canvas, and are described in detail in combination with the attached drawings.
Example one
Referring to fig. 1, fig. 1 is a flowchart illustrating a chart cross-border interaction method in a tab component according to an embodiment of the present invention. As shown in FIG. 1, the chart cross-boundary interaction method in the tab component comprises the following steps:
s110, establishing X-Y coordinate systems for the canvas and the tab respectively, defining coordinates of the upper left corners of the canvas and the tab in the respective X-Y coordinate systems as origins, wherein each X-Y coordinate system is positive values from the origin to the right, and is positive values from the origin to the bottom.
Referring to fig. 2, tab is a diagram component, which can be directly dragged into the canvas from the component library, or can load any diagram other than the diagram, and whether the diagram is dragged into the tab from the canvas (in the present invention, tab refers to a tab component located in the canvas), or the diagram is dragged into the tab from the component library, or correspondingly, the diagram in the tab can be dragged into the canvas.
Since the canvas and tab belong to different containers, which are equivalent to having respective coordinate systems, in the preferred embodiment of the present invention, as shown in fig. 2, X-Y coordinate systems are established for the canvas and tab, respectively, and for the sake of calculation, the coordinates of the upper left corner of the canvas and tab in the respective X-Y coordinate systems are defined as the coordinates of the origin, and each X-Y coordinate system is positive from the origin to the right and positive from the origin to the bottom.
Of course, in other embodiments, a related coordinate system may be established with any point of the canvas and tab as an origin, and meanwhile, any direction may also be defined as a positive value, for example, a planar coordinate system may also be established with the coordinate of the lower right corner of the canvas and tab as the origin, and then the corresponding origin is taken to the right as the positive value of the X axis, and the origin is taken to the upper as the positive value of the Y axis.
S120, defining that in an X-Y coordinate system of the canvas, coordinates of the tab and the upper left corner of the target chart are (tx, ty), (X0, Y0) respectively; the coordinates of the upper left corner of the target diagram, defined in the X-Y coordinate system of tab, are (X1, Y1).
The target chart means a chart to be moved. Because of the coordinate transformation involved, in the preferred embodiment of the present invention, the coordinates of tab and target diagram in the X-Y coordinate system of the canvas are defined, for example, the coordinates of the upper left corner of tab and target diagram are (tx, ty), (X0, Y0), the specific values of both can be determined by specific size, and also can be determined by the number of pixels, and the values of these specific parameters can be collected during the monitoring process of the canvas, tab and target diagram.
Of course, no matter which value taking mode is adopted, the values related to the size in the embodiment of the invention all adopt the same standard, and exemplarily, the collection is more convenient through the number of the pixel points, so that the number of the pixel points can be adopted.
And coordinates (X1, Y1) of the coordinates at the upper left corner of the target chart in the X-Y coordinate system of tab are defined. Because tab and canvas are generally rectangular, the coordinates of the pixel points in the upper left corner can be easily determined, and the target chart can be in different shapes.
S130, monitoring the dragging operation of the target chart, and judging that the whole target chart is dragged into the tab if all conditions of the first group of conditions are met (all conditions of the first group of conditions are met) when the target chart is dragged into the tab from the canvas.
The first set of conditions is:
tx≤x0；
ty≤y0；
tx+tWidth≥x0+Width；
ty+tHeight≥y0+Height；
wherein, tWidth and tHeight are the width and height of tab respectively; width and Height are the Width and Height of the target chart, respectively.
The snoop operation can be done using watch in the Vue framework, which can snoop the actions of the operator at any step. The triggering of the monitoring operation may be a manual triggering, for example, the monitoring operation is realized by clicking a monitoring button, or an automatic triggering, that is, the monitoring operation may be triggered after the canvas is opened and tab is dragged.
Referring to fig. 2, when a target chart in the canvas is dragged into tab, it is determined whether the container to which the target chart ultimately belongs is the canvas or tab, and the reference object is the canvas, so the coordinates of the target chart and tab used are relative to the plane coordinate system of the canvas. The four formulas described above are used to determine whether the four corners (i.e., the coordinates of the four vertices) of the target graph are all located in tab.
It can be understood that when the target diagram is in the initial state, when none of the four conditions is satisfied, it is indicated that no part of the target diagram is located in tab, and it is determined that the target diagram is located in the canvas.
S140, when the target chart is dragged into the canvas from the tab, if the following second group of conditions are not met (namely, the conditions are not met), judging that the target chart exceeds the tab and is not in the tab.
The second set of conditions is:
x1≥0；
y1≥0；
x1+Width＜tWidth；
y1+Height＜tHeight；
referring to fig. 3, when the target diagram in tab is dragged into the canvas, it is determined whether the container to which the target diagram ultimately belongs is the canvas or tab, and the reference object is tab, so the coordinates of the target diagram and tab used are relative to the plane coordinate system of tab. The four formulas described above are used to determine whether the four corners of the target graph are all located in tab.
If one corner of the four corners of the target chart is located in the tab, the target chart is not completely located in the canvas, and the target chart can be determined to be dragged into the canvas from the tab only when the four corners of the target chart are not located in the tab, namely the four formulas are not established.
It can be understood that: when the target graph is in the initial state and all the four conditions are satisfied, the target graph is entirely positioned in the tab.
In summary, when the target chart is arbitrarily moved and inserted in the canvas and tab, and it is finally determined whether the container to which the target chart belongs is in the canvas or tab, the steps S130 and S140 are completed.
Since the action of step S140 causes the conversion of the reference object, when the target diagram is dragged from tab into the canvas, the target diagram may be out of the container range of the canvas, so in this case, the final position of the target diagram needs to be corrected.
In particular, the amount of the solvent to be used,
after the target chart is dragged into the canvas tab from the tab, calculating whether any one of the following conditions is satisfied:
condition one, y2 is less than or equal to 0;
the second condition is that y2+ Height is more than or equal to cHeight;
the condition three, x2 is less than or equal to 0;
if x2+ Width is more than or equal to cWidth, the coordinates of the graph are shown;
wherein, cWidth and chheight are respectively the width and height of the canvas, and the coordinate of the position of the upper left corner of the target chart in tab is converted into the coordinate in the canvas due to the conversion of the reference object, and the converted coordinate of the upper left corner of the target chart is marked as (x2, y2), wherein x2 is x1+ tx, and y2 is x1+ ty;
and if any one condition is satisfied, automatically correcting the coordinates of the target diagram.
The specific correction process is as follows:
when the condition is established, the target chart is moved downward in the Y-axis direction of the canvas so that the upper edge of the target chart is aligned with the upper edge of the canvas, as shown in fig. 4 and 5.
When the condition is met, the target chart is moved upward in the Y-axis direction of the canvas such that the lower edge of the target chart is aligned with the lower edge of the canvas.
When the condition three is met, moving the target chart to the right along the X-axis of the canvas so that the left edge of the target chart is aligned with the left edge of the canvas;
when the condition is four-up, the target chart is moved to the left in the X-axis direction of the canvas so that the right edge of the target chart is aligned with the right edge of the canvas.
Of course, both of the above conditions may be satisfied, and for example, if the configuration shown in fig. 6 is such that both of the first condition and the third condition are satisfied, the movement is performed in such a manner that the first condition and the third condition are moved separately, and the result after correction is as shown in fig. 7.
The correction process is automatically completed by the terminal based on the monitoring result of Vue, and after the operator releases his/her hand from dragging the target chart, the correction work is automatically performed when the above-mentioned arbitrary conditions are satisfied.
Example two
Referring to fig. 8, fig. 8 is a schematic structural diagram of a graph cross-border interaction device in a tab component according to an embodiment of the present invention. As shown in FIG. 8, the chart cross-boundary interaction device in the tab component can comprise
The creating unit 210 is configured to create X-Y coordinate systems for the canvas and the tab, respectively, define coordinates of upper left corners of the canvas and the tab in the respective X-Y coordinate systems as origins, and define each X-Y coordinate system as a positive value from the origin to the right and as a positive value from the origin to the bottom;
a defining unit 220, configured to define, in the X-Y coordinate system of the canvas, coordinates of the tab and the upper left corner of the target diagram as (tx, ty), (X0, Y0), respectively; defining the coordinates of the upper left corner of the target diagram in an X-Y coordinate system of tab as (X1, Y1);
the first determining unit 230 is configured to monitor a drag operation on a target chart, and when the target chart is dragged from a canvas into a tab, if all of the following conditions are satisfied:
tx≤x0；
ty≤y0；
tx+tWidth≥x0+Width；
ty+tHeight≥y0+Height；
judging that the whole target chart is dragged into tab;
a second judging unit 240, configured to, when the target chart is dragged from tab to the canvas, if all of the following conditions are not satisfied:
x1≥0；
y1≥0；
x1+Width＜tWidth；
y1+Height＜tHeight；
judging that the whole target chart is not in the tab;
wherein, tWidth and tHeight are the width and height of tab respectively; width and Height are the Width and Height of the target chart, respectively.
Preferably, after the target chart is dragged from tab to canvas tab, whether any one of the following conditions is satisfied is calculated:
condition one, y2 is less than or equal to 0;
the second condition is that y2+ Height is more than or equal to cHeight;
the condition three, x2 is less than or equal to 0;
if x2+ Width is more than or equal to cWidth, the coordinates of the graph are shown;
wherein, cWidth and chheight are respectively the width and the height of the canvas, x2 ═ x1+ tx, y2 ═ x1+ ty;
and if any one condition is satisfied, automatically correcting the coordinates of the target diagram.
As a preferred embodiment, in the first aspect of the embodiment of the present invention, the correcting process is: when the condition is satisfied, aligning an upper edge of a target chart with an upper edge of the canvas; aligning a lower edge of a target chart with a lower edge of the canvas when the condition is established; aligning a left edge of a target chart with a left edge of the canvas when the condition three is true; when the condition is four-up, a right edge of the target chart is aligned with a right edge of the canvas.
Preferably, if the target chart is not a rectangle, the coordinate of the upper left corner of the minimum bounding rectangle of the target chart, the width and the height are taken as the calculation parameters when the target chart is dragged.
EXAMPLE III
Referring to fig. 9, fig. 9 is a schematic structural diagram of an electronic device according to an embodiment of the disclosure. As shown in fig. 9, the electronic device may include:
a memory 310 storing executable program code;
a processor 320 coupled to the memory 310;
in which, the processor 320 calls the executable program code stored in the memory 310 to execute part or all of the steps of the chart cross-border interaction method in a tab component in the first embodiment.
The embodiment of the invention discloses a computer-readable storage medium which stores a computer program, wherein the computer program enables a computer to execute part or all of steps in a graph cross-boundary interaction method in a tab component in the first embodiment.
The embodiment of the invention also discloses a computer program product, wherein when the computer program product runs on a computer, the computer is enabled to execute part or all of the steps in the chart cross-boundary interaction method in the tab component in the first embodiment.
The embodiment of the invention also discloses an application publishing platform, wherein the application publishing platform is used for publishing the computer program product, and when the computer program product runs on a computer, the computer is enabled to execute part or all of the steps in the graph cross-boundary interaction method in the tab component in the first embodiment.
In various embodiments of the present invention, it should be understood that the sequence numbers of the processes do not mean the execution sequence necessarily in order, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated units, if implemented as software functional units and sold or used as a stand-alone product, may be stored in a computer accessible memory. Based on such understanding, the technical solution of the present invention, which is a part of or contributes to the prior art in essence, or all or part of the technical solution, can be embodied in the form of a software product, which is stored in a memory and includes several requests for causing a computer device (which may be a personal computer, a server, a network device, or the like, and may specifically be a processor in the computer device) to execute part or all of the steps of the method according to the embodiments of the present invention.
In the embodiments provided herein, it should be understood that "B corresponding to a" means that B is associated with a from which B can be determined. It should also be understood, however, that determining B from a does not mean determining B from a alone, but may also be determined from a and/or other information.
Those of ordinary skill in the art will appreciate that some or all of the steps of the methods of the embodiments may be implemented by hardware instructions associated with a program, which may be stored in a computer-readable storage medium, such as a Read-Only Memory (ROM), a Random Access Memory (RAM), a Programmable Read-Only Memory (PROM), an Erasable Programmable Read-Only Memory (EPROM), a One-time Programmable Read-Only Memory (OTPROM), an Electrically Erasable Programmable Read-Only Memory (EEPROM), a Compact Disc Read-Only Memory (CD-ROM), or other Memory, a CD-ROM, or other disk, or a combination thereof, A tape memory, or any other medium readable by a computer that can be used to carry or store data.
The method, the device, the equipment and the medium for chart cross-boundary interaction in the tab component disclosed by the embodiment of the invention are introduced in detail, a specific example is applied in the text to explain the principle and the implementation mode of the invention, and the description of the embodiment is only used for helping to understand the method and the core idea of the invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (7)
1. A method for chart cross-boundary interaction in a tab component is characterized by comprising the following steps:
establishing X-Y coordinate systems for the canvas and the tab respectively, defining coordinates of the upper left corners of the canvas and the tab in the respective X-Y coordinate systems as origin points, wherein each X-Y coordinate system is a positive value from the origin point to the right and is a positive value from the origin point to the bottom;
defining the coordinates of the upper left corner of the tab and the target chart in the X-Y coordinate system of the canvas as (tx, ty), (X0, Y0); defining the coordinates of the upper left corner of the target diagram in an X-Y coordinate system of tab as (X1, Y1);
monitoring a dragging operation on a target chart, and if all the following conditions are met when the target chart is dragged into tab from a canvas:
tx≤x0；
ty≤y0；
tx+tWidth≥x0+Width；
ty+tHeight≥y0+Height；
judging that the whole target chart is dragged into tab;
when the target chart is dragged from tab into canvas, if all of the following conditions are not met:
x1≥0；
y1≥0；
x1+Width＜tWidth；
y1+Height＜tHeight；
judging that the whole target chart exceeds the tab;
wherein, tWidth and tHeight are the width and height of tab respectively; width and Height are the Width and Height of the target chart, respectively.
2. The method of chart cross-boundary interaction in tab component of claim 1, characterized in that after the target chart is dragged from tab to canvas tab, it is calculated whether any one of the following conditions is satisfied:
condition one, y2 is less than or equal to 0;
the second condition is that y2+ Height is more than or equal to cHeight;
the condition three, x2 is less than or equal to 0;
if x2+ Width is more than or equal to cWidth, the coordinates of the graph are shown;
wherein, cWidth and cHeight are respectively the width and height of the canvas, x2 is x1+ tx, y2 is x1+ ty;
and if any one condition is satisfied, automatically correcting the coordinates of the target diagram.
3. The method of chart cross-boundary interaction in tab component of claim 2, wherein the process of correcting is: when the condition is satisfied, aligning an upper edge of a target chart with an upper edge of the canvas; aligning a lower edge of a target chart with a lower edge of the canvas when the condition is established; aligning a left edge of a target chart with a left edge of the canvas when the condition three is true; when the condition is four-up, a right edge of the target chart is aligned with a right edge of the canvas.
4. The method for interaction across chart boundaries in tab component according to any one of claims 1-3, characterized in that if the target chart is not a rectangle, the coordinate of the upper left corner, the width and the height of the minimum bounding rectangle of the target chart are used as the calculation parameters when the target chart is dragged.
5. A chart cross-border interaction device in a tab component, comprising:
the creating unit is used for respectively creating an X-Y coordinate system for the canvas and the tab, defining the coordinates of the upper left corners of the canvas and the tab in the respective X-Y coordinate system as an origin, wherein each X-Y coordinate system is positive from the origin to the right and is positive from the origin to the bottom;
the defining unit is used for defining that in an X-Y coordinate system of the canvas, coordinates of the tab and the upper left corner of the target diagram are (tx, ty), (X0 and Y0); defining the coordinates of the upper left corner of the target diagram in an X-Y coordinate system of tab as (X1, Y1);
the first judgment unit is used for monitoring the dragging operation of the target chart, and when the target chart is dragged into tab from the canvas, if all the following conditions are met:
tx≤x0；
ty≤y0；
tx+tWidth≥x0+Width；
ty+tHeight≥y0+Height；
judging that the whole target chart is dragged into tab;
a second judging unit, configured to, when the target chart is dragged from tab to the canvas, if all of the following conditions are not satisfied:
x1≥0；
y1≥0；
x1+Width＜tWidth；
y1+Height＜tHeight；
judging that the whole target chart is not in the tab;
wherein, tWidth and tHeight are the width and height of tab respectively; width and Height are the Width and Height of the target chart, respectively.
6. An electronic device, comprising: a memory storing executable program code; a processor coupled with the memory; the processor calls the executable program code stored in the memory for executing the chart cross-boundary interaction method in a tab component of any one of claims 1 to 4.
7. A computer-readable storage medium storing a computer program, wherein the computer program causes a computer to execute the chart cross-boundary interaction method in a tab component according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210499289.0A CN114816202A (en) | 2022-05-09 | 2022-05-09 | Method, device, equipment and medium for chart cross-boundary interaction in tab component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210499289.0A CN114816202A (en) | 2022-05-09 | 2022-05-09 | Method, device, equipment and medium for chart cross-boundary interaction in tab component |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114816202A true CN114816202A (en) | 2022-07-29 |
Family
ID=82513955
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210499289.0A Pending CN114816202A (en) | 2022-05-09 | 2022-05-09 | Method, device, equipment and medium for chart cross-boundary interaction in tab component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114816202A (en) |
Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070242082A1 (en) * | 2006-03-23 | 2007-10-18 | Arthur Lathrop | Scalable vector graphics, tree and tab as drag and drop objects |
| US20130162655A1 (en) * | 2008-08-25 | 2013-06-27 | Adobe Systems Incorporated | Systems and Methods for Creating, Displaying, and Using Hierarchical Objects with Nested Components |
| CN106162302A (en) * | 2015-04-22 | 2016-11-23 | Tcl集团股份有限公司 | Method of combination, device and the intelligent television at the main interface of a kind of Launcher |
| CN107168961A (en) * | 2016-03-07 | 2017-09-15 | 阿里巴巴集团控股有限公司 | The method for exhibiting data and device of chart |
| CN108052365A (en) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | The component generation method and device of user interface |
| US20190065159A1 (en) * | 2017-08-30 | 2019-02-28 | Salesforce.Com, Inc. | Interactions layer in a web application builder framework |
| CN110377861A (en) * | 2019-07-23 | 2019-10-25 | 腾讯科技（深圳）有限公司 | Element interactive approach, device, storage medium and computer equipment between scene |
| CN111263231A (en) * | 2018-11-30 | 2020-06-09 | 西安诺瓦星云科技股份有限公司 | Window setting method, device, system and computer readable medium |
| CN113656019A (en) * | 2021-07-27 | 2021-11-16 | 克拉玛依油城数据有限公司 | Method for developing data large screen based on dragging mode |
| CN113805781A (en) * | 2021-08-05 | 2021-12-17 | 北京房江湖科技有限公司 | Chart component arrangement method, device, equipment, storage medium and program product |
| CN113947650A (en) * | 2021-09-30 | 2022-01-18 | 完美世界(北京)软件科技发展有限公司 | Animation processing method, animation processing device, electronic equipment and medium |
| CN114020233A (en) * | 2022-01-06 | 2022-02-08 | 广州朗国电子科技股份有限公司 | Meeting whiteboard window mode writing adaptation method, system, device and medium |
| US20220108276A1 (en) * | 2020-10-05 | 2022-04-07 | Lucid Software, Inc. | Online collaboration platform |
-
2022
- 2022-05-09 CN CN202210499289.0A patent/CN114816202A/en active Pending
Patent Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070242082A1 (en) * | 2006-03-23 | 2007-10-18 | Arthur Lathrop | Scalable vector graphics, tree and tab as drag and drop objects |
| US20130162655A1 (en) * | 2008-08-25 | 2013-06-27 | Adobe Systems Incorporated | Systems and Methods for Creating, Displaying, and Using Hierarchical Objects with Nested Components |
| CN106162302A (en) * | 2015-04-22 | 2016-11-23 | Tcl集团股份有限公司 | Method of combination, device and the intelligent television at the main interface of a kind of Launcher |
| CN107168961A (en) * | 2016-03-07 | 2017-09-15 | 阿里巴巴集团控股有限公司 | The method for exhibiting data and device of chart |
| US20190065159A1 (en) * | 2017-08-30 | 2019-02-28 | Salesforce.Com, Inc. | Interactions layer in a web application builder framework |
| CN108052365A (en) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | The component generation method and device of user interface |
| CN111263231A (en) * | 2018-11-30 | 2020-06-09 | 西安诺瓦星云科技股份有限公司 | Window setting method, device, system and computer readable medium |
| CN110377861A (en) * | 2019-07-23 | 2019-10-25 | 腾讯科技（深圳）有限公司 | Element interactive approach, device, storage medium and computer equipment between scene |
| US20220108276A1 (en) * | 2020-10-05 | 2022-04-07 | Lucid Software, Inc. | Online collaboration platform |
| CN113656019A (en) * | 2021-07-27 | 2021-11-16 | 克拉玛依油城数据有限公司 | Method for developing data large screen based on dragging mode |
| CN113805781A (en) * | 2021-08-05 | 2021-12-17 | 北京房江湖科技有限公司 | Chart component arrangement method, device, equipment, storage medium and program product |
| CN113947650A (en) * | 2021-09-30 | 2022-01-18 | 完美世界(北京)软件科技发展有限公司 | Animation processing method, animation processing device, electronic equipment and medium |
| CN114020233A (en) * | 2022-01-06 | 2022-02-08 | 广州朗国电子科技股份有限公司 | Meeting whiteboard window mode writing adaptation method, system, device and medium |
Non-Patent Citations (1)
| Title |
|---|
| 邓其军;周洪;鲁觉;: "面向图形对象的配电网单线图绘制与使用", 电力自动化设备, no. 07, pages 101 - 104 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110215690B (en) | Visual angle switching method and device in game scene and electronic equipment | |
| WO2023226676A2 (en) | Unmanned forklift truck high shelf deliver method, apparatus, and device, and storage medium | |
| CN108664461B (en) | Automatic filling method and device for webpage form | |
| CN108074237B (en) | Image definition detection method and device, storage medium and electronic equipment | |
| US20230338842A1 (en) | Rendering processing method and electronic device | |
| CN113870256B (en) | PCB defect evaluation method, device, equipment and medium | |
| CN113870189A (en) | Industrial product circular detection method and device | |
| CN111553914B (en) | Vision-based goods detection method and device, terminal and readable storage medium | |
| CN113420355B (en) | Floor processing method and device and electronic equipment | |
| CN114241105A (en) | Interface rendering method, device, equipment and computer readable storage medium | |
| CN114816202A (en) | Method, device, equipment and medium for chart cross-boundary interaction in tab component | |
| CN114266524A (en) | Library area task arranging method, device, equipment and storage medium | |
| CN115249324A (en) | Method and device for determining position to be stacked in stack shape and computing equipment | |
| CN113262474A (en) | Display control method and device in game and electronic equipment | |
| CN110458202B (en) | Picture processing method, device and equipment and computer readable storage medium | |
| JP2809762B2 (en) | Figure shaping device | |
| CN110427885A (en) | Detection method, device and the computer readable storage medium of nameplate | |
| CN110675384B (en) | Image processing method and device | |
| CN107609397B (en) | Method and device for detecting malicious behavior of application program in android system | |
| CN114550062A (en) | Method and device for determining moving object in image, electronic equipment and storage medium | |
| CN113971738A (en) | Image detection method, image detection device, electronic equipment and storage medium | |
| CN109343852B (en) | Method and device for displaying frame pictures of operation interface | |
| CN113516721A (en) | Multi-camera-based measurement method and device and storage medium | |
| CN112118478B (en) | Text processing method and device, electronic equipment and storage medium | |
| CN112115941B (en) | Fire detection method, device, equipment and storage medium |
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 |