Any document format annotation display method and device based on Canvas

Abstract

The invention provides a Canvas-based annotation display method and a Canvas-based annotation display device for any document format, and aims to solve the problems of high file format dependency, poor annotation information interoperability, poor display consistency and the like in the prior art. The method specifically comprises the following steps: S1, acquiring a file type, and acquiring an original width and an original height of a file according to the file type; s2, constructing a first coordinate system, and representing the labeling information in the first coordinate system in a rectangular coordinate mode; s3, drawing a rectangular labeling frame and a labeling text through Canvas to form a transparent mask; s4, according to the actual display size of the current display window, calculating a scaling ratio, adjusting the size of Canvas according to the scaling ratio, and covering the file display area; and S5, displaying the file with the annotation information in the file display area. The use experience of the user is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and device for displaying annotations in any document format based on Canvas. Background Art

[0002] In the modern information society, image processing and document management applications have become an integral part of daily work and life. Whether in academic research, business reports, or everyday communication, effective document annotation and labeling are crucial steps in improving work efficiency and the accuracy of information transfer. Specifically, region annotation is particularly common in images, PDF documents, and other multimedia files. By marking specific areas on a document, users can quickly locate and identify key information, enhancing the document's readability and usability.

[0003] Although there are many annotation tools and solutions on the market, most of them have the following limitations:

[0004] 1. Strong file format dependency: Many annotation tools are optimized for specific file formats, such as images or PDFs, but lack support for other formats (such as OFD, SVG, etc.). This results in users having to rely on multiple different tools when processing multiple file types, increasing operational complexity and maintenance costs.

[0005] 2. Poor interoperability of annotation information: Annotation information from different annotation systems is often stored and processed independently, lacking a unified standard. This means that when users switch between different platforms or devices, the accuracy and consistency of annotation information cannot be guaranteed, affecting the user experience (especially when different platforms use different coordinate systems and the system configuration end is tied to the display end).

[0006] 3. Display consistency issues: Existing annotation systems can cause annotated areas to shift, become distorted, or have size mismatches due to differences in rendering mechanisms and display ratios across different devices and display environments. This not only affects annotation accuracy but can also mislead users about document content. Summary of the Invention

[0007] The present invention provides a Canvas-based annotation display method and device for any document format, so as to solve the problems existing in the prior art such as strong dependence on file formats, poor interoperability of annotation information, and display consistency issues.

[0008] In a first aspect, the present invention provides a method for displaying annotations in any document format based on Canvas, which specifically includes the following steps:

[0009] Step S1: Obtain the file type, and obtain the original width and original height of the file according to the file type;

[0010] Step S2: construct a first coordinate system, and represent the annotation information in the first coordinate system in the form of rectangular coordinates; wherein the origin (0, 0) of the first coordinate system is located in the upper left corner, the X axis is positive to the right, and the Y axis is positive downward, and the annotation information includes the coordinates of the upper left corner and the lower right corner of the rectangular annotation box and the annotation text;

[0011] Step S3: Draw a rectangular annotation frame and annotation text through Canvas to form a transparent mask;

[0012] Step S4: Calculate the zoom ratio based on the actual display size of the current display window, adjust the size of the Canvas based on the zoom ratio, and cover the file display area;

[0013] Step S5: Display the file with the marked information in the file display area.

[0014] Preferably, in step S1, the file types include image files and PDF files; wherein, for files in image format, the width and height are obtained directly through the image object, and for PDF files, the PDF file is first parsed, the width and height of each page are obtained page by page, and the total height is accumulated (both the height and the width are expressed in pixels (px)).

[0015] Preferably, in step S3, drawing a rectangular annotation frame and annotation text by using Canvas to form a transparent mask specifically includes the following steps:

[0016] Step S301: Create a Canvas element with the same actual size as the file;

[0017] Step S302: Draw a rectangular annotation frame according to the annotation information, and display the annotation text in the rectangular annotation frame;

[0018] Step S303: Set the background of the Canvas to transparent.

[0019] Preferably, in step S302, a rectangular annotation frame is drawn by means of StrokeRect, and the annotation text is displayed in the rectangular annotation frame.

[0020] Preferably, in step S4, the zoom ratio is calculated according to the actual display size of the current display window, the size of the Canvas is adjusted according to the zoom ratio, and the size is covered to the file display area, which specifically includes the following steps:

