Real-time picture loading method and apparatus, whiteboard device, and storage medium

Abstract

Disclosed are a real-time picture loading method and apparatus, a whiteboard device, and a storage medium. The method comprises: upon detection that a touch event is triggered, obtaining an image transformation amount before and after the touch event occurs and performing image transformation on an original image on the basis of the image transformation amount; then obtaining the size of a screen and coordinates of each pixel point in the transformed image to determine a first image area of the original image within a screen range after the touch event occurs; comparing a second image area of the original image within the screen range before the touch event occurs with the first image area to determine a newly-added image area to be drawn; and drawing said newly-added image area, integrating the drawn newly-added image area with the image area that is still within the screen range after the touch event occurs and displaying the integrated image. By implementing the present invention, in the case of picture transformation, it is available to only draw the newly-added image area to be drawn, thereby reducing the volume of data to be obtained and increasing the real-time picture loading speed.

Description

Real-time image loading method, device, whiteboard device and storage medium Technical Field

[0001] The present invention relates to the field of intelligent applications, and in particular to a real-time picture loading method, device, whiteboard equipment and storage medium. Background Art

[0002] When using an electronic whiteboard to draw images, when you need to view image content on the canvas that exceeds the current screen, you need to drag and zoom the canvas. However, when there is a lot of canvas data, dragging and zooming the canvas is prone to lag and incomplete data display. Therefore, how to achieve real-time loading of the image when dragging and zooming the canvas is a problem that needs to be solved urgently.

[0003] Summary of the Invention

[0004] The present invention provides a real-time picture loading method, device, whiteboard equipment and storage medium. When a canvas is dragged and zoomed, the method can load the display of the dragged canvas in real time.

[0005] An embodiment of the present invention provides a method for real-time loading of images, comprising:

[0006] When a touch event is detected, obtaining the image transformation amount of the original image before and after the touch event occurs;

[0007] Performing image transformation on the original image according to the image transformation amount to obtain a transformed image;

[0008] Obtain the screen size and the coordinates of each pixel in the transformed image, and determine the first image area of ​​the original image within the screen range after the touch event occurs;

[0009] Comparing the second image area of ​​the original image within the screen range before the touch event occurs with the first image area of ​​the original image within the screen range after the touch event occurs to determine a newly added image area to be drawn;

[0010] The image area to be drawn is drawn, and then after drawing, it is integrated with the remaining image areas that are still within the screen range after the touch event occurs, and the integrated image is displayed.

[0011] Furthermore, the touch event includes: an image drag event; the image transformation amount includes: an image translation amount;

[0012] When a touch event is detected, acquiring an image transformation amount of the original image before and after the touch event occurs; and performing image transformation on the original image according to the image transformation amount to obtain a transformed image, including:

[0013] When a drag event is detected, the image translation amount of the original image is obtained;

[0014] The original image is subjected to translation transformation according to the image translation amount to obtain a transformed image.

[0015] Furthermore, when a drag event is detected to be triggered, the image translation amount of the original image is obtained, including:

[0016] When two or more touch points are detected and the distance moved by the first two touch points exceeds a preset distance within a preset time period, a drag event is triggered;

[0017] When the drag event is triggered, the image translation amount of the original image is calculated based on the distances moved by the first two touch points within a preset time period.

[0018] Furthermore, the touch event includes: a zoom event; the image transformation amount includes: an image zoom factor;

[0019] The method of acquiring, when detecting that a touch event is triggered, an image transformation amount of the original image before and after the touch event occurs; and performing image transformation on the original image according to the image transformation amount to obtain a transformed image includes:

[0020] When a zoom event is detected to be triggered, the image zoom factor of the original image is obtained;

[0021] The original image is scaled according to the image scaling factor to obtain a transformed image.

[0022] Furthermore, when it is detected that a zoom event is triggered, obtaining the image zoom factor of the original image includes:

[0023] When two or more touch points are detected and the change in the distance between the first two touch points exceeds a preset change threshold within a preset time period, a zoom event is triggered;

[0024] When the zoom event is triggered, the transformation amount of the distance between the first two touch points is obtained, and the image zoom factor is determined according to the transformation amount.

[0025] Furthermore, performing image transformation on the original image according to the image transformation amount to obtain a transformed image includes:

[0026] At preset intervals, the image transformation amount is passed as an input parameter to a Matrix function, so that after receiving the image transformation amount, the Matrix function transforms the original image according to the image transformation amount to obtain a transformed image.

