Canvas-based positioning method and device

Abstract

The invention discloses a canvas-based positioning method and device, and relates to the technical field of software. The method comprises the following steps: determining a movable window configured on a thumbnail of a canvas; when it is detected that the visual range of the browser is changed or the size of the canvas is changed, the size information of the movable window is updated according to the latest size information of the visual range, the latest size information of the canvas and the latest size information of the thumbnail of the canvas; and positioning the position of the visual range of the browser on the canvas according to the content displayed in the updated movable window by the thumbnail of the canvas. The technical problem that in the prior art, when the amount of data needing to be displayed is large and the size of the canvas exceeds the visual range of a browser, the designated position of the canvas is difficult to locate is solved.

Description

Technical Field

[0001] The present application relates to the field of software technology, and in particular to the field of interface design of a front-end application, and specifically to a canvas-based positioning method and device. Background Art

[0002] In the information world, data is everywhere. In order to help users better understand the meaning, trends and correlations of data and make more informed decisions, data visualization technology is becoming more and more popular.

[0003] Data visualization technology refers to presenting data to users in the form of charts, images or other visual elements. In Web (Web Application, referred to as Web App, is an application that runs over the Internet) applications, it is generally achieved through Canvas technology.

[0004] Canvas is a tag in HTML5 that draws images through JavaScript and is widely used in the implementation of data visualization technology. Canvas is equivalent to a canvas, and JavaScript is equivalent to a brush. The combination provides powerful drawing functions and can be used to create various tables, images, etc. The more common ones are line charts, bar charts, pie charts, radar charts, etc.

[0005] In certain images, such as radar charts or tree charts, the size of the image is positively correlated with the amount of data, provided that the node spacing is appropriate. When the amount of data is large or the browser's visible range changes, the size of the canvas will exceed the current browser's visible range. At this point, how to help users quickly browse the entire canvas and move to the target location becomes a problem that developers need to solve. Summary of the invention

[0006] The present application provides a canvas-based positioning method and device to at least solve the technical problem in the prior art that it is difficult to locate the specified position of the canvas when the amount of data to be displayed is large and the size of the canvas exceeds the visible range of the browser.

[0007] According to one aspect of the present application, a canvas-based positioning method is provided, comprising: determining a movable window configured on a thumbnail of a canvas, wherein the movable window is configured such that, during a process of moving on the thumbnail of the canvas, the content displayed in the movable window remains consistent with the content displayed on the canvas within a visible range of a browser; when it is detected that the visible range of the browser has changed or the size of the canvas has changed, updating the size information of the movable window according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas; and locating the position of the visible range of the browser on the canvas according to the content displayed in the thumbnail of the canvas in the updated movable window.

[0008] Optionally, determining a movable window configured on the thumbnail of the canvas includes: determining the initial size information of the movable window based on the initial size information of the visible range of the browser and the initial size information of the thumbnail; determining the initial position information of the movable window based on the initial position information of the first type of vertices of the canvas, the initial position information of the second type of vertices of the canvas, the initial size information of the canvas, and the initial size information of the thumbnail.

[0009] Optionally, in the canvas-based positioning method provided in the present application, the position of the visible range of the browser on the canvas is positioned according to the content displayed by the thumbnail of the canvas in the updated movable window, including: obtaining the scaling ratio between the canvas and the thumbnail; determining the positioning movement distance between the updated movable window and the canvas according to the scaling ratio; and positioning the position of the visible range of the browser on the canvas according to the positioning movement distance and the content displayed by the thumbnail of the canvas in the updated movable window.

[0010] Optionally, in the canvas-based positioning method provided in the present application, the positioning movement distance between the updated movable window and the canvas is determined according to the zoom ratio, including: for the touch instruction corresponding to the movable window, determining the moving position and moving distance of the movable window according to the zoom ratio; determining the forward positioning movement distance according to the moving position and moving distance of the movable window, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the forward positioning movement distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the movable window moves.

[0011] Optionally, in the canvas-based positioning method provided in the present application, the positioning movement distance between the updated movable window and the canvas is determined according to the zoom ratio, including: responding to a touch instruction corresponding to the canvas, determining the moving position and moving distance of the canvas according to the zoom ratio; determining a reverse positioning movement distance according to the moving position and moving distance of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the reverse positioning movement distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the canvas moves.

[0012] Optionally, in the canvas-based positioning method provided in the present application, the forward positioning moving distance is determined according to the moving position and moving distance of the movable window, the latest size information of the canvas, and the latest size information of the thumbnail, including: determining the movable range of the movable window according to the latest size information of the thumbnail and the latest size information of the movable window; determining the latest position information of the movable window according to the moving position and moving distance of the movable window; determining the latest position information of the canvas according to the latest position information of the movable window, the latest size information of the thumbnail, and the latest size information of the canvas; determining the forward positioning moving distance according to the movable range of the movable window, the latest position information of the movable window, and the latest position information of the canvas.

[0013] Optionally, in the canvas-based positioning method provided in the present application, the reverse positioning moving distance is determined according to the moving position and moving distance of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail, including: determining the movable range of the canvas according to the latest size information of the visible range of the browser and the latest size information of the canvas; determining the latest position information of the canvas according to the moving position and moving distance of the canvas; determining the latest position information of the movable window according to the latest position information of the canvas, the latest size information of the canvas, and the latest size information of the canvas thumbnail; determining the reverse positioning moving distance according to the movable range of the canvas, the latest position information of the movable window, and the latest position information of the canvas.