[0021] Step S401: Obtain the actual display width of the current display window;

[0022] Step S402: Calculate a zoom ratio based on the actual display width (display width) of the current display window and the width (original width) of the original file; wherein the zoom ratio = display width / original width;

[0023] Step S403: adjusting the size of the Canvas according to the scaling ratio to form a Canvas with adjusted size;

[0024] Step S404: Overlay the resized Canvas onto the file display area to achieve accurate alignment of the annotation information.

[0025] Preferably, in step S5, when the file display area is displayed, the origin of the file display area coordinate system includes three coordinate systems: the origin is located in the lower left corner (the X-axis is positive to the right and the Y-axis is positive upward), the origin is located in the upper right corner (the X-axis is positive to the left and the Y-axis is positive downward), and the origin is located in the lower right corner (the X-axis is positive to the left and the Y-axis is positive upward).

[0026] Preferably, when the origin of the document display area coordinate system is located at the lower left corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=x1, y2=H-y1;

[0027] When the origin of the document display area coordinate system is located at the upper right corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=W-x1, y2=y1;

[0028] When the origin of the document display area coordinate system is located at the lower left corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=W-x1, y2=H-y1;

[0029] Among them, x1 represents the horizontal coordinate in the first coordinate system, x2 represents the horizontal coordinate in the file display area coordinate system (that is, the horizontal coordinate after the x1 coordinate is converted), y1 represents the vertical coordinate in the first coordinate system, y2 represents the vertical coordinate in the file display area coordinate system (that is, the vertical coordinate after the y1 coordinate is converted), H represents the height of the file after scaling, and W represents the width of the file after scaling.

[0030] In a second aspect, the present invention further provides a Canvas-based annotation display device for any document format, specifically comprising the following modules:

[0031] A file original data acquisition module is used to acquire the file type and, based on the file type, acquire the original width and original height of the file;

[0032] a labeling information representation module, configured to construct a first coordinate system and represent labeling information in the first coordinate system using rectangular coordinates; wherein the origin (0,0) of the first coordinate system is located in the upper left corner, the X-axis is positive to the right, and the Y-axis is positive downward; and the labeling information includes the coordinates of the upper left corner and the lower right corner of the rectangular labeling box and the labeling text;

[0033] The transparent mask generation module is used to draw a rectangular annotation box and annotation text through Canvas to form a transparent mask;

[0034] A file scaling processing module is used to calculate the scaling ratio according to the actual display size of the current display window, adjust the size of the Canvas according to the scaling ratio, and cover the file display area;

[0035] The file display module is used to display files with annotation information in the file display area.

[0036] Preferably, in the file original data acquisition module, the file types include image files and PDF files; wherein, for files in image format, the width and height are directly obtained through the image object, and for PDF files, the PDF file is first parsed, and the width and height of each page are obtained page by page, and the total height is accumulated (both height and width are expressed in pixels (px)).

[0037] Preferably, the transparent mask generation module specifically includes the following submodules:

[0038] The first submodule of transparent mask generation is used to create a Canvas element with the same actual size as the file;

[0039] A second submodule for generating a transparent mask is used to draw a rectangular annotation frame according to the annotation information and display the annotation text in the rectangular annotation frame;

[0040] The transparent mask generates the third submodule, which is used to set the background of the Canvas to transparent.

[0041] Preferably, in the second submodule of transparent mask generation, a rectangular annotation frame is drawn by means of StrokeRect, and the annotation text is displayed in the rectangular annotation frame.

[0042] Preferably, the file scaling processing module specifically includes the following submodules:

[0043] The first submodule of file zoom processing is used to obtain the actual display width of the current display window;

[0044] The second submodule for file scaling processing is configured to calculate a scaling ratio based on the actual display width of the current display window and the width of the original file; wherein the scaling ratio = display width / original width;

[0045] A third submodule for file scaling processing is used to adjust the size of the Canvas according to the scaling ratio to form a Canvas with adjusted size;

[0046] The fourth submodule of file scaling processing is used to overlay the resized Canvas onto the file display area to achieve accurate alignment of the annotation information.

[0047] Preferably, in the file display module, when the file display area is displayed, the origin of the file display area coordinate system includes three coordinate systems: the origin is located in the lower left corner, the origin is located in the upper right corner, and the origin is located in the lower right corner.