[0027] Furthermore, obtaining the size of the screen and the coordinates of each pixel in the transformed image to determine the first image area of ​​the original image within the screen range after dragging includes:

[0028] Obtaining the size of the screen and the transformed image;

[0029] According to the size of the screen and the transformed image, cropping the portion of the transformed image that exceeds the screen size and retaining the remaining portion;

[0030] The remaining portion is used as the first image area.

[0031] The present application also provides a real-time image loading device, comprising:

[0032] An image transformation amount acquisition module is used to acquire the image transformation amount of the original image before and after the touch event occurs when a touch event is detected;

[0033] a transformed image acquisition module, configured to perform image transformation on the original image according to the image transformation amount to obtain a transformed image;

[0034] A first image area acquisition module is used to obtain the size of the screen and the coordinates of each pixel in the transformed image, and determine the first image area of ​​the original image within the screen range after the touch event occurs;

[0035] An image area acquisition module for obtaining an image area to be drawn is used to compare a second image area of ​​the original image within the screen range before the touch event occurs with a first image area of ​​the original image within the screen range after the touch event occurs, to determine a newly added image area to be drawn;

[0036] The screen display module is used to draw the image area to be drawn, and then integrate it with the remaining image areas that are still within the screen range after the touch event occurs, and display the integrated image.

[0037] The present application also provides a whiteboard device, comprising:

[0038] one or more processors;

[0039] a memory, coupled to the processor, for storing one or more programs;

[0040] When the one or more programs are executed by the one or more processors, the one or more processors implement the real-time screen loading method as described in the above embodiment of the invention.

[0041] The present application also provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the real-time screen loading method as described in the above-mentioned embodiment of the invention.

[0042] The following beneficial effects are achieved by implementing the present invention:

[0043] The present invention provides a real-time screen loading method, device, whiteboard device and storage medium. When a touch event is detected to be triggered, the method obtains the image transformation amount of the original image before and after the touch event occurs, and calculates the transformed image based on the image transformation amount. By obtaining the screen size and the coordinates of each pixel point in the transformed image, the first image area of ​​the original image within the screen range after the touch event occurs is determined. Thus, by comparing the second image area of ​​the original image within the screen range before the touch event occurs with the first image area of ​​the original image within the screen range after the touch event occurs, a newly added image area to be drawn is determined, and only the newly added image area to be drawn is redrawn. Further, the remaining image areas still within the screen range after the touch event occur are integrated and displayed with the redrawn image areas, thereby reducing the image areas that need to be redrawn each time a touch event occurs, thereby reducing the amount of data, effectively improving the real-time screen loading speed, and avoiding freezes. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] In order to more clearly illustrate the technical solution of the present application, the following is a brief introduction to the drawings required for use in the implementation. Obviously, the drawings described below are only some implementation methods of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0045] FIG1 is a flow chart of a method for real-time loading of images provided in an embodiment of the present application;

[0046] FIG2 is a schematic diagram of dragging a screen in real time loading method provided by an embodiment of the present application;

[0047] FIG3 is a schematic structural diagram of a real-time image loading device provided by an embodiment of the present application;

[0048] FIG4 is a schematic structural diagram of a whiteboard device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0049] To make the objectives, technical solutions, and advantages of this application more clear, the technical solutions in this application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of this application. Obviously, the described embodiments are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making any creative efforts are within the scope of protection of this application.

[0050] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which this application belongs; the terms used herein are only for the purpose of describing specific embodiments and are not intended to limit this application; the terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned figure descriptions are intended to cover non-exclusive inclusions.

[0051] In the description of the embodiments of this application, the technical terms "first" and "second" are used only to distinguish different objects and should not be understood to indicate or imply relative importance or implicitly specify the quantity, specific order, or primary and secondary relationship of the indicated technical features. In the description of the embodiments of this application, the meaning of "plurality" is more than two, unless otherwise clearly and specifically defined.

[0052] References herein to "embodiments" mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it constitute an independent or alternative embodiment that is mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0053] In the description of the embodiments of this application, the term "and / or" is simply a description of the association relationship between associated objects, indicating that three relationships can exist. For example, A and / or B can represent the following three situations: A exists alone, A and B exist simultaneously, and B exists alone. In addition, the character " / " in this document generally indicates that the associated objects are in an "or" relationship.

[0054] In the description of the embodiments of the present application, the term "multiple" refers to more than two (including two). Similarly, "multiple groups" refers to more than two groups (including two groups), and "multiple pieces" refers to more than two pieces (including two pieces).