[0014] Optionally, in the canvas-based positioning method provided in the present application, thumbnails and movable windows are displayed in the positioning component, and when a change in the visible range of the browser is detected, the latest movable range of the positioning component is determined based on the latest size information of the visible range and the initial size information of the positioning component; it is determined whether the edge of the positioning component exceeds the latest movable range of the positioning component; when it is determined that the edge of the positioning component exceeds the latest movable range of the positioning component, the positioning component is adjusted to the target position, wherein the positioning component at the target position is within the latest movable range.

[0015] According to another aspect of the present application, a canvas-based positioning device is also provided, which includes: a movable window determination unit, used to determine a movable window configured on a thumbnail of a canvas, wherein the movable window is configured so that, during the process of moving on the thumbnail of the canvas, the content displayed in the movable window is consistent with the content displayed on the canvas within the visible range of the browser; a movable window update unit, used to update the size information of the movable window according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas when detecting that the visible range of the browser has changed or the size of the canvas has changed; a positioning unit, used to locate the position of the visible range of the browser on the canvas according to the content displayed in the thumbnail of the canvas in the updated movable window.

[0016] In the present application, when it is detected that the visible range of the browser has changed or the size of the canvas has changed, the size information of the movable window is updated according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas, wherein the movable window is used to determine the area of ​​the canvas presented in the visible range. Then, according to the content displayed in the thumbnail of the canvas in the updated movable window, the position of the visible range of the browser on the canvas is located.

[0017] From the above content, it can be seen that according to the technical solution of the present application, a movable window is designed that can be customized to change with the change of the browser's visible range or the change of the canvas size. The movable window is used to determine the area where the canvas is presented in the visible range of the browser. In other words, the range encircled by the movable window is the area where the canvas is presented in the visible area of ​​the browser, thereby solving the technical problem in the prior art that the relative position of the current view in the canvas cannot be displayed. It also solves the technical problem in the prior art that when the visible range of the browser changes or the size of the canvas changes, the movable window cannot change adaptively, resulting in a large amount of data to be displayed and the size of the canvas exceeds the visible range of the browser. The specified position of the canvas is difficult to locate.

[0018] It can be seen that through the technical solution of the present application, the technical effect of quickly locating any specified position of the canvas according to the movable window is achieved, thereby solving the technical problem in the prior art that the specified position of the canvas is difficult to locate when the amount of data to be displayed is large and the size of the canvas exceeds the visible range of the browser. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0020] Figure 1 is a flowchart of an optional canvas-based positioning method according to an embodiment of the present application;

[0021] Figure 2 is a schematic diagram of an optional positioning component according to an embodiment of the present application;

[0022] Figure 3 It is a schematic diagram of an optional canvas-based positioning device according to an embodiment of the present application. DETAILED DESCRIPTION

[0023] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0024] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0025] It should also be noted that the information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) collected by this application are information and data authorized by the user or fully authorized by all parties, and the collection, storage, use, processing, transmission, provision, disclosure and application of relevant data are in compliance with the relevant laws, regulations and standards of the relevant regions, necessary confidentiality measures are taken, and public order and good customs are not violated, and corresponding operation portals are provided for users to choose to authorize or refuse. For example, an interface is set up between this system and relevant users or organizations. Before obtaining relevant information, it is necessary to send an acquisition request to the aforementioned user or organization through the interface, and obtain relevant information after receiving the consent information fed back by the aforementioned user or organization.

[0026] According to an embodiment of the present application, an embodiment of a canvas-based positioning method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0027] Figure 1 is a flowchart of an optional canvas-based positioning method according to an embodiment of the present application, such as Figure 1 As shown, the method comprises the following steps:

[0028] Step S101, determining a movable window configured on a thumbnail of a canvas.

[0029] In step S101, the movable window is configured such that, during the process of moving on the thumbnail of the canvas, the content displayed in the movable window is consistent with the content displayed on the canvas within the visible range of the browser.

[0030] Optionally, thumbnails are used to show the elements in the canvas at a reduced scale and the distances between different elements.

[0031] Step S102, when it is detected that the visible range of the browser has changed or the size of the canvas has changed, the size information of the movable window is updated according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the canvas thumbnail.

[0032] In an optional embodiment, a positioning component (also referred to as a locator device) can be used as the execution subject of the canvas-based positioning method in the embodiment of the present application, wherein the positioning component can be a component embedded in a Web application, or can be an independent component that can communicate with the Web application. Of course, in addition to the above-mentioned positioning component, the execution subject of the canvas-based positioning method in the embodiment of the present application can also be other software programs, software systems, embedded systems, devices or apparatuses that combine software and hardware, etc., and the present application does not specifically limit the form of expression of the execution subject.

[0033] For the convenience of description, the technical solutions of the embodiments of the present application are described below using the positioning component as the execution entity.

[0034] Optionally, Figure 2 is a schematic diagram of an optional positioning component according to an embodiment of the present application, such as Figure 2 As shown, the positioning component includes at least four parts, namely a thumbnail (also called a canvas thumbnail), a slider with a border (ie, a movable window), a folding button component, and a drag button component.

[0035] The thumbnail is used to display the panoramic information of the canvas of the front-end application page, and can achieve the display effect of proportionally reducing all elements in the canvas and the distance between the elements.

[0036] Secondly, the range enclosed by the movable window with a border is the area where the canvas is presented in the visible area of ​​the browser. The movable window can be quickly positioned to a specified position on the canvas by dragging it.

[0037] In addition, the folding button component is used to achieve the display effect of the folding positioning component; the dragging button component is used to achieve the display effect of the dragging positioning component.