[0048] Preferably, when the origin of the document display area coordinate system is located at the lower left corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=x1, y2=H-y1;

[0049] When the origin of the document display area coordinate system is located at the upper right corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=W-x1, y2=y1;

[0050] When the origin of the document display area coordinate system is located at the lower left corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=W-x1, y2=H-y1;

[0051] Among them, x1 represents the horizontal coordinate in the first coordinate system, x2 represents the horizontal coordinate in the file display area coordinate system, y1 represents the vertical coordinate in the first coordinate system, y2 represents the vertical coordinate in the file display area coordinate system, H represents the height of the file after scaling, and W represents the width of the file after scaling.

[0052] In a third aspect, the present invention further provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements a Canvas-based annotation and display method for any document format as described in any one of the first aspects of the present application.

[0053] In a fourth aspect, the present invention also provides an electronic device, comprising: a memory storing a computer program; and a processor communicatively connected to the memory, for executing a Canvas-based annotation and display method of any document format as described in any one of the first aspects of the present application when the computer program is called.

[0054] Compared with the prior art, the present invention has the following obvious outstanding substantial features and significant advantages:

[0055] 1. Unified annotation display: This method allows for unified annotation display for images, PDFs, and other multimedia files. The annotation box accurately aligns with the file content, ensuring readability and accuracy of the annotation information.

[0056] 2. Cross-platform consistency: Through a scaling mechanism, annotation information maintains consistent display across different devices and display windows. Whether on desktop, mobile, or other terminal devices, users can enjoy the same annotation experience.

[0057] 3. Reduced development and maintenance costs: A unified annotation coordinate system and adaptation mechanism eliminates the need to develop independent annotation processing logic for different file formats, significantly reducing development and maintenance costs. This also improves the system's flexibility and scalability, enabling faster adaptation to new file formats and presentation requirements. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] The accompanying drawings, which constitute part of the present invention, are provided to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the accompanying drawings:

[0059] Figure 1 This is a flowchart of a method for displaying annotations in any document format based on Canvas according to a preferred embodiment of the present invention.

[0060] Figure 2 This is a schematic diagram of file annotation information according to a preferred embodiment of the present invention.

[0061] Figure 3 It is a structural diagram of a Canvas-based annotation display device for any document format according to a preferred embodiment of the present invention.

[0062] Figure 4 It is a structural diagram of a transparent mask generation module according to a preferred embodiment of the present invention.

[0063] Figure 5 It is a structural diagram of a file scaling processing module according to a preferred embodiment of the present invention.

[0064] Figure annotation:

[0065] 100, file original data acquisition module; 200, annotation information representation module; 300, transparent mask generation module; 400, file scaling processing module; 500, file display module;

[0066] 310, transparent mask generates a first submodule; 320, transparent mask generates a second submodule; 330, transparent mask generates a third submodule;

[0067] 410, a first submodule for file scaling processing; 420, a second submodule for file scaling processing; 430, a third submodule for file scaling processing; 440, a fourth submodule for file scaling processing. DETAILED DESCRIPTION

[0068] The present invention provides a method and apparatus for displaying annotations in any document format based on Canvas. To make the objectives, technical solutions, and effects of the present invention more clear and explicit, the present invention is further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are intended only to illustrate the present invention and are not intended to limit the present invention.

[0069] It should be noted that the terms "first," "second," and the like in the specification and claims of the present invention and the accompanying 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 terms used in this manner are interchangeable under appropriate circumstances. In addition, the terms "including," "having," and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units that are not explicitly listed or that are inherent to these processes, methods, products, or apparatuses.

[0070] Example 1:

[0071] like Figure 1-Figure 2 As shown, the method for displaying annotations in any document format based on Canvas in this embodiment specifically includes the following steps:

[0072] Step S1: Obtain the file type, and obtain the original width and original height of the file according to the file type.

[0073] Among them, the file types include image files and PDF files; for files in image format, the width and height are obtained directly through the image object. For PDF files, the PDF file is first parsed, the width and height of each page are obtained page by page, and the total height is accumulated (the height and width are both expressed in pixels (px), for example, the file width is 3000px and the file height is 4000px).

