CN112684962A - Canvas extension method, device, storage medium and terminal - Google Patents
Canvas extension method, device, storage medium and terminal Download PDFInfo
- Publication number
- CN112684962A CN112684962A CN202110067721.4A CN202110067721A CN112684962A CN 112684962 A CN112684962 A CN 112684962A CN 202110067721 A CN202110067721 A CN 202110067721A CN 112684962 A CN112684962 A CN 112684962A
- Authority
- CN
- China
- Prior art keywords
- canvas
- edge
- offset
- content
- terminal
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the application discloses a canvas expansion method, a device, a storage medium and a terminal, wherein a moving instruction for the canvas is received, a container bearing the canvas is moved according to a moving direction corresponding to the moving instruction, the canvas comprises a first edge and a third edge, a viewport comprises a second edge and a fourth edge, the first edge is parallel to the third edge, the second edge is parallel to the fourth edge, the first edge and the second edge are positioned on the same side of the moving direction, the third edge and the fourth edge are positioned on the same side of the opposite direction of the moving direction, and the canvas at least comprises a first area and a second area which are adjacent; when the first edge is overlapped with the second edge, the first content of the first area is triggered to be drawn as the second content, the second content of the second area is drawn as the third content, and the container is moved to the position where the third edge is overlapped with the fourth edge along the opposite direction. By adopting the embodiment of the application, the function of infinitely extending the canvas of the drawing application to carry out infinite drawing is realized.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a canvas extension method, an apparatus, a storage medium, and a terminal.
Background
Generally, a function such as a brush is needed to draw content on a web drawing application such as a conference collaboration whiteboard or a web drawing function, but the drawing range is only the screen size, and the user requirement cannot be met. In order to expand the drawing range and achieve the effect of the wireless canvas, one way is to use the canvas as large as possible, for example, as shown in fig. 1, the viewport is the area on the screen for displaying the web drawing application, the canvas with the size of 5 times of the viewport is used, the viewport is located at the center of the canvas, by moving the canvas, the offset is calculated, and the content with different positions on the canvas is shown in the viewport according to the offset, thereby achieving the function of canvas expansion. However, the size of the canvas needs to be increased when the size of the canvas is expanded, and when the canvas is rendered or drawn each time, all contents on the infinite canvas need to be cleared first and rendered again, so that the clearing and redrawing areas are increased along with the enlargement of the canvas, the delay is large, and the pause phenomenon is obvious when the canvas redraws the graphic data. In another way, a canvas (single canvas) with the same size as the viewport is used, as shown in fig. 2, when the canvas is moved each time, the positions of the points need to be recalculated, and the content on the canvas needs to be redrawn, so as to achieve the canvas extension function. Because the canvas is removed and redrawing operation is carried out every time, when the data volume in the canvas is large, the redrawing time is prolonged and even is blocked, and redrawing can be triggered every time the canvas is moved, so that the efficiency is low and the expandability is poor.
Disclosure of Invention
The embodiment of the application provides a canvas expansion method, a canvas expansion device, a storage medium and a terminal, which realize the function of infinitely expanding the canvas of drawing application to infinitely draw graphics, and have the advantages of fast rendering, high efficiency, low redrawing frequency and good expandability. The technical scheme is as follows:
in a first aspect, an embodiment of the present application provides a canvas extension method, which is applied to a first terminal, where the first terminal is installed with a web drawing application, the canvas is a region of the web drawing application for bearing drawing content, a container is used for bearing the canvas, a viewport is a region of the first terminal for displaying the web drawing application on a screen, a first length of the canvas is a first preset multiple of a second length of the viewport, a first width of the canvas is a second preset multiple of a second width of the viewport, both the first preset multiple and the second preset multiple are greater than 1, a moving instruction for the canvas is received, the container bearing the canvas is moved according to a moving direction corresponding to the moving instruction, the canvas includes a first edge and a third edge, the viewport includes a second edge and a fourth edge, the first edge is parallel to the third edge, the second edge is parallel to the fourth edge, the first edge and the second edge are located on the same side of the moving direction, the third edge and the fourth edge are positioned on the same side in the opposite direction of the moving direction, the canvas at least comprises a first area and a second area which are adjacent, the first area draws first content, and the second area draws second content;
when the first edge is overlapped with the second edge, the first content of the first area is triggered to be drawn as the second content, the second content of the second area is drawn as the third content, and the container is moved to the position where the third edge is overlapped with the fourth edge along the opposite direction.
In a second aspect, embodiments of the present application provide a computer storage medium having stored thereon a plurality of instructions adapted to be loaded by a processor and to perform the above-mentioned method steps.
In a third aspect, an embodiment of the present application provides a terminal, which may include: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the above-mentioned method steps.
In this embodiment of the application, a web drawing application is installed on a first terminal, a canvas is an area of the web drawing application for bearing drawing content, a container is used for bearing the canvas, a viewport is an area of the first terminal for displaying the web drawing application on a screen, a first length of the canvas is a majority of a second length of the viewport, and a first width of the canvas is a multiple of a second width of the viewport. By adopting the canvas with a proper size through the web technology, the function of infinitely extending the canvas of the drawing application to infinitely draw the graph is realized, and the canvas with a relatively large size has the advantages of fast rendering, high efficiency, no blockage, no sense of common users and good experience. The canvas with a relatively small size has low redrawing frequency, extremely high maintainability and good expandability.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is an exemplary schematic diagram of a 5-fold canvas provided in an embodiment of the present application;
FIG. 2 is a schematic diagram illustrating an example of a single canvas according to an embodiment of the present application;
fig. 3 is a schematic structural diagram of a terminal provided in an embodiment of the present application;
FIG. 4 is a schematic structural diagram of an operating system and a user space provided in an embodiment of the present application;
FIG. 5 is an architectural diagram of the android operating system of FIG. 3;
FIG. 6 is an exemplary diagram of a 2-fold canvas provided in an embodiment of the present application;
FIG. 7 is a flowchart illustrating a canvas expansion method according to an embodiment of the present application;
FIG. 8a is a diagram illustrating an example of a canvas edge and a viewport edge according to an embodiment of the present application;
FIG. 8b is an exemplary diagram of another canvas edge and viewport edge provided in an embodiment of the present application;
FIG. 9 is an exemplary diagram of a canvas provided in an embodiment of the present application before moving;
FIG. 10 is a diagram illustrating an example of a moved canvas according to an embodiment of the present application;
FIG. 11 is a flowchart illustrating another canvas expansion method according to an embodiment of the present application;
FIG. 12 is a schematic diagram illustrating an example of relative positions of an origin and a positioning point according to an embodiment of the present disclosure;
FIG. 13 is a diagram illustrating an example of a canvas movement effect in a speaker mode according to an embodiment of the present application;
FIG. 14 is a schematic structural diagram of a canvas expansion apparatus according to an embodiment of the present application;
fig. 15 is a schematic structural diagram of a canvas expansion apparatus according to an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
In the description of the present application, it is to be understood that the terms "first," "second," and the like are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. In the description of the present application, it is noted that, unless explicitly stated or limited otherwise, "including" and "having" and any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or apparatus. The specific meaning of the above terms in the present application can be understood in a specific case by those of ordinary skill in the art. Further, in the description of the present application, "a plurality" means two or more unless otherwise specified. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.
Referring to fig. 3, a block diagram of a terminal according to an exemplary embodiment of the present application is shown. The terminal can be terminal equipment such as an interactive intelligent tablet, a mobile phone, a computer and a tablet. A terminal in the present application may include one or more of the following components: a processor 110, a memory 120, an input device 130, an output device 140, and a bus 150. The processor 110, memory 120, input device 130, and output device 140 may be connected by a bus 150.
The Memory 120 may include a Random Access Memory (RAM) or a read-only Memory (ROM). Optionally, the memory 120 includes a non-transitory computer-readable medium. The memory 120 may be used to store instructions, programs, code sets, or instruction sets. The memory 120 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for implementing at least one function (such as a touch function, a sound playing function, an image playing function, etc.), instructions for implementing various method embodiments described below, and the like, and the operating system may be an Android (Android) system, including a system based on Android system depth development, an IOS system developed by apple, including a system based on IOS system depth development, or other systems. The storage data area may also store data created by the terminal in use, such as a phonebook, audio-video data, chat log data, etc.
Referring to fig. 4, the memory 120 may be divided into an operating system space, in which an operating system runs, and a user space, in which native and third-party applications run. In order to ensure that different third-party application programs can achieve a better operation effect, the operating system allocates corresponding system resources for the different third-party application programs. However, the requirements of different application scenarios in the same third-party application program on system resources are different, for example, in a local resource loading scenario, the third-party application program has a higher requirement on the disk reading speed; in the animation rendering scene, the third-party application program has a high requirement on the performance of the GPU. The operating system and the third-party application program are independent from each other, and the operating system cannot sense the current application scene of the third-party application program in time, so that the operating system cannot perform targeted system resource adaptation according to the specific application scene of the third-party application program.
In order to enable the operating system to distinguish a specific application scenario of the third-party application program, data communication between the third-party application program and the operating system needs to be opened, so that the operating system can acquire current scenario information of the third-party application program at any time, and further perform targeted system resource adaptation based on the current scenario.
Taking an operating system as an Android system as an example, programs and data stored in the memory 120 are as shown in fig. 5, and a Linux kernel layer 320, a system runtime library layer 340, an application framework layer 360, and an application layer 380 may be stored in the memory 120, where the Linux kernel layer 320, the system runtime library layer 340, and the application framework layer 360 belong to an operating system space, and the application layer 380 belongs to a user space. The Linux kernel layer 320 provides underlying drivers for various hardware of the terminal, such as a display driver, an audio driver, a camera driver, a bluetooth driver, a Wi-Fi driver, a power management, and the like. The system runtime library layer 340 provides a main feature support for the Android system through some C/C + + libraries. For example, the SQLite library provides support for a database, the OpenGL/ES library provides support for 3D drawing, the Webkit library provides support for a browser kernel, and the like. Also provided in the system runtime library layer 340 is an Android runtime library (Android runtime), which mainly provides some core libraries that can allow developers to write Android applications using the Java language. The application framework layer 360 provides various APIs that may be used in building an application, and developers may build their own applications by using these APIs, such as activity management, window management, view management, notification management, content provider, package management, session management, resource management, and location management. At least one application program runs in the application layer 380, and the application programs may be native application programs carried by the operating system, such as a contact program, a short message program, a clock program, a camera application, and the like; or a third-party application developed by a third-party developer, such as a game application, an instant messaging program, a photo beautification program, a word translation program, and the like.
The input device 130 is used for receiving input instructions or data, and the input device 130 includes, but is not limited to, a keyboard, a mouse, a camera, a microphone, or a touch device. The output device 140 is used for outputting instructions or data, and the output device 140 includes, but is not limited to, a display device, a speaker, and the like. In one example, the input device 130 and the output device 140 may be combined, and the input device 130 and the output device 140 are touch display screens.
The touch display screen can be designed as a full-face screen, a curved screen or a profiled screen. The touch display screen can also be designed to be a combination of a full-face screen and a curved-face screen, and a combination of a special-shaped screen and a curved-face screen, which is not limited in the embodiment of the present application.
In addition, those skilled in the art will appreciate that the configurations of the terminals illustrated in the above-described figures do not constitute limitations on the terminals, as the terminals may include more or less components than those illustrated, or some components may be combined, or a different arrangement of components may be used. For example, the terminal further includes a radio frequency circuit, an input unit, a sensor, an audio circuit, a wireless fidelity (WiFi) module, a power supply, a bluetooth module, and other components, which are not described herein again.
In the embodiment of the present application, the main body of execution of each step may be the terminal described above. Optionally, the execution subject of each step is an operating system of the terminal. The operating system may be an android system, an IOS system, or another operating system, which is not limited in this embodiment of the present application.
In the terminal shown in fig. 3, the processor 110 may be configured to call an application program stored in the memory 120, and specifically execute the canvas extension method according to the embodiment of the present application.
The present application is described in detail below with reference to specific examples.
In a specific implementation scenario, a web drawing application, such as a web whiteboard application, is installed on the above-mentioned terminal, and the canvas is an area of the web drawing application for carrying drawing content.
The canvas uses a browser html canvas tag, the canvas is a tag commonly used in browser html, and the canvas can be well rendered on a browser by using the tag. The chrome kernel is used as a carrier, a cross-platform effect is achieved, the container uses a div tag, absolute positioning is achieved through a browser, an offset value is modified in real time, and a canvas moving effect is achieved.
The container is used for bearing a canvas, and the movement of the canvas is essentially the movement of the container. As the canvas moves, the offset from the viewport changes. Specifically, the variation of the horizontal offset and the vertical offset may be included.
The viewport is an area on the terminal's screen that can be used to display a web drawing application and is a rectangular area associated with the device.
The first length of canvas is the first preset multiple of the second length of viewport, the first width of canvas is the second preset multiple of the second width of viewport, first preset multiple with second preset multiple all is greater than 1.
Taking the first preset multiple and the second preset multiple as 2 as an example, as shown in fig. 6, container represents a container for carrying a canvas, and view represents a viewport, i.e., the size of the whole screen visible to the user.
The container has a width of canvas width and a height of canvas height.
canvas width also represents the width of the canvas, which is 2 times the width of view.
canvas height also represents the height of the canvas, 2 times the view height.
The clientWidth is equal to the width of the view, the clientHeight is equal to the height of the view, and the view is centered at the center of the container.
The upper left corner of container is defined as the origin, the left offset is left with respect to the view vertex, and the top offset is top.
When we need to do the moving operation, the offset values of top and left of the container are offset, so as to achieve the effect of moving the canvas. The meaning is that the canvas content is moved, the movement of the canvas can be seen in the view, the view is not changed actually, and the change is the container of the lower layer.
Specifically, as shown in fig. 7, the canvas expansion method includes:
s101, receiving a moving instruction for the canvas, and moving a container carrying the canvas in a moving direction corresponding to the moving instruction, where the canvas includes a first edge and a third edge, the viewport includes a second edge and a fourth edge, the first edge is parallel to the third edge, the second edge is parallel to the fourth edge, the first edge and the second edge are located on the same side of the moving direction, the third edge and the fourth edge are located on the same side of the opposite direction of the moving direction, the canvas at least includes a first region and a second region which are adjacent to each other, the first region draws first content, and the second region draws second content;
it is understood that the canvas refers to a panel used for drawing or writing when a web drawing application (e.g., a web whiteboard) is displayed on the first terminal.
As shown in fig. 8a or 8b, the canvas comprises a first edge and a third edge, the viewport comprises a second edge and a fourth edge, the first edge is parallel to the third edge, the second edge is parallel to the fourth edge, the first edge and the second edge are located on the same side of the moving direction, such as the left side or the upper side, and the third edge and the fourth edge are located on the same side of the opposite direction of the moving direction, such as the right side or the lower side. The same side can be distinguished according to the direction, including left side, right side, upside, downside.
The user may control the canvas to move, such as by dragging by hand, by moving through an external control device (e.g., a mouse), and so on.
A browser Canvas label is applied, and a hammer open source gesture library is used for monitoring events thrown by the Canvas so as to identify the movement of the Canvas.
The SinglePanStart indicates that the mouse (or touch) movement start is triggered, the singlepancover indicates that the mouse (or touch) movement is triggered, and the SinglePanEnd indicates that the mouse movement (or touch) is finished. The event must be the triggering of SinglePanStart followed by the triggering of singlepannove and finally ending with SinglePanEnd.
One specific way is that pressing the space key + mouse movement triggers the canvas movement. When pressing the space + triggers the singlepaintstart, moveOriginPointX is used to temporarily save the horizontal coordinate of the starting movement, moveOriginPointY is used to temporarily save the vertical coordinate of the starting movement, when pressing the space + triggers the mouse movement, the horizontal offset dx is calculated by using the moved position curOriginPointX-moveOriginPointX, and the vertical offset dy is calculated by using the moved position curOriginPointY-movoriginpointx. After dx and dy are obtained, the variable drawoorigin for storing the position information is used for storage:
drawOriginX2＝drawOriginX1+dx，drawOriginY2＝drawOriginY1+dy；
DrawOrigin (drawOriginX1, drawOriginY1) indicates the position of the upper left corner of the viewport from the origin, and when a new drawOrigin (drawOriginX2, drawOriginY2) is obtained, the canvas offset is recalculated.
The width of the viewport is represented by baseWidth, the height of the viewport is represented by baseHeight, the horizontal offset of Canvas is represented by left, and the vertical offset of Canvas is represented by top.
When drawogoninx >0, left ═ drawogoninpoinx% baseWidth;
when drawooriginx <0, left ═ - (baseWidth + drawooriginpointx% baseWidth);
when drawOriginY >0, top ═ drawOriginPointY% baseHeight);
when drawOriginX <0, top ═ baseHeight + drawOriginPointY% baseHeight).
And finally left and top are the deviation values of the canvas label in the viewport actually, and the movement of the canvas is controlled by the space + mouse movement operation through the process.
Wherein, in an initial position, the viewport is centered on the canvas for movement from various directions. But may of course be located anywhere in the canvas.
Optionally, when the web whiteboard application is exited or restarted, the canvas returns to the initial state, i.e., returns to the position where the viewport is located at the center of the canvas.
The canvas comprises at least a first area and a second area which are adjacent, and the sizes of the two areas can be the same or different.
As shown in fig. 9, the canvas includes a first area a and a second area B, AB represents 1 time canvas respectively, which in combination is 2 times canvas, and C is also 1 time canvas, but at this time C is virtual only for matching exhibition. Note that the content drawn on a is the first sub-content, and the content drawn on B is the second sub-content. When container moves to the left and container does not collide with the edge of view, only the container moves and there is no rendering. And displaying the corresponding content in the viewport according to the moved offset in the process of moving.
S102, when the first edge and the second edge are overlapped, triggering to draw the first content of the first area as the second content, draw the second content of the second area as the third content, and moving the container to a position where the third edge and the fourth edge are overlapped along the opposite direction.
It is understood that the viewport and the canvas are both rectangular, and two parallel edges in the canvas are parallel to two parallel edges in the viewport, respectively.
When the control canvas moves from the first edge direction to the third edge direction, if the first edge is not overlapped with the second edge, the content of the canvas cannot be re-rendered in the moving process. When the first edge is overlapped with the second edge, the content of the canvas is triggered to be re-rendered, and the canvas moves to the direction opposite to the moving direction and moves to the position where the third edge is overlapped with the fourth edge. Of course, if the moving direction continues to be the same, the above process is repeated, that is, when the first edge does not touch the second edge, the content of the canvas will not be re-rendered, and when the first edge and the second edge touch each other, the content of the canvas will be re-rendered and moved to the position where the third edge and the fourth edge are overlapped in the opposite direction.
The first edge and the third edge may be edges on upper and lower sides, and similarly, the second edge and the fourth edge may be edges on upper and lower sides. The canvas can move in the horizontal direction, also can move in the vertical direction, can also form certain contained angle with the viewport and move.
For example, as shown in fig. 10, when the canvas is moved continuously and the edge of the container collides with the edge of the view, the redrawing operation of the canvas is triggered, at this time, the previous AB canvas content is re-rendered as the BC canvas content, because the canvas size is small and the redrawing speed is fast, for the user, the redrawing is not sensible, the view at this time becomes the content on the B canvas, and when the container moves left, the view still shows the content in the BC. It can be further understood that only the a and B regions are included throughout the process, and after re-rendering, the content of the a region is re-rendered as the content of the B region, and the content of the B region is re-rendered as the content of the C region.
In a feasible implementation mode, when writing operation is performed on a screen, the handwriting is displayed in the viewport, redrawing of the content drawn on the canvas is triggered, and all drawn content after redrawing is displayed while the handwriting is kept.
In a feasible implementation mode, a writing operation on a screen is received, a writing script is drawn, and when the writing script reaches the viewport boundary, namely the end point of the writing script collides with the viewport boundary, a movement instruction aiming at the canvas is generated for triggering the movement of the container. One possible way is to obtain the horizontal offset and the vertical offset of the writing handwriting from the starting point to the end point, and then control the container carrying the canvas to move according to the horizontal offset and the vertical offset.
In a possible implementation, receiving an operation to insert an object, a move instruction for the canvas is generated for triggering movement of the container. The operation of inserting the object may be that the user clicks a control of "insert object" in the drawing application, and may be that the user drags the object into the canvas.
In this embodiment of the application, a web drawing application is installed on a first terminal, a canvas is an area of the web drawing application for bearing drawing content, a container is used for bearing the canvas, a viewport is an area of the first terminal for displaying the web drawing application on a screen, a first length of the canvas is a majority of a second length of the viewport, and a first width of the canvas is a multiple of a second width of the viewport. By adopting the canvas with a proper size through the web technology, the function of infinitely extending the canvas of the drawing application to infinitely draw the graph is realized, and the canvas with a relatively large size has the advantages of fast rendering, high efficiency, no blockage, no sense of common users and good experience. The canvas with a relatively small size has low redrawing frequency, extremely high maintainability and good expandability.
Referring to fig. 11, fig. 11 is a schematic flowchart illustrating another embodiment of a canvas expansion method according to the present application. Specifically, the method comprises the following steps:
s201, receiving a moving instruction aiming at the canvas, and moving a container bearing the canvas according to a moving direction corresponding to the moving instruction;
see S101 for details, which are not described herein.
S202, acquiring offsets corresponding to the moving instructions in a collaborative mode, wherein the offsets comprise horizontal offsets and vertical offsets;
the collaborative mode is a mode in which a plurality of terminals connected with each other all open a web whiteboard application, a first terminal of the web whiteboard application serves as a presenter, and the other terminals (such as a second terminal) serve as followers, and when a user controls the canvas of the presenter to move, the canvas of the followers also moves correspondingly.
The movement of the canvas on the first terminal generates a corresponding offset, which is an offset of the canvas relative to the viewport and includes a horizontal offset in a horizontal direction and a vertical offset in a vertical direction.
Specifically, any vertex in a canvas on a first terminal is taken as a coordinate origin, any vertex in the viewport is taken as a positioning point, and an offset between the positioning point and the coordinate origin is obtained.
For example, as shown in FIG. 11, the vertex at the top left corner of the canvas is taken as the origin (0,0), the top left corner of the viewport is drawOrigin (drawOriginx, drawOriginY), which represents the position of the viewport from the origin (0,0), drawOriginX represents the horizontal offset, and drawOriginY represents the vertical offset.
S203, the offset is sent to a second terminal, and the offset is used for indicating the second terminal to redraw the displayed canvas content.
And when the terminal is in the collaborative mode, the first terminal sends the drawOrigin data to the second terminal, and the second terminal receives the data and redraws the content on the displayed canvas.
Wherein the drawoorigin data can be sent to the second terminal based on the long connection. By long connection, it is meant that multiple packets may be sent continuously over a connection, and during the duration of the connection, if no packets are sent, a link check packet needs to be sent in both directions to maintain the connection. Because each connection is established in a resource and time consuming manner, the number of connections can be reduced and data can be transmitted at any time by means of long connections.
When the canvas is moved, data can be triggered to be transmitted to all followers in real time, wireless expansion of the canvas is guaranteed through the scheme, and the function of a collaborative mode is achieved.
For example, as shown in fig. 13, a presenter (a first terminal) moves a canvas, drawoorigin data is sent to a follower (a second terminal) in real time, and the second terminal adjusts the drawoorigin data and moves the canvas according to the adjusted value, so that the same moving effect as that of the presenter is achieved.
If the size of the viewport of the follower is not consistent with that of the presenter, and the follower receives the drawOrigin data, the drawOrigin data is subjected to equal-proportion adjustment according to the ratio of the size of the viewport of the follower to that of the viewport of the presenter.
Optionally, in the collaborative mode, an offset sent by the second terminal is received, where the offset includes a horizontal offset and a vertical offset, and then the displayed canvas content is redrawn based on the offset. And the first terminal may also receive the offset sent by the second terminal over the long connection.
Specifically, a container carrying the canvas is moved according to the horizontal offset and the vertical offset, the content to be displayed in the viewport is determined, and then the content of the canvas is re-rendered into the content to be displayed and displayed in the viewport.
Similarly, if the size of the viewport of the follower is not consistent with that of the presenter, after the presenter receives the drawOrigin data sent by the follower, the drawOrigin data is subjected to equal-proportion adjustment according to the ratio of the size of the viewport of the follower to that of the viewport of the presenter, and then the container of the presenter is moved according to the adjusted drawOrigin data.
In the embodiment of the application, by adopting the canvas with a proper size through the web technology, the function of infinitely extending the canvas for drawing graphics is realized, and the canvas with a relatively large size is fast in rendering, high in efficiency, free from jamming, and good in experience, and a user does not feel. The frequency of redrawing is low with respect to the small size of the canvas, which brings extremely high maintainability. On this basis, the wireless function of following of extension under the collaborative mode can realize carrying out the same removal to the canvas on the second terminal as the follower through the canvas removal on the control first terminal as the speaker, has improved drawing interactive convenience.
The following are embodiments of the apparatus of the present application that may be used to perform embodiments of the method of the present application. For details which are not disclosed in the embodiments of the apparatus of the present application, reference is made to the embodiments of the method of the present application.
Referring to fig. 13, a schematic structural diagram of a canvas expansion apparatus according to an exemplary embodiment of the present application is shown. Be applied to first terminal, web drawing application is installed to first terminal, and the canvas is web drawing application's the region that is used for bearing the weight of drawing content, and the container is used for bearing the canvas, the viewport is be used for showing on the screen of first terminal the region of web drawing application, the first length of canvas is the first preset multiple of the second length of viewport, the first width of canvas is the second preset multiple of the second width of viewport, first preset multiple with the second preset multiple all is greater than 1, and this canvas extension device can realize becoming whole or some of terminal through software, hardware or the combination of both. The apparatus 1 includes a canvas movement module 10 and a canvas extension module 20.
A container moving module 10, configured to receive a moving instruction for the canvas, and move a container carrying the canvas according to a moving direction corresponding to the moving instruction, where the canvas includes a first edge and a third edge, the viewport includes a second edge and a fourth edge, the first edge is parallel to the third edge, the second edge is parallel to the fourth edge, the first edge and the second edge are located on the same side of the moving direction, the third edge and the fourth edge are located on the same side of an opposite direction of the moving direction, the canvas includes at least a first area and a second area that are adjacent to each other, the first area draws first content, and the second area draws second content;
the canvas drawing module 20 is configured to trigger drawing of the first content of the first area as the second content, drawing of the second content of the second area as the third content, and moving the container along the opposite direction to a position where the third edge coincides with the fourth edge when the first edge coincides with the second edge.
Optionally, the apparatus further comprises:
an offset obtaining module 30, configured to obtain, in a coordination mode, an offset corresponding to the move instruction, where the offset includes a horizontal offset and a vertical offset;
and the offset sending module 40 is configured to send the offset to the second terminal, where the offset is used to instruct the second terminal to redraw the displayed canvas content.
Optionally, the offset obtaining module 30 is specifically configured to:
taking any vertex in the canvas as a coordinate origin and taking any vertex in the viewport as a positioning point;
and acquiring the offset between the positioning point and the coordinate origin.
Optionally, the offset sending module 40 is specifically configured to: the offset is sent to the second terminal based on the long connection.
Optionally, the apparatus further comprises:
an offset receiving module 50, configured to receive, in the coordination mode, an offset sent by the second terminal, where the offset includes a horizontal offset and a vertical offset;
a canvas redraw module 60 to redraw the displayed canvas content based on the offset.
Optionally, the offset receiving module 50 is specifically configured to:
and receiving a moving instruction sent by a second terminal, and acquiring the offset carried by the moving instruction.
Optionally, the canvas redrawing module 60 is specifically configured to:
moving a container bearing the canvas according to the horizontal offset and the vertical offset, and determining content to be displayed in the viewport;
redrawing the canvas content into the content to be displayed, and displaying in the viewport.
Optionally, the offset receiving module 50 is specifically configured to:
and receiving the offset sent by the second terminal based on the long connection.
Optionally, the apparatus further comprises a handwriting retention module 70 for
Receiving writing operation on the screen, drawing writing handwriting and redrawing all drawing contents of the canvas;
and reserving the writing note and displaying all the drawn contents after redrawing.
Optionally, the container moving module 10 is specifically configured to:
receiving writing operation on the screen and drawing writing handwriting;
generating a movement instruction for the canvas when the writing script reaches the viewport boundary.
It should be noted that, when the canvas extension apparatus provided in the foregoing embodiment executes the canvas extension method, only the division of the functional modules is illustrated, and in practical applications, the functions may be distributed by different functional modules according to needs, that is, the internal structure of the device may be divided into different functional modules to complete all or part of the functions described above. In addition, the canvas expansion apparatus and the canvas expansion method provided by the above embodiments belong to the same concept, and the implementation process is detailed in the method embodiments, which is not described herein again.
The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.
In the embodiment of the application, by adopting the canvas with a proper size through the web technology, the function of infinitely extending the canvas for drawing graphics is realized, and the canvas with a relatively large size is fast in rendering, high in efficiency, free from jamming, and good in experience, and a user does not feel. The frequency of redrawing is low with respect to the small size of the canvas, which brings extremely high maintainability. On this basis, the wireless function of following of extension under the collaborative mode can realize carrying out the same removal to the canvas on the second terminal as the follower through the canvas removal on the control first terminal as the speaker, has improved drawing interactive convenience.
An embodiment of the present application further provides a computer storage medium, where the computer storage medium may store a plurality of instructions, where the instructions are suitable for being loaded by a processor and executing the method steps in the embodiments shown in fig. 6 to 12, and a specific execution process may refer to specific descriptions of the embodiments shown in fig. 6 to 12, which are not described herein again.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a read-only memory or a random access memory.
The above disclosure is only for the purpose of illustrating the preferred embodiments of the present application and is not to be construed as limiting the scope of the present application, so that the present application is not limited thereto, and all equivalent variations and modifications can be made to the present application.
Claims (13)
1. A canvas expansion method applied to a first terminal, wherein the first terminal is installed with a web drawing application, a canvas is a region of the web drawing application for bearing drawing content, a container is used for bearing the canvas, a viewport is a region of the first terminal on a screen for displaying the web drawing application, a first length of the canvas is a first preset multiple of a second length of the viewport, a first width of the canvas is a second preset multiple of a second width of the viewport, and both the first preset multiple and the second preset multiple are greater than 1, the method comprising:
receiving a movement instruction for the canvas, and moving a container carrying the canvas according to a movement direction corresponding to the movement instruction, wherein the canvas comprises a first edge and a third edge, the viewport comprises a second edge and a fourth edge, the first edge is parallel to the third edge, the second edge is parallel to the fourth edge, the first edge and the second edge are positioned on the same side of the movement direction, the third edge and the fourth edge are positioned on the same side of the opposite direction of the movement direction, the canvas at least comprises a first area and a second area which are adjacent, the first area draws first content, and the second area draws second content;
when the first edge and the second edge coincide, triggering the first content of the first area to be drawn as the second content, the second content of the second area to be drawn as the third content, and moving the container along the opposite direction to a position where the third edge and the fourth edge coincide.
2. The method of claim 1, further comprising:
in a coordination mode, acquiring offset corresponding to the movement instruction, wherein the offset comprises a horizontal offset and a vertical offset;
and sending the offset to a second terminal, wherein the offset is used for instructing the second terminal to redraw the displayed canvas content.
3. The method of claim 2, wherein the obtaining the offset corresponding to the move instruction comprises:
taking any vertex in the canvas as a coordinate origin and taking any vertex in the viewport as a positioning point;
and acquiring the offset between the positioning point and the coordinate origin.
4. The method of claim 2, wherein the sending the offset to the second terminal comprises:
the offset is sent to the second terminal based on the long connection.
5. The method of claim 1, further comprising:
receiving an offset sent by a second terminal in a cooperative mode, wherein the offset comprises a horizontal offset and a vertical offset;
redrawing the displayed canvas content based on the offset.
6. The method of claim 5, wherein the receiving the offset sent by the second terminal comprises:
and receiving a moving instruction sent by a second terminal, and acquiring the offset carried by the moving instruction.
7. The method of claim 5, wherein redrawing the displayed canvas content based on the offset comprises:
moving a container bearing the canvas according to the horizontal offset and the vertical offset, and determining content to be displayed in the viewport;
redrawing the canvas content into the content to be displayed, and displaying in the viewport.
8. The method of claim 5, wherein the receiving the offset sent by the second terminal comprises:
and receiving the offset sent by the second terminal based on the long connection.
9. The method of claim 1, further comprising:
receiving writing operation on the screen, drawing writing handwriting and redrawing all drawing contents of the canvas;
and reserving the writing note and displaying all the drawn contents after redrawing.
10. The method of claim 1, wherein receiving the movement instruction for the canvas comprises:
receiving writing operation on the screen and drawing writing handwriting;
generating a movement instruction for the canvas when the writing script reaches the viewport boundary.
11. A canvas extension apparatus applied to a first terminal, the display screen including a viewport, a canvas being displayed on the display screen, a first length of the canvas being a first preset multiple of a second length of the viewport, a first width of the canvas being a second preset multiple of the second width of the viewport, the first preset multiple and the second preset multiple both being greater than 1, the apparatus comprising:
a container moving module, configured to receive a moving instruction for the canvas, and move a container carrying the canvas according to a moving direction corresponding to the moving instruction, where the canvas includes a first edge and a third edge, the viewport includes a second edge and a fourth edge, the first edge is parallel to the third edge, the second edge is parallel to the fourth edge, the first edge and the second edge are located on the same side of the moving direction, the third edge and the fourth edge are located on the same side of an opposite direction of the moving direction, the canvas includes at least a first region and a second region that are adjacent to each other, the first region draws first content, and the second region draws second content;
and the canvas drawing module is used for triggering the drawing of the first content of the first area as the second content, the drawing of the second content of the second area as the third content and the movement of the container to the position where the third edge is overlapped with the fourth edge along the opposite direction when the first edge is overlapped with the second edge.
12. A computer storage medium, characterized in that it stores a plurality of instructions adapted to be loaded by a processor and to perform the method steps according to any of claims 1 to 10.
13. A terminal, comprising: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the method steps of any of claims 1 to 10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110067721.4A CN112684962B (en) | 2021-01-19 | 2021-01-19 | Canvas extension method, device, storage medium and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110067721.4A CN112684962B (en) | 2021-01-19 | 2021-01-19 | Canvas extension method, device, storage medium and terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112684962A true CN112684962A (en) | 2021-04-20 |
| CN112684962B CN112684962B (en) | 2022-03-29 |
Family
ID=75458594
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110067721.4A Active CN112684962B (en) | 2021-01-19 | 2021-01-19 | Canvas extension method, device, storage medium and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112684962B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113900758A (en) * | 2021-10-22 | 2022-01-07 | 广州博冠信息科技有限公司 | Content display method, content display device, computer equipment and computer-readable storage medium |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130346910A1 (en) * | 2011-05-23 | 2013-12-26 | Steve Mason | Region dynamics for digital whiteboard |
| WO2014039544A1 (en) * | 2012-09-05 | 2014-03-13 | Haworth, Inc. | Region dynamics for digital whiteboard |
| US20150120834A1 (en) * | 2013-10-28 | 2015-04-30 | Samsung Electronics Co., Ltd. | Method and system for real time collaboration on a canvas |
| CN105204853A (en) * | 2015-09-14 | 2015-12-30 | 新浪网技术(中国)有限公司 | Canvas drawing method and device of web browser |
| CN107368291A (en) * | 2016-05-13 | 2017-11-21 | 北京搜狗科技发展有限公司 | A kind of Web page rendering device, method and electronic equipment |
| US20180373485A1 (en) * | 2017-06-27 | 2018-12-27 | Salesforce.Com, Inc. | Identifying a viewport within a browser window |
| CN110909276A (en) * | 2019-10-24 | 2020-03-24 | 浙江大搜车软件技术有限公司 | Data rendering method and device, computer equipment and storage medium |
| US20200134890A1 (en) * | 2018-10-24 | 2020-04-30 | Samsung Electronics Co., Ltd. | Drawing content processing method and device for terminal apparatus, and terminal apparatus |
| CN111752660A (en) * | 2020-06-24 | 2020-10-09 | 北京小鸟科技股份有限公司 | Canvas reverse control method, system and device of electronic whiteboard |
-
2021
- 2021-01-19 CN CN202110067721.4A patent/CN112684962B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130346910A1 (en) * | 2011-05-23 | 2013-12-26 | Steve Mason | Region dynamics for digital whiteboard |
| WO2014039544A1 (en) * | 2012-09-05 | 2014-03-13 | Haworth, Inc. | Region dynamics for digital whiteboard |
| US20150120834A1 (en) * | 2013-10-28 | 2015-04-30 | Samsung Electronics Co., Ltd. | Method and system for real time collaboration on a canvas |
| CN105204853A (en) * | 2015-09-14 | 2015-12-30 | 新浪网技术(中国)有限公司 | Canvas drawing method and device of web browser |
| CN107368291A (en) * | 2016-05-13 | 2017-11-21 | 北京搜狗科技发展有限公司 | A kind of Web page rendering device, method and electronic equipment |
| US20180373485A1 (en) * | 2017-06-27 | 2018-12-27 | Salesforce.Com, Inc. | Identifying a viewport within a browser window |
| US20200134890A1 (en) * | 2018-10-24 | 2020-04-30 | Samsung Electronics Co., Ltd. | Drawing content processing method and device for terminal apparatus, and terminal apparatus |
| CN110909276A (en) * | 2019-10-24 | 2020-03-24 | 浙江大搜车软件技术有限公司 | Data rendering method and device, computer equipment and storage medium |
| CN111752660A (en) * | 2020-06-24 | 2020-10-09 | 北京小鸟科技股份有限公司 | Canvas reverse control method, system and device of electronic whiteboard |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113900758A (en) * | 2021-10-22 | 2022-01-07 | 广州博冠信息科技有限公司 | Content display method, content display device, computer equipment and computer-readable storage medium |
| CN113900758B (en) * | 2021-10-22 | 2023-09-12 | 广州博冠信息科技有限公司 | Content display method, apparatus, computer device, and computer-readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112684962B (en) | 2022-03-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109766053B (en) | User interface display method, device, terminal and storage medium | |
| US11301131B2 (en) | Method for split-screen display, terminal, and non-transitory computer readable storage medium | |
| CN107704177B (en) | Interface display method and device and terminal | |
| US11644943B2 (en) | Method for icon display, terminal, and storage medium | |
| CN109710206B (en) | Method, device, terminal and storage medium for displaying information | |
| CN107844228B (en) | Message display method and device and terminal | |
| CN108279966B (en) | Webpage screenshot method, device, terminal and storage medium | |
| WO2019174546A1 (en) | User interface display method and device, apparatus, and storage medium | |
| CN108803964B (en) | Buoy display method, device, terminal and storage medium | |
| CN107870724B (en) | Display screen unfolding method and device and terminal | |
| CN107765959B (en) | Background application program display method and terminal | |
| CN107807773B (en) | Application body distinguishing method, device, terminal and storage medium | |
| CN107678826B (en) | Interface display method and device, mobile terminal and storage medium | |
| CN109992315B (en) | Touch screen control method and device, terminal and storage medium | |
| CN109117060B (en) | Pull-down notification bar display method, device, terminal and storage medium | |
| US10901553B2 (en) | Method for responding to touch operation and electronic device | |
| WO2021190184A1 (en) | Remote assistance method and apparatus, and storage medium and terminal | |
| CN108803990B (en) | Interaction method, device and terminal | |
| CN111225138A (en) | Camera control method and device, storage medium and terminal | |
| CN107580039B (en) | Transmission progress display method and device and terminal | |
| CN113268212A (en) | Screen projection method and device, storage medium and electronic equipment | |
| CN111127469A (en) | Thumbnail display method, device, storage medium and terminal | |
| CN112684962B (en) | Canvas extension method, device, storage medium and terminal | |
| CN107562324B (en) | Data display control method and terminal | |
| CN107704187B (en) | Notification message processing method and device and terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |