Canvas content positioning method and related device

Abstract

The invention discloses a canvas content positioning method and a related device, and the method comprises the steps: monitoring a touch event that a user drags a focus frame on a thumbnail view to carry out the positioning of the canvas content, and determining the newest position of the focus frame in the thumbnail view in the touch event; and obtaining a canvas offset based on the newest position of the focus frame and the size of the zoomed canvas content, and updating a visible area of the canvas according to the canvas offset to complete positioning of the canvas content. The innovative combination of the thumbnail view and the focus frame is added in the canvas, the global view of the canvas is provided through the thumbnail view, rapid navigation positioning in the canvas is realized by controlling the focus frame to move in the thumbnail view, and the content positioned by the focus frame is displayed through the visible area of the canvas linked with the focus frame. According to the method, the user can conveniently check the canvas content positioning result, the whole operation process is simple and easy to implement, time and operation steps needed by canvas content positioning can be effectively reduced, and therefore the working efficiency and the user experience are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of canvas content positioning, and more particularly to a canvas content positioning method and related devices. Background Art

[0002] With the popularity of tablet computers (such as iPad), handwriting tablets are becoming an important tool for users to take notes, draw and create. Handwriting tablets enable users to write or draw on the canvas. Through different tools and settings, users can adjust the color, thickness, etc. of the brush to create colorful works.

[0003] However, with the increase and complexity of the canvas content, there are generally deficiencies in the positioning of the canvas content. When the canvas is enlarged, the user needs to use two-finger or single-finger sliding to navigate and repeatedly slide the canvas to find the positioning area. This method is not only time-consuming, but also cumbersome and inefficient, thus affecting the user experience. Summary of the invention

[0004] In view of this, the present invention discloses a canvas content positioning method and related devices, so as to realize an innovative combination of adding thumbnail views and focus frames in the canvas, providing a global view of the canvas through the thumbnail view, realizing fast navigation and positioning in the canvas by controlling the movement of the focus frame in the thumbnail view, and displaying the content positioned by the focus frame through a canvas visible area linked to the focus frame, so as to facilitate users to view the canvas content positioning results.

[0005] A canvas content positioning method, comprising:

[0006] Detecting a touch event of a user dragging a focus frame on a thumbnail view to position the canvas content, wherein the thumbnail view corresponds to the canvas content, the focus frame is drawn on the top layer of the thumbnail view, and can be linked to the visible area of ​​the canvas;

[0007] Determine the latest focus frame position of the focus frame in the thumbnail view in the touch event;

[0008] Obtaining a canvas offset based on the latest position of the focus frame and the scaled size of the canvas content;

[0009] The canvas visible area is updated according to the canvas offset to complete the positioning of the canvas content.

[0010] Optionally, the thumbnail view creation process includes:

[0011] Creating a thumbnail view frame in proportion to the canvas size, and suspending the thumbnail view frame above the canvas;

[0012] Extract all stroke data using the stroke class in the view class, and render the stroke data into a stroke image;

[0013] The stroke image is scaled according to the thumbnail view size, and the target stroke image obtained after scaling is filled into the thumbnail view frame to obtain the thumbnail view.

[0014] Optionally, it also includes:

[0015] When it is detected that the user inserts an image on the canvas, the image is proportionally reduced to a target image according to the reduction ratio of the thumbnail view size relative to the canvas size;

[0016] Determining a corresponding target position of the target image in the thumbnail view according to an insertion position of the image in the canvas;

[0017] The target image is rendered at the target position, and a picture level of the target image in the thumbnail view is lower than a stroke level in the thumbnail view.

[0018] Optionally, it also includes:

[0019] When a stroke change event is detected, the latest stroke image is obtained;

[0020] Scaling the latest stroke image according to the reduction ratio of the thumbnail view size relative to the canvas size to obtain a latest target stroke image;

[0021] The target stroke image in the thumbnail view is replaced with the latest target stroke image.

[0022] Optionally, it also includes:

[0023] When a user operation event on the canvas is detected, the size of the visible area of ​​the canvas, the position of the visible area of ​​the canvas, the size of the thumbnail view and the size of the canvas are obtained;

[0024] Determine the latest size and latest position of the focus frame based on the size of the canvas visible area, the position of the canvas visible area, the size of the thumbnail view and the canvas size;

[0025] The focus frame in the thumbnail view is updated according to the latest size and the latest position of the focus frame.

[0026] Optionally, obtaining the canvas offset based on the latest position of the focus frame and the scaled size of the canvas content includes:

[0027] Determine the canvas horizontal coordinate offset according to the following formula:

[0028] canvasOffsetX=(focusFrameX / thumbnailWidth)×canvasContentWidth;

[0029] Wherein, canvasOffsetX represents the horizontal coordinate offset of the canvas, focusFrameX represents the horizontal coordinate of the focus frame, thumbnailWidth represents the width of the thumbnail view, and canvasContentWidth represents the width of the canvas content after scaling;

[0030] Determine the vertical coordinate offset of the canvas according to the following formula:

[0031] canvasOffsetY=(focusFrameY / thumbnailHeight)×canvasContentHeight;