[0074] Step S2: construct a first coordinate system and represent the annotation information in the first coordinate system in the form of rectangular coordinates; wherein, the origin (0,0) of the first coordinate system is located in the upper left corner, the X-axis is positive to the right, and the Y-axis is positive downward, and the annotation information includes the upper left corner coordinates, lower right corner coordinates and annotation text of the rectangular annotation box.

[0075] Step S3: Draw a rectangular annotation frame and annotation text using Canvas to form a transparent mask.

[0076] Optionally, the step S3 specifically includes steps S301 to S303.

[0077] Step S301: Create a Canvas element with the same actual size as the file.

[0078] Step S302: Draw a rectangular annotation frame according to the annotation information, and display the annotation text in the rectangular annotation frame. In the specific implementation of this embodiment, the rectangular annotation frame is drawn by StrokeRect, and the annotation text is displayed in the rectangular annotation frame.

[0079] Step S303: Set the background of the Canvas to transparent.

[0080] For example, for a file 3000px wide and 4000px high, create Markup 1 with the text "Sample Area 1" and Markup 2 with the text "Sample Area 2" and the text "[1800, 1000], [2500, 1600]]. Use the StrokeRect(x1, y1, w, h) method to draw a rectangle on the canvas based on the coordinates of the marker points and display it. Callout 1: Calculate the rectangle's width: w = 1500 - 500 = 1000; calculate the rectangle's height: h = 1200 - 800 = 400; draw the rectangle: strokeRect(500, 800, 1000, 400), and display the text "Sample Area 1"; Callout 2: Calculate the rectangle's width: w = 2500 - 1800 = 700; calculate the rectangle's height: h = 1600 - 1000 = 600.

[0081] Step S4: Calculate the zoom ratio based on the actual display size of the current display window, adjust the size of the Canvas based on the zoom ratio, and cover the file display area.

[0082] Optionally, the step S4 specifically includes steps S401 to S404.

[0083] Step S401: Obtain the actual display width of the current display window.

[0084] Step S402: Calculate a zoom ratio based on the actual display width (display width) of the current display window and the width (original width) of the original file; wherein the zoom ratio = display width / original width.

[0085] Step S403: Adjust the size of the Canvas according to the scaling ratio to form a Canvas with adjusted size.

[0086] Step S404: Overlay the resized Canvas onto the file display area to achieve accurate alignment of the annotation information.

[0087] Step S5: Display the file with the marked information in the file display area.

[0088] Optionally, in step S5, when the file display area is displayed, the origin of the file display area coordinate system includes three coordinate systems: the origin is located in the lower left corner (the X-axis is positive to the right, and the Y-axis is positive upward), the origin is located in the upper right corner (the X-axis is positive to the left, and the Y-axis is positive downward), and the origin is located in the lower right corner (the X-axis is positive to the left, and the Y-axis is positive upward).

[0089] When the origin of the file display area coordinate system is located in the lower left corner, the coordinate transformation relationship between the first coordinate system and any point (x, y) in the file display area coordinate system is: x2 = x1, y2 = H - y1. This example illustrates the case where the origin of the first coordinate system is located in the upper left corner and the origin of the file display area coordinate system is located in the lower left corner.

[0090]

[0091] like Figure 2 As shown in the figure, the coordinates of the upper left corner of the rectangle for the character's left eye are (315,298), and the coordinates of the lower right corner are (522,434). The coordinates of the upper left corner of the rectangle for the character's right eye are (579,289), and the coordinates of the lower right corner are (781,424). Now convert the coordinates with the origin at the upper left corner (positive X-axis pointing right, positive Y-axis pointing downward) to the coordinates with the origin at the lower left corner of the page (positive X-axis pointing right, positive Y-axis pointing upward).

[0092] In order to convert the annotation information from a coordinate system with the upper left corner as the origin to a coordinate system with the lower left corner as the origin, the Y coordinate needs to be converted. The basic rule of conversion is: assuming the height of the file is H, the Y coordinate y1 with the upper left corner as the origin is converted to the Y coordinate y2 with the lower left corner as the origin. The calculation formula is: y2 = H - y1. Here, we take a annotation information with a height of 800px (i.e. H = 800px) and coordinates based on the lower left corner as the origin as an example:

[0093]

[0094] Converting to a coordinate system with the lower left corner as the origin, we will transform the Y-axis coordinate, while the X-axis coordinate remains unchanged.