[0038] Optionally, the browser's visible range (also called viewport or window) refers to the area of ​​the web page that the user can actually see. The browser's visible range may change when any of the following situations occurs:

[0039] 1. Screen resolution changes: When the user adjusts the screen resolution, the visible range will increase or decrease accordingly.

[0040] 2. Browser window resizing: Users can resize the browser window by dragging its edges to change the visible area.

[0041] 3. Browser zoom: Users can zoom in or out of web pages through the browser's zoom function, which will affect the visible range.

[0042] 4. Mobile device rotation: When a user rotates a mobile device from portrait mode to landscape mode, the visible range changes.

[0043] 5. Multi-window or tab browsing: When browsing in multiple windows or tabs, the visible range of each window or tab may be different.

[0044] 6. Screen size changes: When users switch between different devices (such as desktop computers, laptops, tablets or mobile phones), the screen size will change, affecting the visible range.

[0045] 7. Browser plug-ins or extensions: Some browser plug-ins or extensions may affect the visible range. For example, ad blockers may hide certain elements on the web page, thereby changing the visible range.

[0046] 8. Web page layout changes: When web page elements (such as navigation bars, sidebars, etc.) are hidden or displayed, the visible range may change.

[0047] 9. Full screen mode: When the user switches the browser to full screen mode, the visible area will expand to the entire screen.

[0048] 10. CSS media queries: Web developers can use CSS media queries to adjust the layout of web pages based on factors such as screen size and resolution, thereby affecting the visible range.

[0049] Optionally, the browser's canvas size may change in any of the following situations:

[0050] 1. Resize the browser window: When the user resizes the browser window, the size of the canvas may change. In this case, the canvas content needs to be redrawn to adapt to the new size.

[0051] 2. The size of the canvas element changes: If the width or height attributes of the canvas element change, the size of the canvas will change accordingly. This may happen when the CSS style changes or JavaScript operations.

[0052] 3. The size of the canvas element's parent element changes: If the size of the canvas element's parent element changes, the size of the canvas may also be affected. This can also happen when the CSS style changes or JavaScript operations.

[0053] 4. Browser zoom function: When the user uses the browser zoom function, the size of the canvas may be affected. In order to keep the canvas content clear, the canvas needs to be redrawn.

[0054] It should be noted that if the visible range of the browser changes, but the size of the movable window remains unchanged, the movable window will not be able to accurately delineate the area where the canvas is presented in the changed visible range. For example, the visible range of the browser becomes larger, but the size of the movable window is not enlarged at the same time. At this time, the area where the canvas is presented in the visible range delineated by the movable window is smaller than the area where the canvas is actually presented in the visible range. Furthermore, if the movable window cannot accurately delineate the area where the canvas is presented in the changed visible range, then the subsequent use of the movable window to locate the specified position of the canvas will also result in deviations. Therefore, in order to solve this problem, when the present application detects that the visible range of the browser has changed, it will update the size information of the movable window according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas, thereby ensuring that the movable window can always accurately delineate the area where the canvas is actually presented in the visible range.

[0055] Similarly, if the size of the canvas changes, but the size of the movable window remains unchanged, the movable window will not be able to accurately delineate the area of ​​the canvas presented in the visible range after the change. For example, the canvas becomes smaller, but the size of the movable window does not change. At this time, the area of ​​the canvas presented in the visible range delineated by the movable window is smaller than the area of ​​the canvas actually presented in the visible range at this time. If the movable window cannot accurately delineate the area of ​​the canvas presented in the changed visible range, then the subsequent use of the movable window to locate the specified position of the canvas will also result in deviations. Therefore, in order to solve this problem, when the present application detects that the size of the canvas has changed, it will update the size information of the movable window according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas, thereby ensuring that the movable window can always accurately delineate the area of ​​the canvas actually presented in the visible range.

[0056] Step S103, locating the position of the visible range of the browser on the canvas according to the content displayed in the updated movable window of the canvas thumbnail.

[0057] Optionally, the positioning component can convert the dragged distance of the movable window into the reverse movement distance of the canvas according to the ratio of the canvas to the canvas thumbnail, so that when the movable window is dragged in the locator, the canvas will move in the reverse direction, ensuring that the content displayed in the visible range of the browser is consistent with the content in the movable window. In addition, the positioning component can also convert the dragged distance of the canvas into the reverse movement distance of the movable window according to the ratio of the canvas to the canvas thumbnail, so that when the canvas is dragged, the position of the movable window in the locator will move in the reverse direction, ensuring that the content displayed in the visible range of the browser is consistent with the content in the movable window.

[0058] Optionally, the positioning component can move the movable window and then, during the movement of the movable window, locate any specified position of the canvas at any time according to the positioning movement distance between the movable window and the canvas. In addition, even when the canvas is moving, the positioning component can locate any position of the canvas at any time according to the positioning movement distance between the movable window and the canvas.

[0059] From the above content, it can be seen that according to the technical solution of the present application, a movable window is designed that can be customized to change with the change of the browser's visible range or the change of the canvas size. The movable window is used to determine the area where the canvas is presented in the visible range of the browser. In other words, the range encircled by the movable window is the area where the canvas is presented in the visible area of ​​the browser, thereby solving the technical problem in the prior art that the relative position of the current view in the canvas cannot be displayed. It also solves the technical problem in the prior art that when the visible range of the browser changes or the size of the canvas changes, the movable window cannot change adaptively, resulting in a large amount of data to be displayed and the size of the canvas exceeds the visible range of the browser. The specified position of the canvas is difficult to locate.