[0032] In the formula, canvasOffsetY represents the vertical coordinate offset of the canvas, focusFrameY represents the vertical coordinate of the focus frame, thumbnailHeight represents the height of the thumbnail view, and canvasContentHeight represents the height of the canvas content after scaling;

[0033] The canvas offset includes: the canvas horizontal coordinate offset and the canvas vertical coordinate offset.

[0034] Optionally, the thumbnail view and the focus frame are modular structures with optional configurations.

[0035] A canvas content positioning device, comprising:

[0036] A monitoring unit, used to monitor a touch event of a user dragging a focus frame on a thumbnail view to position the canvas content, wherein the thumbnail view corresponds to the canvas content, the focus frame is drawn on the top layer of the thumbnail view, and can be linked with the visible area of ​​the canvas;

[0037] A position determination unit, used to determine the latest position of the focus frame in the thumbnail view in the touch event;

[0038] An offset determination unit, configured to obtain a canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling;

[0039] The updating unit is used to update the canvas visible area according to the canvas offset to complete the positioning of the canvas content.

[0040] A computer storage medium stores at least one instruction, and when the at least one instruction is executed by a processor, the above-mentioned canvas content positioning method is implemented.

[0041] An electronic device, comprising: a memory and a processor;

[0042] The memory is used to store at least one instruction;

[0043] The processor is used to execute the at least one instruction to implement the above-mentioned canvas content positioning method.

[0044] As can be seen from the above technical solutions, the present invention discloses a method and related devices for positioning the content of a canvas, monitoring the touch event of a user dragging a focus frame on a thumbnail view to position the content of the canvas, determining the latest position of the focus frame in the thumbnail view in the touch event, obtaining the canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling, updating the canvas visible area according to the canvas offset, and completing the positioning of the content of the canvas. The present invention adds an innovative combination of a thumbnail view and a focus frame to the canvas, provides a global view of the canvas through the thumbnail view, realizes fast navigation and positioning in the canvas by controlling the movement of the focus frame in the thumbnail view, and displays the content positioned by the focus frame through the canvas visible area linked to the focus frame, so that the user can view the positioning result of the content of the canvas. The entire operation process is simple and easy, and can effectively reduce the time and operation steps required for positioning the content of the canvas, thereby improving work efficiency and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the disclosed drawings without paying creative work.

[0046] Figure 1 A flowchart of a method for locating canvas content disclosed in an embodiment of the present invention;

[0047] FIG. 2( a ) is a schematic diagram of canvas content positioning disclosed in an embodiment of the present invention;

[0048] FIG2( b ) is another schematic diagram of canvas content positioning disclosed in an embodiment of the present invention;

[0049] FIG2( c ) is another schematic diagram of canvas content positioning disclosed in an embodiment of the present invention;

[0050] Figure 3 A flowchart of a method for creating a thumbnail view disclosed in an embodiment of the present invention;

[0051] Figure 4 A schematic diagram of the structure of a canvas content positioning device disclosed in an embodiment of the present invention;

[0052] Figure 5 The present invention is a schematic diagram of the structure of an electronic device disclosed in an embodiment of the present invention. DETAILED DESCRIPTION

[0053] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0054] The embodiment of the present invention discloses a method and related devices for locating content of a canvas, so as to realize an innovative combination of adding a thumbnail view and a focus frame in a canvas, provide a global view of the canvas through the thumbnail view, realize fast navigation and positioning in the canvas by controlling the movement of the focus frame in the thumbnail view, and display the content located by the focus frame through a visible area of ​​the canvas linked with the focus frame, so that the user can view the result of locating the content of the canvas. The whole operation process is simple and easy, and can effectively reduce the time and operation steps required for locating the content of the canvas, thereby improving work efficiency and user experience.

[0055] See also Figure 1 , a flowchart of a method for locating canvas content disclosed in an embodiment of the present invention, the method comprising:

[0056] Step S101: monitoring a touch event in which a user drags a focus frame on a thumbnail view to position the canvas content.

[0057] This application creates a thumbnail view on the canvas in advance. The thumbnail view is created in proportion to the canvas size and corresponds to the canvas content. The focus frame is drawn on the top layer of the thumbnail view and can be linked with the visible area of ​​the canvas, that is, the content displayed in the focus frame completely corresponds to the content displayed in the visible area of ​​the canvas. Therefore, the user can position the canvas content by dragging the focus frame on the thumbnail view.

[0058] It should be noted that the focus frame position and focus frame size can be adjusted according to the actual canvas content positioning needs, and can ensure that the canvas visible area can be accurately reflected at any zoom ratio.

[0059] The touch event described in this application refers to the process in which the user drags the focus frame on the thumbnail view to locate the canvas content.

[0060] Step S102: determining the latest position of the focus frame in the thumbnail view in the touch event.

[0061] When the user needs to position the canvas content, the user can drag the focus frame on the thumbnail view, and the final position of the dragged focus frame is also the latest position of the focus frame.