[0095] Left eye annotation conversion:

[0096] For the lower left corner point of the left eye [315, 502], the Y-axis is converted to: ynew = 800-502 = 298, and the converted coordinates of the upper left corner of the left eye are [315, 298].

[0097] For the upper right corner point of the left eye [522,366], the Y-axis is converted to: y2=800-366=434, and the converted lower right corner coordinate is [522,434].

[0098] Right eye annotation conversion:

[0099] For the lower left corner point [579, 511] of the right eye, the Y-axis is converted to: y2=800-511=289, and the upper left corner coordinate after conversion is [579, 289].

[0100] For the upper right corner point [781, 376] of the right eye, the Y-axis is converted to: y2 = 800 - 376 = 424, and the converted lower right corner coordinate is [781, 424].

[0101] When the origin of the document display area coordinate system is located at the upper right corner, the coordinate conversion relationship between the first coordinate system and any point (x, y) in the document display area coordinate system is: x2=W-x1, y2=y1.

[0102] When the origin of the document display area coordinate system is located at the lower left corner, the coordinate conversion relationship between the first coordinate system and any point (x, y) in the document display area coordinate system is: x2=W-x1, y2=H-y1.

[0103] Among them, x1 represents the horizontal coordinate in the first coordinate system, x2 represents the horizontal coordinate in the file display area coordinate system (that is, the horizontal coordinate after the x1 coordinate is converted), y1 represents the vertical coordinate in the first coordinate system, y2 represents the vertical coordinate in the file display area coordinate system (that is, the vertical coordinate after the y1 coordinate is converted), H represents the height of the file after scaling, and W represents the width of the file after scaling.

[0104] In order to more intuitively understand the implementation process of the present invention, the following takes the Vue framework as an example to demonstrate how to apply the annotation display method in an actual project.

[0105] 1. Get file size

[0106] Depending on the file type, use the corresponding method to obtain the width and height of the file. The following examples use images and PDFs as examples.

[0107] Example of getting image file size:

[0108]

[0109]

[0110] Example of getting the size of a PDF file:

[0111]

[0112] 2. Provide annotation information

[0113] The annotation information is passed through the properties of the component. The following takes the Vue component as an example:

[0114]

[0115]

[0116] In summary, the method described in this embodiment has the following characteristics:

[0117] (1) Multi-format support: The method of the present invention is not limited to image annotation. It also supports rectangular annotation display in various file formats such as PDF and OFD. Through a unified annotation coordinate system and adaptation mechanism, universal adaptation across formats is achieved, greatly improving the flexibility and applicability of the system.

[0118] (2) Annotation calculation based on original size: Annotation information is based on the original size of the file, using a unified pixel (px) as the measurement unit to ensure that the size and position of the annotation box are accurately aligned with the file content. This method avoids annotation offset and distortion caused by different display environments and improves annotation accuracy.

[0119] (3) Scaling Mechanism: By calculating the scaling ratio of the file in different display windows, the Canvas is scaled accordingly to ensure the consistency and accuracy of annotation information across different devices and platforms. This mechanism solves the problem of inconsistent display in existing annotation systems in cross-platform applications and improves the user experience.

[0120] (4) Transparent Mask Overlay: A transparent Canvas mask is overlaid on the file display layer. By drawing a rectangular frame and annotation text, the annotation information can be visualized. The transparent mask design ensures the normal display of the file content while highlighting the annotation information, enhancing the visibility and usability of the annotation.

[0121] (5) Unified annotation coordinate system: Define the upper left corner of the file as the coordinate origin and establish a unified annotation coordinate system, making the calculation and display of annotation information more concise and consistent across different files and display environments. This design concept provides a solid foundation for cross-platform and cross-format annotation display.

[0122] (6) Conversion and adaptation across coordinate systems: To adapt to the display of annotations in other coordinate systems, such as environments with the lower left corner as the origin or other custom coordinate systems, users can convert based on a unified annotation coordinate system. Annotation information in other coordinate systems can be matched with the unified coordinate system through appropriate coordinate conversion algorithms. For example, converting annotation coordinates based on the lower left corner as the origin to coordinates with the upper left corner as the origin can be achieved through a simple Y-axis flip. In this way, different coordinate systems can be accurately displayed through this invention.