[0060] In an optional embodiment, the positioning component can determine the initial size information of the movable window based on the initial size information of the visible range of the browser and the initial size information of the thumbnail; determine the initial position information of the movable window based on the initial position information of the first type of vertices of the canvas, the initial position information of the second type of vertices of the canvas, the initial size information of the canvas, and the initial size information of the thumbnail.

[0061] Optionally, the positioning component mainly includes the following sub-components: an initialization sub-component, a forward positioning sub-component, a reverse positioning sub-component, an adaptive sub-component and an anti-blocking sub-component.

[0062] Optionally, the initialization subcomponent is used to present the size and position relationship of the canvas and the browser's visible range in the positioning component in a proportional manner. The implementation includes the following steps:

[0063] Export the contents of the canvas as an image and display it in the positioning component;

[0064] Calculate and obtain the initial width information and initial height information of the movable window. For example, the initial width of the movable window is represented by L1, and the initial height of the movable window is represented by H1. The initial width L1 of the movable window is calculated by the following formula (1), and the initial height H1 of the movable window is calculated by the following formula (2).

[0065] L1=L2 / L3*L4 (1)

[0066] H1=H2 / H3*H4 (2)

[0067] Among them, L2 represents the initial width of the browser's visible range, L3 represents the initial width of the canvas, and L4 represents the initial width of the canvas thumbnail; H2 represents the initial height of the browser's visible range, H3 represents the initial height of the canvas, and H4 represents the initial height of the canvas thumbnail. It should be noted that the above size information includes height information and width information.

[0068] Optionally, the initialization subcomponent is also used to calculate and update the initial position information of the movable window, and the calculation process is as shown in formula (3) and formula (4).

[0069] Left(movable window) = - Left(canvas) / L3*L4 (3)

[0070] top(movable window) = - top(canvas) / H3*H4 (4)

[0071] Among them, Left(movable window) represents the initial position information of the first type of vertices of the movable window, which is used to characterize the horizontal geometric relationship of the movable window (such as the horizontal coordinate of the vertex); Left(canvas) represents the initial position information of the first type of vertices of the canvas, which is used to characterize the horizontal geometric relationship of the canvas; top(movable window) represents the initial position information of the second type of vertices of the movable window, which is used to characterize the vertical geometric relationship of the movable window (such as the vertical coordinate of the vertex); top(canvas) represents the initial position information of the second type of vertices of the canvas, which is used to characterize the vertical geometric relationship of the canvas.

[0072] From the above content, it can be seen that by initializing the subcomponent, a movable window can be initialized and generated on the positioning component, and the sizes and positions of the movable window, the canvas, and the visible range of the browser are all presented in proportion, thereby providing a panoramic perception of the canvas, helping users understand the relative position and distance of each element in the canvas, and also providing the contextual relationship of the current visible area, helping users to confirm the relative position of the current visible area in the entire canvas in real time.

[0073] In an optional embodiment, the position of the visible range of the browser on the canvas is positioned according to the content displayed in the updated movable window of the thumbnail of the canvas, including: obtaining the scaling ratio between the canvas and the thumbnail; determining the positioning movement distance between the updated movable window and the canvas according to the scaling ratio; and positioning the position of the visible range of the browser on the canvas according to the positioning movement distance and the content displayed in the updated movable window of the thumbnail of the canvas.

[0074] Optionally, the positioning movement distance can be a forward positioning movement distance or a reverse positioning movement distance, wherein the forward positioning movement distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the movable window moves; the reverse positioning movement distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the canvas moves.

[0075] In an optional embodiment, the positioning component can determine the forward positioning movement distance based on the touch instruction corresponding to the movable window, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the forward positioning movement distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the movable window moves.

[0076] Optionally, the forward positioning subcomponent of the positioning component can convert the dragging distance of the movable window into the reverse movement distance of the canvas (i.e., the forward positioning movement distance mentioned above) according to the ratio of the canvas to the thumbnail, so that when the movable window is dragged in the positioning component, the canvas will move in the reverse direction accordingly, ensuring that the content displayed in the visible range of the browser is consistent with the content in the movable window.

[0077] Optionally, in the process of determining the forward positioning moving distance according to the moving position and moving distance of the movable window, the latest size information of the canvas, and the latest size information of the thumbnail, the positioning component can determine the movable range of the movable window according to the latest size information of the thumbnail and the latest size information of the movable window, and can also determine the latest position information of the movable window according to the moving position and moving distance of the movable window. Then, the positioning component determines the latest position information of the canvas according to the latest position information of the movable window, the latest size information of the thumbnail, and the latest size information of the canvas. Finally, the positioning component determines the forward positioning moving distance according to the movable range of the movable window, the latest position information of the movable window, and the latest position information of the canvas.

[0078] Optionally, the positive positioning subcomponent of the positioning component can be used to implement the following process:

[0079] First, the forward positioning subcomponent can be used to calculate the movable range range (movable window) of the movable window, where range (movable window) can be represented by a first interval and a second interval, where the first interval is [0, L5-L6], where L5 is the latest width of the thumbnail, and L6 is the latest width of the movable window. The second interval is [0, H5-H6], where H5 is the latest height of the thumbnail, and H6 is the latest height of the movable window.

[0080] Secondly, the forward positioning subcomponent can be used to monitor the position and moving distance of external devices such as the mouse, and then update the Left and top properties of the movable window to realize the dragging of the movable window and obtain the latest position information of the movable window.