[0062] In order to facilitate understanding of the process of the user dragging the focus frame on the thumbnail view to locate the canvas content in this application, this application provides an example of the process of the user dragging the focus frame on the thumbnail view, see Figure 2 (a), Figure 2 (b) and Figure 2 (c), the content shown in the thumbnail view displayed in the lower right corner of the canvas is completely corresponding to the entire image drawn on the canvas (the entire image on the canvas is not shown in Figure 2). Among them, the red frame shown in Figure 2 (a), Figure 2 (b) and Figure 2 (c) on the thumbnail view is the focus frame, and the position of the focus frame shown in Figure 2 (a), Figure 2 (b) and Figure 2 (c) on the thumbnail view is also the latest position of the focus frame.

[0063] Among them, the latest position of the focus frame can be expressed by the focus frame coordinates, as follows:

[0064] (1) The calculation formula of the horizontal coordinate of the focus frame is as follows:

[0065] focusFrameX=thumbnailWidth×(visibleX / canvasWidth);

[0066] In the formula, focusFrameX represents the horizontal coordinate of the focus frame, thumbnailWidth represents the width of the thumbnail view, visibleX represents the horizontal coordinate of the visible part of the canvas content on the screen, and canvasWidth represents the width of the canvas;

[0067] (2) The calculation formula of the vertical coordinate of the focus frame is as follows:

[0068] focusFrameY=thumbnailHeight×(visibleY / canvasHeight);

[0069] In the formula, focusFrameY represents the vertical coordinate of the focus frame, thumbnailHeight represents the height of the thumbnail view, visibleY represents the vertical coordinate of the visible part of the canvas content on the screen, and canvasHeight represents the height of the canvas.

[0070] Among them, the thumbnail view width, the thumbnail view height, the canvas width, the canvas height, the horizontal coordinate of the visible part of the canvas content on the screen, and the vertical coordinate of the visible part of the canvas content on the screen are all known.

[0071] Step S103: obtaining a canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling.

[0072] Specifically, the horizontal coordinate offset of the canvas is determined according to the following formula:

[0073] canvasOffsetX=(focusFrameX / thumbnailWidth)×canvasContentWidth;

[0074] Wherein, canvasOffsetX represents the horizontal coordinate offset of the canvas, focusFrameX represents the horizontal coordinate of the focus frame, thumbnailWidth represents the width of the thumbnail view, and canvasContentWidth represents the width of the canvas content after scaling.

[0075] Determine the vertical coordinate offset of the canvas according to the following formula:

[0076] canvasOffsetY=(focusFrameY / thumbnailHeight)×canvasContentHeight;

[0077] In the formula, canvasOffsetY represents the vertical coordinate offset of the canvas, focusFrameY represents the vertical coordinate of the focus frame, thumbnailHeight represents the height of the thumbnail view, and canvasContentHeight represents the height of the canvas content after scaling.

[0078] The canvas offset includes: the canvas horizontal coordinate offset and the canvas vertical coordinate offset.

[0079] The size of the canvas content after scaling includes: the width of the canvas content after scaling and the height of the canvas content after scaling.

[0080] It should be noted that the width and height of the thumbnail view are known. When the focus frame is moved, the latest position of the focus frame can be determined. Correspondingly, the horizontal coordinate and the vertical coordinate of the focus frame are known, and the scaled width and height of the canvas content displayed in the visible area of ​​the canvas linked to the focus frame are also known. Therefore, the canvas offset can be obtained according to the above two formulas.

[0081] Step S104: updating the canvas visible area according to the canvas offset to complete canvas content positioning.

[0082] As shown in FIG. 2( a ), the content in the focus frame includes ① and △. Correspondingly, the visible area of ​​the canvas that is linked to the focus frame also displays ① and △ accordingly, and the relative positions of ① and △ in the visible area of ​​the canvas are exactly the same as the relative positions of ① and △ in the focus frame.

[0083] As shown in Figure 2(b), the content in the focus frame includes □, and the □ is located in the lower right corner of the entire figure ②. Correspondingly, the visible area of ​​the canvas that is linked to the focus frame also displays the □ in the lower right corner, and the position of □ in the visible area of ​​the canvas is exactly the same as the position of □ in the focus frame.

[0084] As shown in Figure 2(c), the content in the focus frame includes a ○, and the ○ is close to the left side of the entire figure ③. Correspondingly, the visible area of ​​the canvas that is linked to the focus frame also displays the ○ on the left side, and the position of the ○ in the visible area of ​​the canvas is exactly the same as the position of the ○ in the focus frame.

[0085] In summary, the present invention discloses a method for positioning the content of a canvas, monitoring the touch event of a user dragging a focus frame on a thumbnail view to position the content of the canvas, determining the latest position of the focus frame in the thumbnail view in the touch event, obtaining the canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling, updating the canvas visible area according to the canvas offset, and completing the positioning of the content of the canvas. The present invention adds an innovative combination of a thumbnail view and a focus frame to the canvas, provides a global view of the canvas through the thumbnail view, realizes fast navigation and positioning in the canvas by controlling the movement of the focus frame in the thumbnail view, and displays the content positioned by the focus frame through the canvas visible area linked to the focus frame, so that the user can view the positioning result of the content of the canvas. The entire operation process is simple and easy, and can effectively reduce the time and operation steps required for positioning the content of the canvas, thereby improving work efficiency and user experience.