[0055] In the description of the embodiments of the present application, unless otherwise expressly specified or limited, technical terms such as "installed," "connected," "connected," and "fixed" should be understood in a broad sense. For example, they can refer to fixed connections, detachable connections, or integration; mechanical connections or electrical connections; direct connections or indirect connections through an intermediate medium; internal connections between two components or interactions between two components. Those skilled in the art can understand the specific meanings of the above terms in the embodiments of the present application based on specific circumstances.

[0056] 1 is a flow chart of a method for real-time loading of images provided by an embodiment of the present invention, which includes:

[0057] Step S1: when a touch event is detected, obtaining the image transformation amount of the original image before and after the touch event occurs;

[0058] In a preferred embodiment, the touch event includes: an image drag event; the image transformation amount includes: an image translation amount;

[0059] In a preferred embodiment, the touch event includes a zoom event; and the image transformation amount includes an image zoom factor.

[0060] Step S2: performing image transformation on the original image according to the image transformation amount to obtain a transformed image;

[0061] In a preferred embodiment, when a touch event is detected, obtaining an image transformation amount of the original image before and after the touch event occurs; and performing image transformation on the original image according to the image transformation amount to obtain a transformed image includes:

[0062] When a drag event is detected, the image translation amount of the original image is obtained;

[0063] Performing a translation transformation on the original image according to the image translation amount to obtain a transformed image;

[0064] In a preferred embodiment, when detecting that a drag event is triggered, obtaining the image translation amount of the original image includes:

[0065] When two or more touch points are detected and the distance moved by the first two touch points exceeds a preset distance within a preset time period, a drag event is triggered;

[0066] When the drag event is triggered, the image translation amount of the original image is calculated according to the distances moved by the first two touch points within a preset time period;

[0067] For example, assume that there is a whiteboard device with a screen resolution of 3840*2160, and the actual display layer resolution of the whiteboard device is 7680*4320. At this time, it is necessary to drag the canvas to view a picture that exceeds the current screen display portion. Therefore, it is necessary to drag the current canvas to display the picture;

[0068] In a schematic diagram, within a preset time period, if the whiteboard device senses that there are two or more touch points on the screen, it is necessary to obtain the coordinate values ​​P0 (p x0 ,p y0 ) and P1(p x1 ,p y1 ), calculate the two touch points P0 (p x0 ,p y0 ) and P1(p x1 ,p y1 ) between the center point coordinates P2(p x2 ,p y2 ), and, according to the coordinate values ​​P3 (p x3 ,p y3 ) and P4(p x4 ,p y4 ), calculate the two touch points P3 (p x3 ,p y3 ) and P4(p x4 ,p y4 )’s center point coordinates P5(p x5 ,p y5 ), calculate the coordinates of the two center points P2(p x2 ,p y2 ) and P5(p x5 ,p y5 ) and trigger a drag event when the moving distance is greater than a preset value;

[0069] Specifically, the touch points are obtained through MotionEvent, that is, different marks are generated according to the order of touch, such as: the first touch point is marked as 0, and the second touch point is marked as 1;

[0070] Specifically, the center point coordinate P2(p x2 ,p y2 ) is calculated as:

[0071] Specifically, the center point coordinate P5 (p x5 ,p y5 ) is calculated as:

[0072] According to the center point coordinate P2(p x2 ,p y2 ) and P5(p x5 ,p y5 ), calculate the moving distance D1; wherein, the calculation formula of the moving distance D1 is:

[0073] D1=py5-py2 (5)

[0074] Specifically, the preset value is set to 1 mm, that is, when the calculated moving distance D1 is greater than 1 mm, the drag event is triggered, and the moving distance is used as the image translation amount of the original image;

[0075] In a preferred embodiment, when a touch event is detected to be triggered, obtaining an image transformation amount of the original image before and after the touch event occurs; and performing image transformation on the original image according to the image transformation amount to obtain a transformed image includes:

[0076] When a zoom event is detected to be triggered, the image zoom factor of the original image is obtained;

[0077] Performing scaling transformation on the original image according to the image scaling factor to obtain a transformed image;

[0078] In a preferred embodiment, when a zoom event is detected to be triggered, obtaining the image zoom factor of the original image includes:

[0079] When two or more touch points are detected and the change in the distance between the first two touch points exceeds a preset change threshold within a preset time period, a zoom event is triggered;