[0123] Example 2:

[0124] like Figure 3-Figure 5 As shown, the present embodiment of the present invention provides a Canvas-based annotation display device for any document format, which specifically includes the following modules:

[0125] The file original data acquisition module 100 is used to obtain the file type and, based on the file type, obtain the original width and height of the file. The file types include image files and PDF files. For image files, the width and height are directly obtained from the image object. For PDF files, the PDF file is first parsed, the width and height of each page are obtained page by page, and the total height is accumulated.

[0126] The annotation information representation module 200 is used to construct a first coordinate system and represent the annotation information in the first coordinate system in the form of rectangular coordinates; wherein the origin of the first coordinate system is located in the upper left corner, the X-axis is positive to the right, and the Y-axis is positive downward, and the annotation information includes the upper left corner coordinates, lower right corner coordinates and annotation text of the rectangular annotation box.

[0127] The transparent mask generation module 300 is used to draw a rectangular annotation frame and annotation text through Canvas to form a transparent mask.

[0128] The transparent mask generation module 300 specifically includes a transparent mask generation first submodule 310 , a transparent mask generation second submodule 320 and a transparent mask generation third submodule 330 .

[0129] The first transparent mask generation submodule 310 is used to create a Canvas element with the same actual size as the file.

[0130] The second transparent mask generation submodule 320 is used to draw a rectangular annotation frame according to the annotation information and display the annotation text in the rectangular annotation frame. In this embodiment, the rectangular annotation frame is drawn by StrokeRect and the annotation text is displayed in the rectangular annotation frame.

[0131] The third transparent mask generation submodule 330 is used to set the background of the Canvas to be transparent.

[0132] The file zoom processing module 400 is used to calculate the zoom ratio according to the actual display size of the current display window, adjust the size of the Canvas according to the zoom ratio, and cover the file display area.

[0133] The file scaling processing module 400 specifically includes a first file scaling processing submodule 410 , a second file scaling processing submodule 420 , a third file scaling processing submodule 430 and a fourth file scaling processing submodule 440 .

[0134] The first submodule 410 for file zoom processing is used to obtain the actual display width of the current display window.

[0135] The second file scaling processing submodule 420 is configured to calculate a scaling ratio according to the actual display width of the current display window and the width of the original file; wherein the scaling ratio = display width / original width.

[0136] The third submodule 430 for file scaling processing is configured to adjust the size of the Canvas according to the scaling ratio to form a Canvas with adjusted size.

[0137] The fourth submodule 440 of the file scaling processing is used to cover the resized Canvas to the file display area to achieve accurate alignment of the annotation information.

[0138] The file display module 500 is used to display files with annotation information in the file display area.

[0139] Among them, when the file display area is displayed, the origin of the file display area coordinate system includes three coordinate systems: the origin is located in the lower left corner, the origin is located in the upper right corner, and the origin is located in the lower right corner.

[0140] When the origin of the file display area coordinate system is located in the lower left corner, the coordinate conversion relationship between the first coordinate system and the file display area coordinate system is: x2=x1, y2=H-y1; when the origin of the file display area coordinate system is located in the upper right corner, the coordinate conversion relationship between the first coordinate system and the file display area coordinate system is: x2=W-x1, y2=y1; when the origin of the file display area coordinate system is located in the lower left corner, the coordinate conversion relationship between the first coordinate system and the file display area coordinate system is: x2=W-x1, y2=H-y1; wherein, x1 represents the horizontal coordinate in the first coordinate system, x2 represents the horizontal coordinate in the file display area coordinate system, y1 represents the vertical coordinate in the first coordinate system, y2 represents the vertical coordinate in the file display area coordinate system, H represents the height of the file after scaling, and W represents the width of the file after scaling.

[0141] While the specific embodiments of the present invention have been described in detail above, these are merely exemplary and the present invention is not limited thereto. For those skilled in the art, any equivalent modifications and substitutions to the present invention are also within the scope of the present invention. Therefore, any equivalent changes and modifications made without departing from the spirit and scope of the present invention are intended to be encompassed within the scope of the present invention.

Claims