[0086] To further optimize the above embodiment, see Figure 3 , a flowchart of a method for creating a thumbnail view disclosed in an embodiment of the present invention, the method comprising:

[0087] Step S201: Create a thumbnail view frame in proportion to the canvas size, and suspend the thumbnail view frame above the canvas.

[0088] Proportional creation means that in the process of creation or design, the elements are arranged or configured according to a fixed proportional relationship, so that the whole looks harmonious and unified. This proportional relationship can be the ratio of physical quantities such as length, width, height, area, volume, or the ratio of visual attributes such as color, brightness, contrast, etc.

[0089] In this application, the thumbnail view frame is created in proportion according to the fixed ratio between the canvas length and the canvas width in the canvas size.

[0090] In actual applications, the thumbnail view frame can be suspended at the lower right corner above the canvas, such as Figure 2(a) to Figure 2(c) shown.

[0091] Step S202: extract all stroke data using the stroke class in the view class, and render the stroke data into a stroke image.

[0092] In the view class, the stroke class does not directly correspond to the specific class name in the standard class library of platforms such as Android or iOS, but refers to the settings and classes related to the brush used to draw graphics and lines. These settings and classes usually encapsulate the brush's color, thickness, style and other properties, as well as the methods used to draw graphics on the canvas.

[0093] In this embodiment, the stroke class in the view class can be a PKCanvasView API, where PKCanvasView is a scalable view component that can capture the input of Apple Pencil or user's finger and display the rendering result in the iOS application. It provides a blank canvas on which users can draw, write and annotate. PKCanvasView is a subclass of UIScrollView, so it supports zooming and panning functions. Users can zoom in or out the canvas through gestures to meet different creative needs.

[0094] The full English name of API is Application Programming Interface, which means application programming interface.

[0095] In actual applications, the UIScreen.main.scale parameter can be used to render the stroke data into a stroke image.

[0096] The value of UIScreen.main.scale indicates the proportional relationship between the physical pixels of the screen and the actual drawn pixels (also called logical pixels, device-independent pixels).

[0097] Step S203: scaling the stroke image according to the size of the thumbnail view, and filling the target stroke image obtained after scaling into the thumbnail view frame to obtain the thumbnail view.

[0098] In this embodiment, the stroke image is scaled according to the size of the thumbnail view so that the target stroke image obtained after scaling can completely match the thumbnail view frame, thereby obtaining the thumbnail view.

[0099] It should be noted that in this application, the thumbnail view and the canvas content adopt a synchronization algorithm to ensure that the thumbnail view and the canvas content are always consistent and to ensure that the thumbnail view reflects the latest canvas status.

[0100] After constructing a thumbnail view, this application can draw a focus frame on the top layer of the thumbnail view. The focus frame is linked to the visible area of ​​the canvas. Through the precise mapping of the focus frame and the canvas content, the content positioning accuracy at the meter level can be achieved.

[0101] The focus frame size can be dynamically adjusted based on the zoom level of the canvas to ensure that the focus frame accurately reflects the visible area of ​​the canvas at any zoom ratio.

[0102] The focus frame size includes: focus frame width and focus frame height.

[0103] The focus frame width is calculated as follows:

[0104] focusFrameWidth=thumbnailWidth×(visibleWidth / canvasWidth) / zoomScale;

[0105] In the formula, focusFrameWidth represents the focus frame width, thumbnailWidth represents the thumbnail view width, visibleWidth represents the width of the visible part of the canvas content on the screen, canvasWidth represents the canvas width, and zoomScale represents the current zoom factor of the canvas.

[0106] The focus frame height is calculated as follows:

[0107] focusFrameHeight=thumbnailHeight×(visibleHeight / canvasHeight) / zoomScale;

[0108] In the formula, focusFrameHeight represents the focus frame height, thumbnailHeight represents the thumbnail view height, visibleHeight represents the height of the visible part of the canvas content on the screen, and canvasHeight represents the canvas height.

[0109] In practical applications, the focus frame can preferably be designed as a rectangle with borders on all sides and a transparent middle, such as Figure 2(a) to Figure 2(c) The red box in the

[0110] In summary, the design of the visual thumbnail view and focus frame in this application is in line with the user's intuitive cognition, which can greatly reduce the difficulty of user operation and allow users to quickly get started without additional training. Compared with the traditional user navigation method of sliding with two fingers or one finger, repeatedly sliding the canvas to find the positioning area, this application can effectively reduce the time and operation steps required for users to locate the canvas content, thereby improving work efficiency.

[0111] In actual applications, users can select image processing on the thumbnail view. Therefore, to further optimize the above embodiment, the canvas content positioning method may further include:

[0112] (1) When it is detected that a user inserts an image on the canvas, the image is reduced in proportion to the size of the thumbnail view to the target image.

[0113] (2) Determine a corresponding target position of the target image in the thumbnail view according to the insertion position of the image in the canvas.

[0114] (3) Rendering the target image at the target position, and making the image level of the target image in the thumbnail view lower than the stroke level in the thumbnail view.