[0081] Finally, the forward positioning subcomponent can calculate and update the Left and Top properties of the canvas to achieve the reverse movement of the canvas along with the movable window, as shown in formula (5) and formula (6).

[0082] Left(after canvas update) = -left(after movable window update) / L5*L7 (5)

[0083] top(after canvas update) = -top(after movable window update) / H5*H7 (6)

[0084] Among them, Left (after canvas update) represents the Left attribute of the canvas updated after the movable window moves, Left (after movable window update) represents the Left attribute after sliding movement, L5 represents the latest width of the thumbnail, and L7 represents the latest width of the canvas; top (after canvas update) represents the top attribute of the canvas updated after the movable window moves, top (after movable window update) represents the top attribute after the movable window moves, H5 represents the latest height of the thumbnail, and H7 represents the latest height of the canvas.

[0085] From the above content, it can be seen that according to the technical solution of the present application, when the movable window moves, the forward positioning subcomponent can control the canvas to move in the opposite direction, thereby ensuring that the content displayed in the visible range of the browser is consistent with the content in the movable window, thereby achieving the technical effect of always ensuring the accurate display of the relative position between the movable window and the canvas.

[0086] In an optional embodiment, in the process of determining the positioning movement distance between the movable window and the canvas according to the canvas and the thumbnail, the positioning component can also determine the moving position and moving distance of the canvas according to the zoom ratio for the touch command corresponding to the canvas. Finally, the positioning component determines the reverse positioning movement distance according to the moving position and moving distance of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the reverse positioning movement distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the canvas moves.

[0087] Optionally, the reverse positioning subcomponent of the positioning component can convert the dragging distance of the canvas into the reverse moving distance of the movable window (i.e., the reverse positioning moving distance mentioned above) according to the ratio of the canvas to the thumbnail, so that when the canvas is dragged, the position of the movable window in the positioning component will move in the reverse direction, ensuring that the content displayed in the visible range of the browser is consistent with the content in the movable window.

[0088] Optionally, in the process of determining the reverse positioning moving distance based on the moving position and moving distance of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail, the positioning component can determine the movable range of the canvas based on the latest size information of the visible range of the browser and the latest size information of the canvas; determine the latest position information of the canvas based on the moving position and moving distance of the canvas; determine the latest position information of the movable window based on the latest position information of the canvas, the latest size information of the canvas, and the latest size information of the canvas thumbnail; determine the reverse positioning moving distance based on the movable range of the canvas, the latest position information of the movable window, and the latest position information of the canvas.

[0089] Optionally, the reverse positioning subassembly of the positioning assembly can be used to implement the following process:

[0090] First, when the canvas moves, the reverse positioning subcomponent can calculate the movable range of the canvas range(canvas), where range(canvas) can be represented by a third interval and a fourth interval, where the third interval is [L8-L7, 0] and the fourth interval is [H8-H7, 0]. Wherein, L8 represents the latest width of the visible range of the browser, L7 represents the latest width of the canvas; H8 represents the latest height of the visible range of the browser, and H7 represents the latest height of the canvas.

[0091] Secondly, the reverse positioning subcomponent can be used to monitor the position and movement distance of external devices such as the mouse, update the Left and top properties of the canvas, realize the dragging of the canvas, and obtain the latest position information of the canvas.

[0092] Finally, the reverse positioning subcomponent can calculate and update the Left and top properties of the movable window to achieve the reverse movement of the movable window along with the canvas, as shown in formula (7) and formula (8).

[0093] Left(movable window 1) = -left(canvas 1) / L5*L7 (7)

[0094] top(movable window 1) = - top(canvas 1) / H5*H7 (8)

[0095] Among them, Left(Movable Window 1) represents the Left property of the movable window updated after the canvas is moved, Left(Canvas 1) represents the Left property after the canvas is moved, L5 represents the latest width of the thumbnail, and L7 represents the latest width of the canvas; top(Movable Window 1) represents the top property of the movable window updated after the canvas is moved, top(Canvas 1) represents the top property after the canvas is moved, H5 represents the latest height of the thumbnail, and H7 represents the latest height of the canvas.

[0096] From the above content, it can be seen that according to the technical solution of the present application, when the canvas moves, the reverse positioning sub-component can control the movable window to move in reverse, thereby ensuring that the content displayed in the visible range of the browser is consistent with the content in the movable window, thereby achieving the technical effect of always ensuring the accurate display of the relative position between the movable window and the canvas.

[0097] In an optional embodiment, when it is detected that the visible range of the browser has changed or the size of the canvas has changed, the size information of the movable window is updated according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas, including: when it is detected that the visible range of the browser has changed or the canvas has changed, the width information and height information of the movable window are updated according to the latest width information and the latest height information of the visible range, the latest width information and the latest height information of the canvas, and the latest width information and the latest height information of the thumbnail.

[0098] Optionally, the positioning component further includes an adaptive subcomponent, wherein the adaptive subcomponent is used to monitor the size of the browser's visible range and the size of the canvas. When the size of the browser's visible range changes or the size of the canvas changes, the adaptive subcomponent can automatically calculate and update the size of the movable window. At the same time, the adaptive subcomponent can also determine whether the current location of the positioning component exceeds the latest visible range of the browser, and automatically adjust to the edge of the latest visible range of the browser if it exceeds.

[0099] Optionally, the adaptive subcomponent can be used to monitor the size change of the browser's visible range and the size change of the canvas. When the size of the browser's visible range changes or the size of the canvas changes, the adaptive subcomponent can recalculate and update the width and height of the movable window, and the details can be referred to the following formula (9) and formula (10).