1. A method for displaying annotations in any document format based on Canvas, characterized in that: The specific steps include: Step S1: Obtain the file type, and obtain the original width and original height of the file according to the file type; Step S2: construct a first coordinate system, and represent the annotation information in the first coordinate system in the form of rectangular coordinates; wherein the origin of the first coordinate system is located in the upper left corner, the X axis is positive to the right, and the Y axis is positive downward, and the annotation information includes the coordinates of the upper left corner and the lower right corner of the rectangular annotation box and the annotation text; Step S3: Draw a rectangular annotation frame and annotation text through Canvas to form a transparent mask; Step S4: Calculate the zoom ratio based on the actual display size of the current display window, adjust the size of the Canvas based on the zoom ratio, and cover the file display area; Step S5: Display the file with the marked information in the file display area.

2. A method for displaying annotations in any document format based on Canvas according to claim 1, characterized in that: In step S1, the file types include image files and PDF files; for files in image format, the width and height are directly obtained through the image object, and for PDF files, the PDF file is first parsed, the width and height of each page are obtained page by page, and the total height is accumulated.

3. The method for displaying annotations in any document format based on Canvas according to claim 1, characterized in that: In step S3, a rectangular annotation frame and annotation text are drawn on Canvas to form a transparent mask, which specifically includes the following steps: Step S301: Create a Canvas element with the same actual size as the file; Step S302: Draw a rectangular annotation frame according to the annotation information, and display the annotation text in the rectangular annotation frame; Step S303: Set the background of the Canvas to transparent.

4. A method for displaying annotations in any document format based on Canvas according to claim 3, characterized in that: In step S302, a rectangular annotation frame is drawn by using StrokeRect, and the annotation text is displayed in the rectangular annotation frame.

5. The method for displaying annotations in any document format based on Canvas according to claim 1, characterized in that: In step S4, the zoom ratio is calculated according to the actual display size of the current display window, the size of the Canvas is adjusted according to the zoom ratio, and the Canvas is covered to the file display area, which specifically includes the following steps: Step S401: Obtain the actual display width of the current display window; Step S402: Calculate a zoom ratio based on the actual display width of the current display window and the width of the original file; wherein the zoom ratio = display width / original width; Step S403: adjusting the size of the Canvas according to the scaling ratio to form a Canvas with adjusted size; Step S404: Overlay the resized Canvas onto the file display area to achieve accurate alignment of the annotation information.

6. The method for displaying annotations in any document format based on Canvas according to claim 1, characterized in that: In step S5, when the file display area is displayed, the origin of the coordinate system of the file display area includes three coordinate systems: the origin is located in the lower left corner, the origin is located in the upper right corner, and the origin is located in the lower right corner; When the origin of the document display area coordinate system is located at the lower left corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=x1, y2=H-y1; When the origin of the document display area coordinate system is located at the upper right corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=W-x1, y2=y1; When the origin of the document display area coordinate system is located at the lower left corner, the coordinate conversion relationship between the first coordinate system and the document display area coordinate system is: x2=W-x1, y2=H-y1; Among them, x1 represents the horizontal coordinate in the first coordinate system, x2 represents the horizontal coordinate in the file display area coordinate system, y1 represents the vertical coordinate in the first coordinate system, y2 represents the vertical coordinate in the file display area coordinate system, H represents the height of the file after scaling, and W represents the width of the file after scaling.

7. A Canvas-based annotation display device for any document format, characterized in that: Specifically, it includes the following modules: A file original data acquisition module is used to acquire the file type and, based on the file type, acquire the original width and original height of the file; a labeling information representation module, configured to construct a first coordinate system and represent labeling information in the first coordinate system using rectangular coordinates; wherein the origin of the first coordinate system is located in the upper left corner, the X-axis is positive to the right, and the Y-axis is positive downward; and the labeling information includes the coordinates of the upper left corner and the lower right corner of the rectangular labeling box and the labeling text; The transparent mask generation module is used to draw a rectangular annotation box and annotation text through Canvas to form a transparent mask; A file scaling processing module is used to calculate the scaling ratio according to the actual display size of the current display window, adjust the size of the Canvas according to the scaling ratio, and cover the file display area; The file display module is used to display files with annotation information in the file display area.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it implements a Canvas-based annotation display method for any document format as described in any one of claims 1 to 6.

9. An electronic device, characterized in that: It includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements a Canvas-based annotation display method for any document format as described in any one of claims 1 to 6.

Images