[0115] In this embodiment, when it is detected that a user inserts a picture on the canvas, in order to ensure that the thumbnail view always reflects the latest canvas status, the present application will proportionally reduce the picture to a target picture according to the reduction ratio of the thumbnail view size relative to the canvas size, and determine the corresponding target position of the target picture in the thumbnail view according to the insertion position of the picture in the canvas, and by rendering the target picture at the target position, the consistency of the thumbnail view and the canvas is ensured.

[0116] It should be noted that it is necessary to ensure that the image level of the target image in the thumbnail view is lower than the stroke level in the thumbnail view. The stroke level is the level of the stroke image in the thumbnail view when the thumbnail view is constructed.

[0117] In graphics processing software, such as Photoshop, Illustrator, etc., different layers and objects usually have different processing priorities. Strokes (or vector graphics, lines) are often designed as more basic and low-level elements because they constitute the basic framework of the graphics. The pictures in the thumbnail view, as a simplified representation of the complete image, are usually placed at a higher level to facilitate users to quickly browse and identify, but in the actual editing and rendering process, its level may be lower than the basic graphic elements. In this application, the level of the pictures inserted by the user is lower than the stroke layer.

[0118] In practical applications, the present application can also dynamically update the thumbnail view. Therefore, to further optimize the above embodiment, the canvas content positioning method can also include:

[0119] (1) When a stroke change event is detected, the latest stroke image is obtained;

[0120] (2) scaling the latest stroke image according to the reduction ratio of the thumbnail view size relative to the canvas size to obtain the latest target stroke image;

[0121] (3) Replace the target stroke image in the thumbnail view with the latest target stroke image.

[0122] When a stroke change event is detected, the present application achieves dynamic update of the thumbnail view by scaling the latest acquired stroke image and replacing the original target stroke image in the thumbnail view.

[0123] In actual applications, the size of the scaled latest target stroke image may not be the same as the size of the original target stroke image in the thumbnail view. Therefore, when the latest target stroke image is moved in the thumbnail view or the original target stroke image is replaced with the latest target stroke image, the position of the latest target stroke image in the thumbnail view needs to be recalculated.

[0124] In practical applications, the present application may also dynamically update the focus frame as needed. Therefore, to further optimize the above embodiment, the canvas content positioning method may also include:

[0125] When a user operation event on the canvas is detected, the size of the visible area of ​​the canvas, the position of the visible area of ​​the canvas, the size of the thumbnail view and the size of the canvas are obtained;

[0126] Determine the latest size and latest position of the focus frame based on the size of the canvas visible area, the position of the canvas visible area, the size of the thumbnail view and the canvas size;

[0127] The focus frame in the thumbnail view is updated according to the latest size and the latest position of the focus frame.

[0128] The user's operation events on the canvas include but are not limited to scroll events and zoom events.

[0129] The process of determining the latest size and latest position of the focus frame based on the canvas visible area size, canvas visible area position, thumbnail view size and canvas size can be found in the above-mentioned calculation formulas for the focus frame width and focus frame height, as well as the calculation formulas for the focus frame horizontal coordinate and focus frame vertical coordinate, which will not be repeated here.

[0130] It should be noted that the focus frame size can be dynamically adjusted according to the zoom of the canvas to ensure that the visible area of ​​the canvas can be reflected at any zoom ratio.

[0131] In practical applications, the thumbnail view and the focus frame are modular structures with optional configurations.

[0132] When thumbnails and focus boxes adopt a modular structure, core functions (such as stroke rendering) are required, and user-selected image processing is optional. It can be enabled or disabled according to specific needs without affecting the core positioning function of the canvas.

[0133] In summary, the present invention simplifies the traditional multiple scrolling and zooming operations into a single intuitive interaction by introducing an innovative combination of thumbnail views and focus frames in the canvas, and enables users to understand and operate complex canvas content more easily by providing a global view and precise positioning function, thereby reducing operational fatigue and improving work satisfaction, and effectively reducing the time users spend on content navigation. In addition, the present invention improves the flexibility and scalability of the system by adopting a modular design for thumbnail views and focus frames, while ensuring the stability of the core functions of the canvas, ensuring efficient content management and access even in extremely large canvases.

[0134] Corresponding to the above method embodiment, the present invention also discloses a canvas content positioning device.

[0135] See also Figure 4 , a schematic diagram of a canvas content positioning device disclosed in an embodiment of the present invention, the device may include:

[0136] The monitoring unit 301 is used to monitor a touch event in which a user drags a focus frame on a thumbnail view to locate the content on the canvas.

[0137] This application creates a thumbnail view on the canvas in advance. The thumbnail view is created in proportion to the canvas size and corresponds to the canvas content. The focus frame is drawn on the top layer of the thumbnail view and can be linked with the visible area of ​​the canvas, that is, the content displayed in the focus frame completely corresponds to the content displayed in the visible area of ​​the canvas. Therefore, the user can position the canvas content by dragging the focus frame on the thumbnail view.

[0138] It should be noted that the focus frame position and focus frame size can be adjusted according to the actual canvas content positioning needs, and can ensure that the canvas visible area can be accurately reflected at any zoom ratio.

[0139] The touch event described in this application refers to the process in which the user drags the focus frame on the thumbnail view to locate the canvas content.