[0100] L6=L5*L8 / L7 (9)

[0101] H6=H5*H8 / H7 (10)

[0102] Among them, L6 indicates the latest width of the movable window after the update, L5 indicates the latest width of the thumbnail, L8 indicates the latest width of the browser's visible range, and L7 indicates the latest width of the canvas. H6 indicates the latest height of the movable window after the update, H5 indicates the latest height of the thumbnail, H8 indicates the latest height of the browser's visible range, and H7 indicates the latest height of the canvas.

[0103] Through the above content, the purpose of synchronously updating the size change information among the browser's visible range, the canvas and the movable window can be achieved, thereby ensuring that the display content of the movable window is always consistent with the display content of the canvas in the visible range.

[0104] In an optional embodiment, when a change in the visible range of the browser is detected, the adaptive subcomponent can determine the latest movable range of the positioning component according to the latest size information of the visible range and the initial size information of the positioning component. Then, the adaptive subcomponent can determine whether the edge of the positioning component exceeds the latest movable range of the positioning component. In the case where it is determined that the edge of the positioning component exceeds the latest movable range of the positioning component, the positioning component is adjusted to a target position, wherein the positioning component at the target position is within the latest movable range.

[0105] Optionally, when the visible range of the browser changes, the adaptive subcomponent can recalculate the movable range of the positioning component, where the movable range of the positioning component can be represented by the fifth interval [0, L8-L (positioning component)] and the sixth interval [0, H8-H (positioning component)].

[0106] Among them, L8 represents the latest width of the browser's visible range, and L (positioning component) represents the initial width information of the positioning component; H8 represents the latest height of the browser's visible range, and H (positioning component) represents the initial height information of the positioning component.

[0107] Optionally, the adaptive subcomponent can determine whether the Left and top attributes of the current position of the positioning component exceed the movable range of the positioning component calculated above (i.e., determine whether the edge of the positioning component exceeds the latest movable range of the positioning component). If exceeded, the adaptive subcomponent will adjust the position of the positioning component to the edge of the visible range, refer to formula (11) and formula (12).

[0108] Left (positioning component latest) = L8-L (positioning component latest) (11)

[0109] Top (Latest positioning component) = H8-H (Latest positioning component) (12)

[0110] Among them, L8 represents the latest width of the browser's visible range, L (positioning component latest) represents the latest width of the positioning component, Left (positioning component latest) represents the position to which the horizontal edge of the positioning component needs to be adjusted after the horizontal edge of the positioning component exceeds the latest movable range of the positioning component (expressed by the Left attribute); H8 represents the latest height of the browser's visible range, H (positioning component latest) represents the latest height of the positioning component, top (positioning component latest) represents the position to which the vertical edge of the positioning component needs to be adjusted after the vertical edge of the positioning component exceeds the latest movable range of the positioning component (expressed by the top attribute).

[0111] It can be seen from the above content that according to the technical solution of the present application, it can ensure that the positioning component adapts to the visible range of the browser. If the positioning component exceeds the visible range of the browser, the positioning component will automatically adjust its own position.

[0112] In an optional embodiment, the positioning component can at least implement the following operations:

[0113] The folding operation is used to reduce the positioning component to an icon control, wherein the icon control is enlarged into the positioning component after receiving the enlargement instruction; the moving operation is used to control the positioning component to move within the movable range of the positioning component according to the touch instruction corresponding to the positioning component, and the movable range of the positioning component is determined by the height information and width information of the visible range and the width information and height information of the positioning component.

[0114] Optionally, the positioning component further includes an anti-occlusion subcomponent, wherein the anti-occlusion subcomponent is used to implement the foldable and draggable functions of the positioning component to prevent the positioning component from obstructing the contents of the canvas.

[0115] Optionally, the anti-shading subassembly can achieve the following specific functions:

[0116] The anti-occlusion subcomponent is used to monitor the position where the mouse is pressed and the distance it moves, and to update the Left and top properties of the positioning component, thereby realizing the dragging of the entire positioning component.

[0117] The anti-occlusion subcomponent can also be used to implement a folding operation, wherein when the user clicks the fold button, the anti-occlusion subcomponent can minimize the positioning component to a thumbnail icon of the positioning component; when the user clicks the thumbnail icon of the positioning component, the anti-occlusion subcomponent can display the complete positioning component.

[0118] It can be seen from the above content that according to the technical solution of the present application, the positioning component can be folded and dragged, thereby avoiding obstruction of the canvas to the greatest extent.

[0119] Optionally, the technical solution of the present application can be used to optimize the display effect of various canvases with large amounts of data, such as the optimized display of threat tracing graphs. Figure 1 Generally, there will be a larger range in the horizontal direction and a deeper level in the vertical direction, and a certain distance needs to be maintained between each node to ensure that the nodes do not overlap each other, which will eventually cause the canvas size to exceed the visible range of the browser. However, using the technical solution of this application, users can analyze the whole picture of the canvas, find the key position, and quickly locate the key position.

[0120] In summary, the technical solution of this application can at least achieve the following technical effects:

[0121] Provides a panoramic display function for the canvas, allowing users to observe and analyze the canvas content from a global perspective;

[0122] The position and size relationship between the canvas and the browser's visible range is presented in equal proportion, making it easier for users to analyze the context of the visible range.

[0123] You can quickly locate any position on the canvas;

[0124] It can adapt to the browser's visible range, and the positioning component can automatically adjust its position when it exceeds the visible range;