[0080] When the zoom event is triggered, obtaining a change in the distance between the first two touch points, and determining the image zoom factor according to the change;

[0081] For example, assume that there is a whiteboard device with a screen resolution of 3840*2160, and the actual display layer resolution of the whiteboard device is 7680*4320. At this time, the image outside the screen needs to be displayed on the current screen. At this time, the screen is zoomed in and out;

[0082] In a schematic diagram, within a preset time period, if the whiteboard device senses that there are two or more touch points on the screen, it is necessary to obtain the coordinate values ​​P6 (p x6 ,p y6 ) and P7(p x7 ,p y7 ), calculate the two touch points P6 (p x6,p y6 ) and P7(p x7 ,p y7 ) between the center point coordinates P8(p x8 ,p y8 ), and, according to the coordinate values ​​P9 (p x9 ,p y9 ) and P 10 (p x10 ,p y10 ), calculate the two touch points P9 (p x9 ,p y9 ) and P 10 (p x10 ,p y10 )’s center point coordinates P 11 (p x11 ,p y11 ), calculate the coordinates of the two center points P8 (p x8 ,p y8 ) and P 11 (p x11 ,p y11 ) The distance change amount, when the distance change amount is greater than a preset value, triggering a zoom event;

[0083] Specifically, the center point coordinate P8 (p x8 ,p y8 ) is calculated as:

[0084] Specifically, the center point coordinate P 11 (p x11 ,p y11 ) is calculated as:

[0085] According to the center point coordinate P8 (p x8 ,p y8 ) and P 11 (p x11 ,p y11 ), calculate the moving distance D2; wherein, the calculation formula of the moving distance D2 is:

[0086] D2=py 11 -py8 (10)

[0087] Specifically, the preset value is set to 1 mm, that is, when the calculated moving distance D2 is greater than 1 mm, the drag event is triggered, and the moving distance is used as the image scaling factor of the original image.

[0088] Step S3: Obtain the screen size and the coordinates of each pixel in the transformed image, and determine the first image area of ​​the original image within the screen range after the touch event occurs;

[0089] In a preferred embodiment, performing image transformation on the original image according to the image transformation amount to obtain a transformed image includes:

[0090] Passing the image transformation amount as an input parameter to a Matrix function at a preset time interval, so that after receiving the image transformation amount, the Matrix function transforms the original image according to the image transformation amount to obtain a transformed image;

[0091] Indicatively, the callback frequency of the function is set to be greater than or equal to 50ms to prevent lag caused by untimely data processing due to too fast a data acquisition time interval;

[0092] Specifically, by calling the Matrix function and passing the image translation amount as input parameter data to the Matrix function, the Matrix function translates the original image according to the image transformation amount after receiving the image translation amount to obtain a translated image;

[0093] Specifically, by calling the Matrix function and passing the image scaling factor as input parameter data to the Matrix function, the Matrix function scales the original image according to the image scaling factor after receiving the image scaling factor to obtain the scaled image.

[0094] It should be noted that the Matrix function is a function in the Unity engine, which is used to define the transformation matrix in 3D space. Through the Matrix function, images can be transformed, such as translated, rotated, and scaled. In Unity, each image has a Transform component, and the image can be transformed by setting the Matrix property of the Transform component. At the same time, the Matrix property of the Transform component can also be set through code to achieve image transformation.

[0095] Step S4: Compare the second image area of ​​the original image within the screen range before the touch event occurs with the first image area of ​​the original image within the screen range after the touch event occurs to determine a newly added image area to be drawn;

[0096] In a preferred embodiment, obtaining the size of the screen and the coordinates of each pixel in the transformed image, and determining the first image area of ​​the original image within the screen range after dragging, includes:

[0097] Obtaining the size of the screen and the transformed image;

[0098] According to the size of the screen and the transformed image, cropping the portion of the transformed image that exceeds the screen size and retaining the remaining portion;

[0099] using the remaining portion as the first image area;

[0100] Schematically, referring to FIG2 , FIG2A includes a screen, a picture displayed on the screen (i.e., the diagonal line portion in the figure), and a picture not displayed on the screen (i.e., the dotted line portion in the figure); FIG2B includes a first image area of ​​the original image within the screen range after translation and dragging (i.e., the diagonal line portion in the figure), a portion to be cropped (i.e., the vertical line portion in the figure), and a newly added image area to be drawn (i.e., the black portion in the figure);