[0140] The position determination unit 302 is used to determine the latest position of the focus frame in the thumbnail view in the touch event.

[0141] When the user needs to position the canvas content, the user can drag the focus frame on the thumbnail view, and the final position of the dragged focus frame is also the latest position of the focus frame.

[0142] In this application, the process of the user dragging the focus frame on the thumbnail view to locate the canvas content is detailed in Figures 2(a), 2(b) and 2(c).

[0143] Among them, the latest position of the focus frame can be expressed by the focus frame coordinates, as follows:

[0144] (1) The calculation formula of the horizontal coordinate of the focus frame is as follows:

[0145] focusFrameX=thumbnailWidth×(visibleX / canvasWidth);

[0146] In the formula, focusFrameX represents the horizontal coordinate of the focus frame, thumbnailWidth represents the width of the thumbnail view, visibleX represents the horizontal coordinate of the visible part of the canvas content on the screen, and canvasWidth represents the width of the canvas;

[0147] (2) The calculation formula of the vertical coordinate of the focus frame is as follows:

[0148] focusFrameY=thumbnailHeight×(visibleY / canvasHeight);

[0149] In the formula, focusFrameY represents the vertical coordinate of the focus frame, thumbnailHeight represents the height of the thumbnail view, visibleY represents the vertical coordinate of the visible part of the canvas content on the screen, and canvasHeight represents the height of the canvas.

[0150] Among them, the thumbnail view width, the thumbnail view height, the canvas width, the canvas height, the horizontal coordinate of the visible part of the canvas content on the screen, and the vertical coordinate of the visible part of the canvas content on the screen are all known.

[0151] The offset determination unit 303 is used to obtain a canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling.

[0152] Specifically, the horizontal coordinate offset of the canvas is determined according to the following formula:

[0153] canvasOffsetX=(focusFrameX / thumbnailWidth)×canvasContentWidth;

[0154] Wherein, canvasOffsetX represents the horizontal coordinate offset of the canvas, focusFrameX represents the horizontal coordinate of the focus frame, thumbnailWidth represents the width of the thumbnail view, and canvasContentWidth represents the width of the canvas content after scaling.

[0155] Determine the vertical coordinate offset of the canvas according to the following formula:

[0156] canvasOffsetY=(focusFrameY / thumbnailHeight)×canvasContentHeight;

[0157] In the formula, canvasOffsetY represents the vertical coordinate offset of the canvas, focusFrameY represents the vertical coordinate of the focus frame, thumbnailHeight represents the height of the thumbnail view, and canvasContentHeight represents the height of the canvas content after scaling.

[0158] The canvas offset includes: the canvas horizontal coordinate offset and the canvas vertical coordinate offset.

[0159] The size of the canvas content after scaling includes: the width of the canvas content after scaling and the height of the canvas content after scaling.

[0160] It should be noted that the width and height of the thumbnail view are known. When the focus frame is moved, the latest position of the focus frame can be determined. Correspondingly, the horizontal coordinate and the vertical coordinate of the focus frame are known, and the scaled width and height of the canvas content displayed in the visible area of ​​the canvas linked to the focus frame are also known. Therefore, the canvas offset can be obtained according to the above two formulas.

[0161] The updating unit 304 is used to update the canvas visible area according to the canvas offset to complete the positioning of the canvas content.

[0162] In summary, the present invention discloses a canvas content positioning device, which monitors the touch event of a user dragging a focus frame on a thumbnail view to position the canvas content, determines the latest position of the focus frame in the thumbnail view in the touch event, obtains the canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling, updates the canvas visible area according to the canvas offset, and completes the canvas content positioning. The present invention adds an innovative combination of thumbnail views and focus frames to the canvas, provides a global view of the canvas through the thumbnail view, realizes rapid navigation and positioning in the canvas by controlling the movement of the focus frame in the thumbnail view, and displays the content positioned by the focus frame through the canvas visible area linked to the focus frame, so that the user can view the canvas content positioning result. The entire operation process is simple and easy, and can effectively reduce the time and operation steps required for canvas content positioning, thereby improving work efficiency and user experience.

[0163] To further optimize the above embodiment, the canvas content positioning device may further include:

[0164] The thumbnail view creating unit is used to create a thumbnail view.

[0165] The thumbnail view creation unit is also used to:

[0166] Creating a thumbnail view frame in proportion to the canvas size, and suspending the thumbnail view frame above the canvas;

[0167] Extract all stroke data using the stroke class in the view class, and render the stroke data into a stroke image;

[0168] The stroke image is scaled according to the thumbnail view size, and the target stroke image obtained after scaling is filled into the thumbnail view frame to obtain the thumbnail view.

[0169] In this embodiment, the stroke image is scaled according to the size of the thumbnail view so that the target stroke image obtained after scaling can completely match the thumbnail view frame, thereby obtaining the thumbnail view.

[0170] It should be noted that in this application, the thumbnail view and the canvas content adopt a synchronization algorithm to ensure that the thumbnail view and the canvas content are always consistent and to ensure that the thumbnail view reflects the latest canvas status.