[0125] The positioning component can be folded and dragged to avoid blocking the canvas to the greatest extent.

[0126] According to another aspect of the present application, a canvas-based positioning device is also provided, wherein: Figure 3 is a schematic diagram of an optional canvas-based positioning device according to an embodiment of the present application, such as Figure 3 As shown, the canvas-based positioning device includes: a movable window determining unit 301, a movable window updating unit 302, and a positioning unit 303.

[0127] Optionally, a movable window determination unit 301 is used to determine a movable window configured on the thumbnail of the canvas, wherein the movable window is configured so that, during the process of moving the movable window on the thumbnail of the canvas, the content displayed in the movable window is consistent with the content displayed on the canvas within the visible range of the browser; a movable window update unit 302 is used to update the size information of the movable window according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas when detecting that the visible range of the browser has changed or the size of the canvas has changed, wherein the movable window is used to determine the area where the canvas is presented in the visible range; a positioning unit 303 is used to locate the position of the visible range of the browser on the canvas according to the content displayed in the thumbnail of the canvas in the updated movable window.

[0128] Optionally, the movable window determination unit 301 includes: an initial size determination unit and an initial position determination unit. The initial size determination unit is used to determine the initial size information of the movable window according to the initial size information of the visible range of the browser and the initial size information of the thumbnail; the initial position determination unit is used to determine the initial position information of the movable window according to the initial position information of the first type of vertices of the canvas, the initial position information of the second type of vertices of the canvas, the initial size information of the canvas, and the initial size information of the thumbnail.

[0129] Optionally, the positioning unit 302 includes: a first acquisition subunit and a first determination subunit. The first acquisition subunit is used to acquire the zoom ratio between the canvas and the thumbnail; the first determination subunit is used to determine the moving position and moving distance of the movable window according to the zoom ratio for the touch instruction corresponding to the movable window; and the second determination subunit is used to determine the positioning moving distance between the updated movable window and the canvas according to the zoom ratio.

[0130] Optionally, the first determination subunit is further used to determine the moving position and moving distance of the movable window according to the zoom ratio for the touch instruction corresponding to the movable window; determine the forward positioning moving distance according to the moving position and moving distance of the movable window, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the forward positioning moving distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the movable window moves.

[0131] Optionally, the first determination subunit is further used to determine the moving position and moving distance of the canvas according to the zoom ratio for the touch instruction corresponding to the canvas; and determine the reverse positioning moving distance according to the moving position and moving distance of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the reverse positioning moving distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the canvas moves.

[0132] Optionally, the first determination subunit includes: a first determination module, a second determination module, a third determination module and a fourth determination module. The first determination module is used to determine the movable range of the movable window according to the latest size information of the thumbnail and the latest size information of the movable window; the second determination module is used to determine the latest position information of the movable window according to the moving position and moving distance of the movable window; the third determination module is used to determine the latest position information of the canvas according to the latest position information of the movable window, the latest size information of the thumbnail and the latest size information of the canvas; the fourth determination module is used to determine the forward positioning moving distance according to the movable range of the movable window, the latest position information of the movable window and the latest position information of the canvas.

[0133] Optionally, the first determination subunit includes: a fifth determination module, a sixth determination module, a seventh determination module and an eighth determination module. The fifth determination module is used to determine the movable range of the canvas according to the latest size information of the browser's visible range and the latest size information of the canvas; the sixth determination module is used to determine the latest position information of the canvas according to the moving position and moving distance of the canvas; the seventh determination module is used to determine the latest position information of the movable window according to the latest position information of the canvas, the latest size information of the canvas, and the latest size information of the canvas thumbnail; the eighth determination module is used to determine the reverse positioning moving distance according to the movable range of the canvas, the latest position information of the movable window, and the latest position information of the canvas.

[0134] Optionally, the canvas-based positioning device further includes: a third determination unit, a judgment unit, and a position adjustment unit. The third determination unit is used to determine the latest movable range of the positioning component according to the latest size information of the visible range and the initial size information of the positioning component when detecting that the visible range of the browser has changed; the judgment unit is used to determine whether the edge of the positioning component exceeds the latest movable range of the positioning component; the position adjustment unit is used to adjust the positioning component to the target position when it is determined that the edge of the positioning component exceeds the latest movable range of the positioning component, wherein the positioning component at the target position is within the latest movable range.

[0135] Optionally, the positioning component implements at least the following operations: a folding operation, used to reduce the positioning component to an icon control, wherein the icon control is enlarged into the positioning component after receiving a zoom-in instruction; a moving operation, used to control the positioning component to move within a movable range of the positioning component after a touch instruction corresponding to the positioning component, and the movable range of the positioning component is determined by the latest size information of the visible range and the latest size information of the positioning component.

[0136] According to another aspect of the present application, a computer-readable storage medium is provided, wherein a computer program is stored in the computer-readable storage medium, wherein when the computer program runs, the device where the computer-readable storage medium is located executes the canvas-based positioning method provided in any one of the above-mentioned embodiments.

[0137] According to another aspect of the present application, an electronic device is also provided, wherein the electronic device includes one or more processors; a storage device for storing one or more programs, and when the one or more programs are executed by the one or more processors, the one or more processors are implemented to run the programs, wherein the program is configured to execute the canvas-based positioning method provided by any one of the above-mentioned embodiments when running.