[0101] According to the size of the screen and the translated image, the portion of the image that exceeds the screen size after translation is cropped, and a first image area of ​​the original image within the screen range after the touch event occurs is retained. The first image area and a second image area of ​​the original image within the screen range are compared, and a newly added image area to be drawn is determined based on the comparison result. The image area to be drawn is drawn, and then after drawing, it is integrated with the remaining image areas that are still within the screen range after the touch event occurs, and the integrated image is displayed.

[0102] Step S5: drawing the image area to be drawn, integrating it with the remaining image areas that remain on the screen after the touch event occurs, and displaying the integrated image;

[0103] Schematically, the process of drawing the integrated image is as follows: SurfaceHolder is used to control SurfaceView for drawing; first, SurfaceHolder needs to be obtained through the getHolder() method of SurfaceView, and then the Canvas object is obtained through the SurfaceHolder.lockCanvas() method, and the drawing operation is performed on the Canvas object. After the drawing is completed in the back buffer, the SurfaceHolder.unlockCanvasAndPost() method is called to submit the Canvas object to the front buffer, and the content of the back buffer is copied to the front buffer. Finally, the content of the front buffer is displayed, that is, the integrated image is displayed on the screen;

[0104] It should be noted that the SurfaceHolder is an interface that provides a method for accessing the Surface underlying the SurfaceView; the SurfaceView is a view that can be drawn in a separate window, allowing drawing in a separate thread, thereby avoiding the jamming that may occur when drawing in the main thread; the getHolder() is a method of SurfaceView that controls the drawing of SurfaceView by returning a SurfaceHolder object; the SurfaceHolder.lockCanvas() is a method of SurfaceHolder that is used to obtain a Canvas object for drawing on it; the Canvas object is a canvas on which graphics and text can be drawn; the front buffer refers to the image currently being displayed on the screen; the back buffer refers to the image being drawn; after the drawing is completed, the contents of the back buffer are copied to the front buffer, thereby realizing the display of the image.

[0105] Referring to FIG3 , an embodiment of the present application further provides a real-time image loading device, comprising:

[0106] An image transformation amount acquisition module is used to acquire the image transformation amount of the original image before and after the touch event occurs when a touch event is detected;

[0107] a transformed image acquisition module, configured to perform image transformation on the original image according to the image transformation amount to obtain a transformed image;

[0108] A first image area acquisition module is used to obtain the size of the screen and the coordinates of each pixel in the transformed image, and determine the first image area of ​​the original image within the screen range after the touch event occurs;

[0109] The image area acquisition module to be drawn is used to compare the second image area of ​​the original image within the screen range before the touch event occurs with the first image area of ​​the original image within the screen range after the touch event occurs to determine a new image area to be drawn;

[0110] The screen display module is used to draw the image area to be drawn, and then integrate it with the remaining image areas that are still within the screen range after the touch event occurs, and display the integrated image.

[0111] It is understood that the above-mentioned real-time image loading device can implement the real-time image loading method of the above-mentioned method embodiment. The optional options in the above-mentioned method embodiment are also applicable to this embodiment and will not be described in detail here. The remaining contents of the embodiment of this application can refer to the contents of the above-mentioned method embodiment and will not be repeated in this embodiment.

[0112] Referring to FIG. 4 , one embodiment of the present application further provides a whiteboard device, including:

[0113] one or more processors;

[0114] a memory, coupled to the processor, for storing one or more programs;

[0115] When the one or more programs are executed by the one or more processors, the one or more processors implement the above-mentioned method for real-time screen loading.

[0116] The processor is used to control the overall operation of the whiteboard device to complete all or part of the steps of the above-mentioned real-time screen loading method. The memory is used to store various types of data to support the operation of the whiteboard device. For example, these data may include instructions for any application or method operating on the whiteboard device, as well as application-related data. The memory can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0117] In an exemplary embodiment, the whiteboard device can be implemented by one or more application-specific integrated circuits (AS1C), digital signal processors (DSP), digital signal processing devices (DSPD), programmable logic devices (PLD), field programmable gate arrays (FPGA), controllers, microcontrollers, microprocessors or other electronic components to execute the real-time screen loading method described in any of the above embodiments and achieve the same technical effect as the above method.

[0118] In another exemplary embodiment, a computer-readable storage medium including a computer program is further provided. When executed by a processor, the computer program implements the steps of the real-time screen loading method described in any of the above embodiments. For example, the computer-readable storage medium may be the aforementioned memory including the computer program. The computer program may be executed by a processor of a whiteboard device to perform the real-time screen loading method described in any of the above embodiments and achieve the same technical effects as the above methods.