[0171] After constructing a thumbnail view, this application can draw a focus frame on the top layer of the thumbnail view. The focus frame is linked to the visible area of ​​the canvas. Through the precise mapping of the focus frame and the canvas content, the content positioning accuracy at the meter level can be achieved.

[0172] The focus frame size can be dynamically adjusted based on the zoom level of the canvas to ensure that the focus frame accurately reflects the visible area of ​​the canvas at any zoom ratio.

[0173] In summary, the design of the visual thumbnail view and focus frame in this application is in line with the user's intuitive cognition, which can greatly reduce the difficulty of user operation and allow users to quickly get started without additional training. Compared with the traditional user navigation method of sliding with two fingers or one finger, repeatedly sliding the canvas to find the positioning area, this application can effectively reduce the time and operation steps required for users to locate the canvas content, thereby improving work efficiency.

[0174] In actual applications, users can select image processing on the thumbnail view. Therefore, to further optimize the above embodiment, the canvas content positioning device may further include:

[0175] A reduction unit, configured to reduce the image to a target image in proportion to the size of the thumbnail view relative to the size of the canvas when detecting that a user inserts an image on the canvas;

[0176] A position determination unit, configured to determine a corresponding target position of the target image in the thumbnail view according to an insertion position of the image in the canvas;

[0177] The rendering unit is used to render the target image at the target position, and make the image level of the target image in the thumbnail view lower than the stroke level in the thumbnail view.

[0178] In this embodiment, when it is detected that a user inserts a picture on the canvas, in order to ensure that the thumbnail view always reflects the latest canvas status, the present application will proportionally reduce the picture to a target picture according to the reduction ratio of the thumbnail view size relative to the canvas size, and determine the corresponding target position of the target picture in the thumbnail view according to the insertion position of the picture in the canvas, and by rendering the target picture at the target position, the consistency of the thumbnail view and the canvas is ensured.

[0179] It should be noted that it is necessary to ensure that the image level of the target image in the thumbnail view is lower than the stroke level in the thumbnail view. The stroke level is the level of the stroke image in the thumbnail view when the thumbnail view is constructed.

[0180] In practical applications, the present application can also dynamically update the thumbnail view. Therefore, in order to further optimize the above embodiment, the canvas content positioning device can also include:

[0181] When a stroke change event is detected, the latest stroke image is obtained;

[0182] Scaling the latest stroke image according to the reduction ratio of the thumbnail view size relative to the canvas size to obtain a latest target stroke image;

[0183] The target stroke image in the thumbnail view is replaced with the latest target stroke image.

[0184] When a stroke change event is detected, the present application achieves dynamic update of the thumbnail view by scaling the latest acquired stroke image and replacing the original target stroke image in the thumbnail view.

[0185] In actual applications, the size of the scaled latest target stroke image may not be the same as the size of the original target stroke image in the thumbnail view. Therefore, when the latest target stroke image is moved in the thumbnail view or the original target stroke image is replaced with the latest target stroke image, the position of the latest target stroke image in the thumbnail view needs to be recalculated.

[0186] In practical applications, the present application can also dynamically update the focus frame as needed. Therefore, in order to further optimize the above embodiment, the canvas content positioning device can also include:

[0187] An acquisition unit, configured to acquire the size of a visible area of ​​the canvas, the position of the visible area of ​​the canvas, the size of a thumbnail view, and the size of the canvas when an operation event of the user on the canvas is detected;

[0188] A focus frame information determination unit, configured to determine a latest size and a latest position of the focus frame based on the size of the canvas visible area, the position of the canvas visible area, the size of the thumbnail view and the size of the canvas;

[0189] An updating unit is used to update the focus frame in the thumbnail view according to the latest size and the latest position of the focus frame.

[0190] The user's operation events on the canvas include but are not limited to scroll events and zoom events.

[0191] In practical applications, the thumbnail view and the focus frame are modular structures with optional configurations.

[0192] When thumbnails and focus boxes adopt a modular structure, core functions (such as stroke rendering) are required, and user-selected image processing is optional. It can be enabled or disabled according to specific needs without affecting the core positioning function of the canvas.

[0193] In summary, the present invention simplifies the traditional multiple scrolling and zooming operations into a single intuitive interaction by introducing an innovative combination of thumbnail views and focus frames in the canvas, and enables users to understand and operate complex canvas content more easily by providing a global view and precise positioning function, thereby reducing operational fatigue and improving work satisfaction, and effectively reducing the time users spend on content navigation. In addition, the present invention improves the flexibility and scalability of the system by adopting a modular design for thumbnail views and focus frames, while ensuring the stability of the core functions of the canvas, ensuring efficient content management and access even in extremely large canvases.

[0194] Corresponding to the above embodiment, the present invention further discloses a computer storage medium, which stores at least one instruction. When the at least one instruction is executed by a processor, the steps shown in the embodiment of the method for positioning canvas content are implemented.

[0195] Computer storage media can be tangible media that can contain or store programs for use by or in conjunction with an instruction execution system, device, or equipment. Computer storage media can be machine-readable signal media or machine-readable storage media. Computer storage media can include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or equipment, or any suitable combination of the foregoing. More specific examples of machine-readable storage media can include electrical connections based on one or more lines, portable computer disks, hard disks, random access memories (RAM), read-only memories (ROM), erasable programmable read-only memories (EPROM or flash memory), optical fibers, portable compact disk read-only memories (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0196] Corresponding to the above embodiment, Figure 5 As shown, the present invention also provides an electronic device, which may include: a processor 1 and a memory 2;

