A canvas and text interaction method and device
By creating text operation classes in Pixi.js and processing double-click operations, the synchronous interaction between the canvas and text is achieved, solving the problem of poor user experience in the existing technology, and improving user operation efficiency and experience.
Patent Information
- Application Number
- CN202410583486.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-05-11
- Publication Date
- 2025-03-25
- Estimated Expiration
- 2044-05-11
AI Technical Summary
The existing Pixi.js lacks synchronous interaction between text and input boxes in the canvas, and does not have double-click event processing, resulting in poor user experience when labeling information when drawing graphics.
Real-time interaction between text and canvas is achieved by creating text operation classes, configuring text and text box parameters, and rendering input text and input text boxes in click operations. At the same time, modify the input text by adding a timer to process the double-click operation.
It realizes that directly clicking on the point to be marked on the canvas for text input and syncing to the canvas, improving the user's operation efficiency and experience without jumping to other interfaces or applications.
Smart Images
Figure CN118334178B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of canvas interaction technology, and in particular to a canvas and text interaction method and device. Background Art
[0002] Pixi.js is an open source 2D rendering engine based on WebGL and Canvas for creating interactive, high-performance graphics and animations. It provides a simple and powerful API that enables developers to easily create attractive graphics applications on the Web. It provides powerful sprite and graphics object functions. Developers can easily create, manipulate and animate sprite images, as well as draw various shapes, paths and gradients. It also supports text rendering, can create and style text, achieve rich text effects, and supports font loading and caching. It also has rich interactive functions, including click, drag, zoom and touch. Developers can easily add interactive behaviors to graphic objects and respond to user interactions.
[0003] The existing Pixi.js has a wealth of interactive functions, such as click, drag, zoom, touch, etc., and can also create styled text to present text on the canvas. However, Pixi does not have the function of synchronous interaction between text and input boxes on the canvas, and there is no double-click function in Pixi's mouse events. Therefore, when you draw a graphic on the canvas and need to mark some information, you cannot directly click the point to be marked to directly enter text and synchronize it to the canvas, which is a poor user experience. Summary of the invention
[0004] The present invention provides a canvas and text interaction method and device to solve the problem that the existing Pixi.js cannot perform canvas and text interaction at the same time and the user experience is poor.
[0005] In order to solve the above technical problems, an embodiment of the present invention provides a canvas and text interaction method, including:
[0006] Create a text operation class, and configure the text parameters and text box parameters in the text operation class;
[0007] The first element is called according to the click operation, and the input text and the input text box are obtained according to the first element, the input text is rendered according to the second element and the text parameter, and the input text box is rendered according to the third element and the text box parameter; the first element is a real-time interactive element;
[0008] The rendered input text and input text box are displayed in the canvas according to the first display method. Specifically, when the input text box interacts with input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas; the first display method is used to overlap the input text box and the input text.
[0009] The present invention creates a second element and a third element to render input text and an input text box respectively, and displays the rendered input text and input text box in a canvas according to a first display method, thereby realizing direct text input and synchronization to the canvas by directly clicking on the point to be marked. In addition, through the first display method, when the input text box is interacting with input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas, so that the user can directly input and edit text on the canvas without jumping to other interfaces or applications, thereby improving the user's operating efficiency and experience.
[0010] Furthermore, the text operation class is created, and the text parameters and text box parameters in the text operation class are configured, specifically:
[0011] Create a text operation class, which is a subclass of the Pixi.Container class;
[0012] The text operation class is instantiated, and the text parameters and text box parameters in the text operation class are configured; the text parameters include font, font size and color, and the text box parameters include width, background color and border style.
[0013] Furthermore, the second element and the text parameter render the input text, specifically:
[0014] Add a second element in the text operation class, wherein the second element includes a text attribute and a style attribute; the style attribute corresponds to the text parameter;
[0015] The user's input text is acquired according to the text attribute, and the input text is rendered according to the style attribute.
[0016] Furthermore, the input text box is rendered according to the third element and the text box parameters, specifically:
[0017] Add a third element in the text operation class, where the third element is a rectangular sub-element;
[0018] The style of the third element is set according to the text box parameters, and the input text box is rendered according to the text box parameters.
[0019] Furthermore, the rendered input text and input text box are displayed in the canvas according to the first display method, specifically:
[0020] Obtain the world change matrix of this input instance, and clone and generate a first world change matrix according to the world change matrix;
[0021] Obtaining position information of the text operation class, scaling the first world change matrix according to the canvas boundary and the size of the renderer, and transforming the information of the first world change matrix according to a preset format to generate first matrix deformation data;
[0022] The matrix deformation data of the first element is adjusted according to the position information until the matrix deformation data of the first element coincides with the first matrix deformation data, and the input text and the input text box are displayed in the canvas.
[0023] Furthermore, after displaying the rendered input text and input text box on the canvas according to the first display method, the method further includes:
[0024] The input text is modified according to the double-click operation, specifically:
[0025] Adding a timer to the click method of the canvas, and marking two consecutive clicks as double-click operations according to a preset time threshold;
[0026] The text input function is called according to the double-click operation to modify the input text.
[0027] In a second aspect, the present invention provides a canvas and text interaction device, comprising: an initialization module, a rendering module and a display module;
[0028] The initialization module is used to create a text operation class and configure the text parameters and text box parameters in the text operation class;
[0029] The rendering module is used to call the first element according to the click operation, obtain the input text and the input text box according to the first element, render the input text according to the second element and the text parameter, and render the input text box according to the third element and the text box parameter; the first element is a real-time interactive element;
[0030] The display module is used to display the rendered input text and input text box in the canvas according to the first display method. Specifically, when the input text box is interacting with input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas; the first display method is used to overlap the input text box and the input text.
[0031] Furthermore, it also includes a modification module, which is used to modify the input text according to the double-click operation, specifically:
[0032] Adding a timer to the click method of the canvas, and marking two consecutive clicks as double-click operations according to a preset time threshold;
[0033] The text input function is called according to the double-click operation to modify the input text.
[0034] In a third aspect, the present invention provides a computer device, comprising: a processor, a communication interface and a memory, wherein the processor, the communication interface and the memory are interconnected, wherein the memory stores an executable program code, and the processor is used to call the executable program code to execute the canvas and text interaction method.
[0035] In a fourth aspect, the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer instructions, and the computer instructions are executed by a processor to implement the canvas-text interaction method. BRIEF DESCRIPTION OF THE DRAWINGS
[0036] Figure 1 A schematic diagram of a flow chart of a canvas and text interaction method provided by an embodiment of the present invention;
[0037] Figure 2 Another schematic diagram of a flow chart of a canvas and text interaction method provided by an embodiment of the present invention;
[0038] Figure 3 A schematic diagram of the structure of a canvas and text interaction device provided in an embodiment of the present invention. DETAILED DESCRIPTION
[0039] 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.
[0040] Embodiment 1
[0041] Please refer to Figure 1 , Figure 1 A flowchart of a canvas and text interaction method provided by an embodiment of the present invention includes steps 101 to 103, which are as follows:
[0042] Step 101: Create a text operation class, and configure text parameters and text box parameters in the text operation class;
[0043] In this embodiment, the text operation class is created, and the text parameters and text box parameters in the text operation class are configured, specifically:
[0044] Create a text operation class, which is a subclass of the Pixi.Container class;
[0045] The text operation class is instantiated, and the text parameters and text box parameters in the text operation class are configured; the text parameters include font, font size and color, and the text box parameters include width, background color and border style.
[0046] In this embodiment, a text operation class (Text I nput) is created, and the text operation class inherits the Pixi.Container class, so that the subclass Text I nput inherits all the properties and methods from the parent class Container.
[0047] In this embodiment, parameters need to be passed when instantiating and calling Text I nput. The text parameters define the style of the text in the canvas, including font, font size, color, etc., and are configured using Pixi.TextStyle. The text box parameters are the style of the input box, including width, background color, border style, etc., and are configured using CSS.
[0048] Step 102: calling the first element according to the click operation, obtaining input text and input text box according to the first element, rendering the input text according to the second element and text parameters, and rendering the input text box according to the third element and text box parameters; the first element is a real-time interactive element;
[0049] In this embodiment, a DOM element of an input box is initialized in the Text Input class for real-time interaction. The DOM element is the first element, which is called according to the click operation.
[0050] In this embodiment, the second element and the text parameter render the input text, specifically:
[0051] Add a second element in the text operation class, wherein the second element includes a text attribute and a style attribute; the style attribute corresponds to the text parameter;
[0052] The user's input text is acquired according to the text attribute, and the input text is rendered according to the style attribute.
[0053] In this embodiment, a second element is added to Text Input, and the second element is a Pixi.Text child element, which is used to render text on the canvas after the text box is interacted. The Pixi.Text has a text attribute (text attribute) and a style attribute (style attribute). The text attribute is the text displayed by the user interactive input, and the style attribute corresponds to the text parameter passed when the class is instantiated, that is, the display style of the text on the canvas.
[0054] In this embodiment, the input text box is rendered according to the third element and the text box parameters, specifically:
[0055] Add a third element in the text operation class, where the third element is a rectangular sub-element;
[0056] The style of the third element is set according to the text box parameters, and the input text box is rendered according to the text box parameters.
[0057] In this embodiment, a third element is added to TextI nput, and the third element is a Picxi.Graphics rectangle sub-element. The size of the rectangle is the attribute length and width of the text box parameter passed during instantiation, which is used to specify the click area of the TextI nput class.
[0058] In this embodiment, the input text and the input text box are rendered according to the text parameters and text box parameters passed during instantiation, which is implemented through instantiation during calling. Specifically, (new Text I nput (params1, params2), params1 is the text parameter, and params2 is the text box parameter.
[0059] Step 103: Display the rendered input text and input text box in the canvas according to the first display method. Specifically, when the input text box is interacting with input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas; the first display method is used to overlap the input text box and the input text.
[0060] In this embodiment, the rendered input text and input text box are displayed in the canvas according to the first display method, specifically:
[0061] Obtain the world change matrix of this input instance, and clone and generate a first world change matrix according to the world change matrix;
[0062] Obtaining position information of the text operation class, scaling the first world change matrix according to the canvas boundary and the size of the renderer, and transforming the information of the first world change matrix according to a preset format to generate first matrix deformation data;
[0063] The matrix deformation data of the first element is adjusted according to the position information until the matrix deformation data of the first element coincides with the first matrix deformation data, and the input text and the input text box are displayed in the canvas.
[0064] In this embodiment, a first display method is added to the Text Input class, and the first display method is used to calculate the overlap between the input box and the text.
[0065] In this embodiment, the first display method is specifically: calling getBoundingClientRect() to obtain the basic information of the input box DOM element, and cloning the world change matrix of this instance to obtain the first world change matrix, then, according to the position of Text I nput, the information of the obtained first world change matrix is converted into data in the format of the transform attribute matrix() function in CSS, and according to the position information, the transform attribute of the DOM element is moved and overlapped with the corresponding data, the matrix deformation data of the first element is overlapped with the first matrix deformation data, so that the text and the text box overlap, and the input text and the input text box are displayed in the canvas.
[0066] In this embodiment, the world transformation matrix of this instance is obtained by cloning so that the matrix of the instance itself will not be directly affected when used; the cloned world matrix is scaled according to the resolution to ensure that the size and quality of the elements on the canvas on the device meet the expectations; secondly, it is scaled according to the canvas boundary and the size of the renderer to ensure that the elements can be correctly mapped; thereby accurately obtaining the position of the Text I nput, so that the matrix deformation data of the first element and the first matrix deformation data coincide more accurately.
[0067] In this embodiment, the matrix deformation data of the first element is overlapped with the first matrix deformation data, so that when the input text box is interactively inputting text, the dom element is displayed and the Graphics rectangle is hidden; otherwise, the dom element is hidden and the Graphics rectangle is displayed.
[0068] In this embodiment, after displaying the rendered input text and input text box in the canvas according to the first display method, the method further includes:
[0069] The input text is modified according to the double-click operation, specifically:
[0070] Adding a timer to the click method of the canvas, and marking two consecutive clicks as double-click operations according to a preset time threshold;
[0071] The text input function is called according to the double-click operation to modify the input text.
[0072] In this embodiment, the click event of the pi xi.js canvas is monitored and a timer is set in the click method. If two consecutive clicks are made within the preset time threshold, the operation is marked as a double-click. When the double-click operation is triggered, the focus input function of the text input box is called. At this time, the DOM element displaying the Graphs rectangle is hidden.
[0073] In this embodiment, the text can be modified by a simple double-click operation, which makes it convenient for users to edit text and improves user efficiency and experience.
[0074] In this embodiment, the second element and the third element are created to render the input text and the input text box respectively, and the rendered input text and the input text box are displayed in the canvas according to the first display method, so that text input and synchronization to the canvas can be achieved by directly clicking on the point to be marked. In addition, the first display method is used to achieve that when the input text box is interacting with input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas, so that the user can directly input and edit text on the canvas without jumping to other interfaces or applications, thereby improving the user's operating efficiency and experience.
[0075] Please refer to Figure 2 , Figure 2 Another flowchart of the canvas and text interaction method provided by an embodiment of the present invention.
[0076] In this embodiment, a class (Text I nput) is first created, and a Pixi.Text sub-element is added to the Text I nput, which is used to render the text on the canvas after the text box interacts; a Pixi.Graphics rectangle sub-element is added to the ext I nput, which is used to specify the click area of the Text I nput class; a DOM element of an input input box is initialized in the Text I nput class for real-time interaction, so that the input text and the text box are rendered and displayed according to the Pixi.Text sub-element, the Pixi.Graphics rectangle sub-element and the DOM element. When the user initiates the double-click operation, the focus input function of the input box is called, and the DOM element displays the Graphics rectangle hidden, otherwise the DOM element hides the Graphics rectangle display.
[0077] Please refer to Figure 3 , Figure 3 A schematic diagram of a structure of a canvas and text interaction device provided by an embodiment of the present invention, comprising: an initialization module 301, a rendering module 302 and a display module 303;
[0078] The initialization module 301 is used to create a text operation class and configure the text parameters and text box parameters in the text operation class;
[0079] The rendering module 302 is used to call the first element according to the click operation, obtain the input text and the input text box according to the first element, render the input text according to the second element and the text parameter, and render the input text box according to the third element and the text box parameter; the first element is a real-time interactive element;
[0080] The display module 303 is used to display the rendered input text and input text box in the canvas according to the first display method. Specifically, when the input text box is interacting with input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas; the first display method is used to overlap the input text box and the input text.
[0081] In this embodiment, the initialization module is specifically used to:
[0082] Create a text operation class, which is a subclass of the Pixi.Container class;
[0083] The text operation class is instantiated, and the text parameters and text box parameters in the text operation class are configured; the text parameters include font, font size and color, and the text box parameters include width, background color and border style.
[0084] In this embodiment, the rendering module is specifically used for:
[0085] Add a second element in the text operation class, wherein the second element includes a text attribute and a style attribute; the style attribute corresponds to the text parameter;
[0086] The user's input text is acquired according to the text attribute, and the input text is rendered according to the style attribute.
[0087] In this embodiment, the rendering module is specifically used for:
[0088] Add a third element in the text operation class, where the third element is a rectangular sub-element;
[0089] The style of the third element is set according to the text box parameters, and the input text box is rendered according to the text box parameters.
[0090] In this embodiment, the display module is specifically used for:
[0091] Obtain the world change matrix of this input instance, and clone and generate a first world change matrix according to the world change matrix;
[0092] Obtaining position information of the text operation class, scaling the first world change matrix according to the resolution, canvas boundary, and size of the renderer, and transforming information of the first world change matrix according to a preset format to generate first matrix deformation data;
[0093] The matrix deformation data of the first element is adjusted according to the position information until the matrix deformation data of the first element coincides with the first matrix deformation data, and the input text and the input text box are displayed in the canvas.
[0094] In this embodiment, the canvas and text interaction device further includes a modification module, and the modification module is used to modify the input text according to the double-click operation, specifically:
[0095] Adding a timer to the click method of the canvas, and marking two consecutive clicks as double-click operations according to a preset time threshold;
[0096] The text input function is called according to the double-click operation to modify the input text.
[0097] An embodiment of the present invention further provides a computer device, comprising: a processor, a communication interface and a memory, wherein the processor, the communication interface and the memory are connected to each other, wherein the memory stores an executable program code, and the processor is used to call the executable program code to execute the canvas and text interaction method.
[0098] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the canvas and text interaction method is implemented.
[0099] The specific embodiments described above further illustrate the purpose, technical solutions and beneficial effects of the present invention. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. It is particularly pointed out that for those skilled in the art, any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention should be included in the scope of protection of the present invention.
Claims
1. A canvas and text interaction method, characterized in that: include: Create a text operation class, and configure the text parameters and text box parameters in the text operation class; The first element is called according to the click operation, and the input text and the input text box are obtained according to the first element, the input text is rendered according to the second element and the text parameter, and the input text box is rendered according to the third element and the text box parameter; the first element is a real-time interactive element; The rendered input text and the input text box are displayed in the canvas according to the first display method. Specifically, when the input text box is interacting with the input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas; the first display method is used to overlap the input text box and the input text; The input text is modified according to the double-click operation, specifically: a timer is added to the click method of the canvas, and two consecutive clicks are marked as double-click operations according to a preset time threshold; a text input function is called according to the double-click operation to modify the input text.
2. The canvas and text interaction method according to claim 1, characterized in that: The text operation class is created, and the text parameters and text box parameters in the text operation class are configured, specifically: Create a text operation class, which is a subclass of the Pixi.Container class; The text operation class is instantiated, and the text parameters and text box parameters in the text operation class are configured; the text parameters include font, font size and color, and the text box parameters include width, background color and border style.
3. The canvas and text interaction method according to claim 1, characterized in that: The second element and text parameter render the input text, specifically: Add a second element in the text operation class, wherein the second element includes a text attribute and a style attribute; the style attribute corresponds to the text parameter; The user's input text is acquired according to the text attribute, and the input text is rendered according to the style attribute.
4. The canvas and text interaction method according to claim 1, characterized in that: The input text box is rendered according to the third element and the text box parameters, specifically: Add a third element in the text operation class, where the third element is a rectangular sub-element; The style of the third element is set according to the text box parameters, and the input text box is rendered according to the text box parameters.
5. The canvas and text interaction method according to claim 1, characterized in that: The rendered input text and input text box are displayed in the canvas according to the first display method, specifically: Obtain the world change matrix of this input instance, and clone and generate a first world change matrix according to the world change matrix; Obtaining position information of the text operation class, scaling the first world change matrix according to the resolution, canvas boundary, and size of the renderer, and transforming information of the first world change matrix according to a preset format to generate first matrix deformation data; The matrix deformation data of the first element is adjusted according to the position information until the matrix deformation data of the first element coincides with the first matrix deformation data, and the input text and the input text box are displayed in the canvas.
6. A canvas and text interaction device, characterized in that: include: Initialization module, rendering module, modification module and display module; The initialization module is used to create a text operation class and configure the text parameters and text box parameters in the text operation class; The rendering module is used to call the first element according to the click operation, obtain the input text and the input text box according to the first element, render the input text according to the second element and the text parameter, and render the input text box according to the third element and the text box parameter; the first element is a real-time interactive element; The display module is used to display the rendered input text and input text box in the canvas according to the first display method. Specifically, when the input text box is interacting with the input text, the first element is displayed in the canvas and the input text box is hidden in the canvas; otherwise, the first element is hidden in the canvas and the input text box is displayed in the canvas; the first display method is used to overlap the input text box and the input text; The modification module is used to modify the input text according to the double-click operation, specifically: adding a timer in the click method of the canvas, and marking two consecutive clicks as double-click operations according to a preset time threshold; calling the text input function according to the double-click operation to modify the input text.
7. A computer device, characterized in that: include: A processor, a communication interface and a memory, wherein the processor, the communication interface and the memory are connected to each other, wherein the memory stores an executable program code, and the processor is used to call the executable program code to execute the canvas and text interaction method according to any one of claims 1 to 5.
8. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the canvas-text interaction method according to any one of claims 1 to 5 is implemented.
Citation Information
Patent Citations
Dynamic textbox creating method, system and equipment and medium
CN116643750A