[0138] The above-mentioned embodiments or examples disclosed in the present application are not exhaustive, but are only illustrative of some embodiments or examples, and are not intended to be specific limitations on the scope of protection disclosed in the present application. In the absence of contradiction, each step in a certain embodiment or example in the present application can be implemented as an independent example, and the steps can be combined arbitrarily. For example, the scheme after removing some steps in a certain embodiment or example can also be implemented as an independent example, and the order of the steps in a certain embodiment or example can be arbitrarily exchanged. In addition, the optional methods or optional examples in a certain embodiment or example can be combined arbitrarily; in addition, the various embodiments or examples can be combined arbitrarily, for example, some or all steps of different embodiments or examples can be combined arbitrarily, and a certain embodiment or example can be combined arbitrarily with the optional methods or optional examples of other embodiments or examples.

[0139] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0140] In the above embodiments of the present application, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments.

[0141] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the units can be a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0142] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0143] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0144] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, disk or optical disk and other media that can store program codes.

[0145] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A canvas-based positioning method, characterized in that: include: Determine a movable window configured on the thumbnail of the canvas, wherein the movable window is configured such that, during the process of moving on the thumbnail of the canvas, the content displayed in the movable window is consistent with the content displayed on the canvas within the visible range of the browser; When detecting that the visible range of the browser has changed or the size of the canvas has changed, updating the size information of the movable window according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas; The position of the visible range of the browser on the canvas is located according to the content displayed in the updated movable window of the thumbnail of the canvas.

2. The canvas-based positioning method according to claim 1, characterized in that: Determines the movable windows configured on the canvas thumbnail, including: Determining the initial size information of the movable window according to the initial size information of the visible range of the browser and the initial size information of the thumbnail; The initial position information of the movable window is determined according to the initial position information of the first type of vertices of the canvas, the initial position information of the second type of vertices of the canvas, the initial size information of the canvas, and the initial size information of the thumbnail.

3. The canvas-based positioning method according to claim 1, characterized in that: Positioning the position of the visible range of the browser on the canvas according to the content displayed in the updated movable window of the thumbnail of the canvas, including: Get the zoom ratio between the canvas and the thumbnail; Determine the updated positioning movement distance between the movable window and the canvas according to the scaling ratio; The position of the visible range of the browser on the canvas is located according to the positioning movement distance and the content displayed by the thumbnail of the canvas in the updated movable window.

4. The canvas-based positioning method according to claim 3, characterized in that: Determining the updated positioning movement distance between the movable window and the canvas according to the scaling ratio includes: For the touch control instruction corresponding to the movable window, determining the moving position and moving distance of the movable window according to the zoom ratio; The forward positioning moving distance is determined based on the moving position and moving distance of the movable window, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the forward positioning moving distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the movable window moves.

5. The canvas-based positioning method according to claim 3, characterized in that: Determining the updated positioning movement distance between the movable window and the canvas according to the scaling ratio includes: For the touch control instruction corresponding to the canvas, determining the moving position and moving distance of the canvas according to the zoom ratio; The reverse positioning moving distance is determined according to the moving position and moving distance of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail, wherein the reverse positioning moving distance is used to ensure that the content displayed in the visible range of the browser is consistent with the content in the movable window when the canvas moves.

6. The canvas-based positioning method according to claim 4, characterized in that: Determining the forward positioning moving distance according to the moving position and moving distance of the movable window, the latest size information of the canvas, and the latest size information of the thumbnail, including: Determining a movable range of the movable window according to the latest size information of the thumbnail and the latest size information of the movable window; Determining the latest position information of the movable window according to the moving position and moving distance of the movable window; Determine the latest position information of the canvas according to the latest position information of the movable window, the latest size information of the thumbnail, and the latest size information of the canvas; The forward positioning moving distance is determined according to the movable range of the movable window, the latest position information of the movable window and the latest position information of the canvas.

7. The canvas-based positioning method according to claim 5, characterized in that: Determining the reverse positioning moving distance according to the moving position and moving distance of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail, including: Determine the movable range of the canvas according to the latest size information of the visible range of the browser and the latest size information of the canvas; Determining the latest position information of the canvas according to the moving position and moving distance of the canvas; Determine the latest position information of the movable window according to the latest position information of the canvas, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas; The reverse positioning moving distance is determined according to the movable range of the canvas, the latest position information of the movable window and the latest position information of the canvas.

8. The canvas-based positioning method according to claim 1, characterized in that: The thumbnail and the movable window are both displayed in the positioning component, and the canvas-based positioning method further includes: When detecting that the visible range of the browser has changed, determining the latest movable range of the positioning component according to the latest size information of the visible range and the initial size information of the positioning component; Determining whether the edge of the positioning component exceeds the latest movable range of the positioning component; When it is determined that the edge of the positioning component exceeds the latest movable range of the positioning component, the positioning component is adjusted to a target position, wherein the positioning component at the target position is within the latest movable range.

9. A canvas-based positioning device, characterized in that: include: A movable window determining unit, configured to determine a movable window configured on the thumbnail of the canvas, wherein the movable window is configured such that, during the process of moving on the thumbnail of the canvas, the content displayed in the movable window is consistent with the content displayed on the canvas within the visible range of the browser; A movable window updating unit, configured to update the size information of the movable window according to the latest size information of the visible range, the latest size information of the canvas, and the latest size information of the thumbnail of the canvas when detecting that the visible range of the browser has changed or the size of the canvas has changed; A positioning unit is used to locate the position of the visible range of the browser on the canvas according to the content displayed in the updated movable window of the thumbnail of the canvas.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein when the computer program is executed, the device where the computer-readable storage medium is located executes the canvas-based positioning method according to any one of claims 1 to 8.

Images