[0197] The processor 1 and the memory 2 communicate with each other via a communication bus 3;

[0198] Processor 1, configured to execute at least one instruction;

[0199] Memory 2, used to store at least one instruction;

[0200] The processor 1 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention.

[0201] The memory 2 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.

[0202] The processor executes at least one instruction to implement the steps shown in the embodiment of the canvas content positioning method.

[0203] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0204] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0205] The above description of the disclosed embodiments enables one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A canvas content positioning method, characterized in that: include: Detecting a touch event of a user dragging a focus frame on a thumbnail view to position the canvas content, wherein the thumbnail view corresponds to the canvas content, the focus frame is drawn on the top layer of the thumbnail view, and can be linked to the visible area of ​​the canvas; Determine the latest focus frame position of the focus frame in the thumbnail view in the touch event; Obtaining a canvas offset based on the latest position of the focus frame and the scaled size of the canvas content; The canvas visible area is updated according to the canvas offset to complete the positioning of the canvas content.

2. The canvas content positioning method according to claim 1, characterized in that: The thumbnail view creation process includes: Creating a thumbnail view frame in proportion to the canvas size, and suspending the thumbnail view frame above the canvas; Extract all stroke data using the stroke class in the view class, and render the stroke data into a stroke image; The stroke image is scaled according to the thumbnail view size, and the target stroke image obtained after scaling is filled into the thumbnail view frame to obtain the thumbnail view.

3. The canvas content positioning method according to claim 1 or 2, characterized in that: Also includes: When it is detected that the user inserts an image on the canvas, the image is proportionally reduced to a target image according to the reduction ratio of the thumbnail view size relative to the canvas size; Determining a corresponding target position of the target image in the thumbnail view according to an insertion position of the image in the canvas; The target image is rendered at the target position, and a picture level of the target image in the thumbnail view is lower than a stroke level in the thumbnail view.

4. The canvas content positioning method according to claim 2, characterized in that: Also includes: When a stroke change event is detected, the latest stroke image is obtained; Scaling the latest stroke image according to the reduction ratio of the thumbnail view size relative to the canvas size to obtain a latest target stroke image; The target stroke image in the thumbnail view is replaced with the latest target stroke image.

5. The canvas content positioning method according to claim 1, characterized in that: Also includes: When a user operation event on the canvas is detected, the size of the visible area of ​​the canvas, the position of the visible area of ​​the canvas, the size of the thumbnail view and the size of the canvas are obtained; Determine the latest size and latest position of the focus frame based on the size of the canvas visible area, the position of the canvas visible area, the size of the thumbnail view and the canvas size; The focus frame in the thumbnail view is updated according to the latest size and the latest position of the focus frame.

6. The method for locating canvas content according to any one of claims 1 to 5, characterized in that: The obtaining of the canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling includes: Determine the canvas horizontal coordinate offset according to the following formula: canvasOffsetX=(focusFrameX / thumbnailWidth)×canvasContentWidth; Wherein, canvasOffsetX represents the horizontal coordinate offset of the canvas, focusFrameX represents the horizontal coordinate of the focus frame, thumbnailWidth represents the width of the thumbnail view, and canvasContentWidth represents the width of the canvas content after scaling; Determine the vertical coordinate offset of the canvas according to the following formula: canvasOffsetY=(focusFrameY / thumbnailHeight)×canvasContentHeight; In the formula, canvasOffsetY represents the vertical coordinate offset of the canvas, focusFrameY represents the vertical coordinate of the focus frame, thumbnailHeight represents the height of the thumbnail view, and canvasContentHeight represents the height of the canvas content after scaling; The canvas offset includes: the canvas horizontal coordinate offset and the canvas vertical coordinate offset.

7. The canvas content positioning method according to claim 1, characterized in that: The thumbnail view and the focus frame are modular structures with optional configurations.

8. A canvas content positioning device, characterized in that: include: A monitoring unit, used to monitor a touch event of a user dragging a focus frame on a thumbnail view to position the canvas content, wherein the thumbnail view corresponds to the canvas content, the focus frame is drawn on the top layer of the thumbnail view, and can be linked with the visible area of ​​the canvas; A position determination unit, used to determine the latest position of the focus frame in the thumbnail view in the touch event; An offset determination unit, configured to obtain a canvas offset based on the latest position of the focus frame and the size of the canvas content after scaling; The updating unit is used to update the canvas visible area according to the canvas offset to complete the positioning of the canvas content.

9. A computer storage medium, characterized in that The computer storage medium stores at least one instruction, and when the at least one instruction is executed by the processor, the method for locating canvas content according to any one of claims 1 to 7 is implemented.

10. An electronic device, characterized in that: The electronic device comprises: a memory and a processor; The memory is used to store at least one instruction; The processor is used to execute the at least one instruction to implement the canvas content positioning method according to any one of claims 1 to 7.

Images