[0119] The above is a preferred embodiment of the present invention. 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 invention. These improvements and modifications are also considered to be within the scope of protection of the present invention.

Claims

1. A real-time picture loading method, characterized in that: include: When a touch event is detected to be triggered, the image transformation amount of the original image before and after the touch event occurs is obtained; Performing image transformation on the original image according to the image transformation amount to obtain a transformed image; Obtain the size of the screen and the coordinates of each pixel in the transformed image, and determine the first image area of ​​the original image within the screen range after the touch event occurs; Compare the second image area of ​​the original image within the screen range before the touch event occurs with the first image area of ​​the original image within the screen range after the touch event occurs to determine a newly added image area to be drawn; The image area to be drawn is drawn, and then after drawing, it is integrated with the remaining image areas that are still within the screen range after the touch event occurs, and the integrated image is displayed.

2. The real-time picture loading method according to claim 1, characterized in that: The touch event includes: an image drag event; the image transformation amount includes: an image translation amount; When a touch event is detected, acquiring an image transformation amount of the original image before and after the touch event occurs; and performing image transformation on the original image according to the image transformation amount to obtain a transformed image, including: When a drag event is detected to be triggered, the image translation amount of the original image is obtained; The original image is subjected to translation transformation according to the image translation amount to obtain a transformed image.

3. The real-time picture loading method according to claim 2, characterized in that: When the drag event is detected to be triggered, obtaining the image translation amount of the original image includes: When more than two touch points are detected and the distance moved by the first two touch points within a preset time period exceeds a preset distance, a drag event is triggered; When the drag event is triggered, the first two touch points are moved within a preset period of time. Distance, calculate the image translation of the original image.

4. The real-time picture loading method according to claim 1, characterized in that: The touch event includes: a zoom event; the image transformation amount includes: an image zoom factor; When a touch event is detected to be triggered, acquiring the image transformation amount of the original image before and after the touch event occurs; performing image transformation on the original image according to the image transformation amount to obtain a transformed image, including: When a zoom event is detected to be triggered, the image zoom factor of the original image is obtained; The original image is scaled according to the image scaling factor to obtain a transformed image.

5. The real-time picture loading method according to claim 4, characterized in that: When a zoom event is detected, the image zoom factor of the original image is obtained, including: When more than two touch points are detected and the change amount of the distance between the first two touch points exceeds a preset change amount threshold within a preset time period, a zoom event is triggered; When the zoom event is triggered, the change amount of the distance between the first two touch points is obtained, and the image zoom factor is determined according to the change amount.

6. The real-time picture loading method according to claim 1, characterized in that: The performing image transformation on the original image according to the image transformation amount to obtain a transformed image includes: At preset intervals, the image transformation amount is passed as an input parameter to a Matrix function, so that after receiving the image transformation amount, the Matrix function transforms the original image according to the image transformation amount to obtain a transformed image.

7. The real-time picture loading method according to claim 1, characterized in that: Acquiring the size of the screen and the coordinates of each pixel in the transformed image, and determining the first image area of ​​the original image within the screen range after dragging, including: Obtaining the size of the screen and the transformed image; According to the size of the screen and the transformed image, the portion of the transformed image exceeding the screen size is cropped, and the remaining portion is retained; The remaining part is used as the first image area.

8. A real-time picture loading device, characterized in that: include: An image transformation amount acquisition module is used to acquire the image transformation amount of the original image before and after the touch event occurs when a touch event is detected to be triggered; A transformed image acquisition module, used for performing image transformation on the original image according to the image transformation amount to obtain a transformed image; A first image area acquisition module, used to acquire the size of the screen and the coordinates of each pixel in the transformed image, and determine the first image area of ​​the original image within the screen range after the touch event occurs; The image area acquisition module to be drawn is used to compare the second image area of ​​the original image within the screen range before the touch event occurs with the first image area of ​​the original image within the screen range after the touch event occurs, and determine a newly added image area to be drawn; The screen display module is used to draw the image area to be drawn, and then integrate it with the remaining image area that is still within the screen range after the touch event occurs, and display the integrated image.

9. A whiteboard device, characterized in that: include: one or more processors; A memory, coupled to the processor, for storing one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the real-time screen loading method as described in any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the real-time screen loading method according to any one of claims 1 to 7 is implemented.

Images