Design method for adapting to H5 page of mobile terminal based on Konva

Abstract

According to the Konva-based design method for adapting to the Html5 page of the mobile terminal provided by the invention, a part of entity classes are packaged on the basis of Konva, so that the Konva-based design method has a business strong correlation method; in the serialization process, an original serialization method of Konva is expanded, a metadata set is constructed for each element node, and specified service association attribute data is stored in the metadata set; according to the method, a method for generating a Canvas canvas from JSON data in an original deserialization method of Konva is abandoned, a deserialization method for mobile terminal adaptation is reconstructed, and in the deserialization method for mobile terminal adaptation, each element node in a design drawing is described by a virtual DOM node; and a real DOM structure is generated and hung on the HTML container mounted on the mobile terminal, so that the webpage based on the Konva design can be normally and accurately displayed on the mobile terminal.

Description

Technical Field

[0001] This invention relates to the field of web page development technology, specifically a design method for mobile-compatible H5 pages based on Konva. Background Technology

[0002] Konva is a JavaScript library based on Canvas. It encapsulates and enhances the HTML5 Canvas API, allowing developers to manage and modify graphics on a Canvas as if they were manipulating the DOM. Konva maintains a graphics tree, supporting features such as graphic modification, event listening, animation, and drag-and-drop. The root node `stage` contains multiple `konva.layer` objects, each containing two Canvas shaders: a foreground renderer and a background renderer. Each layer also contains groups composed of multiple shapes, where drawing and manipulation of images take place. By creating Stages, Layers, and graphics objects, complex Canvas applications can be easily built and interacted with. Konva can easily implement image interaction effects in desktop and mobile applications.

[0003] With the rapid development of mobile internet, more and more businesses and individuals are choosing to provide services via mobile devices, resulting in a large demand for interface development for native apps, HTML5, and mini-program platforms. Typically, engineers design an HTML5 page on a PC that needs to run on mobile devices. These pages need to include certain functionalities. For example, in an app for a particular car brand, after the brand joins the app, the operations platform staff configures corresponding redirect links for the logos or buttons of various car brands. Once configured, users of the car brand's app can click on the logo image or button to jump to the corresponding page. Alternatively, some dynamic images on the page may need to be designed as carousels. These are common web page functional requirements.

[0004] Typically, mobile web design involves designers creating various effects on a PC, uploading the designed page parameters to a server, and then retrieving the page data from the server for display on the mobile device. When developing web pages using the Konva library based on Canvas, the transfer of web page parameters between the server and mobile device requires serialization. This converts the objects or data structures in the web page to be transmitted into a transmittable byte stream, which is then uploaded to the server in JSON format. The mobile device downloads the serialized JSON data from the server to its local machine, reconstructs it into Canvas objects or data structures in memory, and then displays it using its local Canvas.

[0005] However, in practical work, some problems were found when developing with the Konva library of Canvas, resulting in the inaccurate rendering of web page designs on mobile devices. For example, designers might have designed an Image class image to be displayed on a webpage, configuring text to be displayed as a background, or setting up a link for the image. Alternatively, because different mobile devices have different display sizes, image scaling ratios need to be designed separately for different mobile sizes. However, the existing technology, Konva's native serialization API toJSON(), cannot preserve key business attributes of elements during serialization, such as interactive event bindings and media resource paths, and lacks original design size information. This leads to cross-device layout distortion. In other words, after deserialization on a mobile device, it is impossible to restore the designer's added text display, scaling effects, and link functionality for the image design.

[0006] Meanwhile, since the design work is carried out on the PC, and the memory resources of mobile devices and PCs are different, if complex rules such as image effect rendering are designed for image or video data, when these rendering effects are presented on the mobile device, especially when reproducing video effects, the Canvas rendering work will consume a lot of CPU, memory and other resources on the mobile device, causing problems such as lag on the mobile page, and making it impossible to display the design effects accurately on the PC. Summary of the Invention

[0007] To address the issue that some designs cannot be accurately reproduced on mobile devices when using the Konva library of Canvas on PCs, this invention provides a design method for mobile H5 pages based on Konva, which enables web pages designed based on Konva to be accurately displayed on mobile devices.

[0008] The technical solution of this invention is as follows: a design method for mobile H5 pages adapted based on Konva, characterized by comprising the following steps: S1: Based on business requirements, encapsulate and generate entity classes for mobile adaptation on the basis of Konva; For each mobile terminal adaptation entity class, a unique UUID and a different code name are generated to distinguish different classes; business-specific attributes are defined in the entity class for direct assignment or modification during initialization or other business processes. The operations implemented during generation in each mobile adaptation entity class include: Implement the methods of the abstract class interface; Inheriting from the Konva.Shape or Konva.Group class allows you to have the public and private properties and methods of the parent class; Extend the definition of its own business-specific attributes and business-strongly related methods; the business-strongly related methods are methods for modifying or generating the business-specific attributes; S2: Construct a serialization method for mobile adaptation, which includes the following steps: a1: Build a metadata set for each element node; Before serialization, all element nodes in the design diagram are retrieved according to their corresponding code name, and the business-specific attributes in the element nodes are extracted and placed into a special metadata set. a2: Record the baseline information data of the design drawing; The benchmark information data includes: The original height and width dimensions of the design drawing; The coordinates (x, y) of each element in the design drawing, as well as the height and width of each element; a3: Use the native serialization API to combine the metadata set with the baseline information data and design. Figure 1 It generates JSON data; S3: Construct a deserialization method for mobile adaptation, which includes the following steps: b1: Based on the baseline information data of the design drawing, calculate the adaptation size of the design drawing on mobile devices, denoted as: mobile display size; b2: Convert each element node into a virtual DOM node, and generate an HTML node corresponding to the virtual DOM; b3: During the generation process, the corresponding metadata is assigned to the virtual DOM node by retrieving the metadata set of the element node, thus preserving data that is strongly related to the business. b4: Based on the calculated mobile display size, determine the absolute positioning coordinates of each virtual DOM node in the page, and finally generate the real DOM structure, which is mounted on the HTML container of the mobile device; b5: After performing steps b1~b4 for each image element, the final result is the generated HTML5 page; S4: When designing a mobile webpage, use the existing entity classes in the Konva library on the PC side, along with the mobile adaptation entity classes, to implement the design. After the design is completed, serialize the designed mobile webpage using the mobile adaptation serialization method to obtain JSON format data, which is then uploaded to the server. The mobile device retrieves the JSON format data of the mobile webpage from the server and deserializes the JSON format data using the mobile adaptation deserialization method to display the mobile webpage.

[0009] Its further features are: The serialization method also includes optimization methods for rendering design, comprising the following: c1: Extract the corresponding geometric information and style attributes from the basic layer attributes in Kovna's layer management mechanism; c2: When serializing video elements, the obtained business-specific attributes include parameters for implementing dynamic interaction, which are saved in the form of the metadata set; The parameters for enabling dynamic interaction include: media resource path and autoplay; c3: When dealing with carousel component sequences, the obtained business-specific attributes include animation time-related parameters, which are saved in the form of the metadata set; Animation time-related parameters include: carousel content, carousel image playback animation duration, and carousel image inner margins; The deserialization method, specifically the rendering optimization method, includes the following: d1: Convert the design properties defined for different types of components in the JSON into corresponding CSS rules; The design attributes include: geometric information and style attributes; d2: When deserializing video components, while generating video tags, the parameters for dynamic interaction stored in the metadata set should be preloaded and played after being associated with the media resource preloading controller; d3: When deserializing the carousel component, use the existing carousel component in HTML to associate the animation time-related parameters stored in the metadata collection for playback; In step S1, the encapsulated mobile adaptation entity class includes: The ButtonNode entity class inherits from the Konva.Group class, with the name BUTTON and a private attribute named targetUrl. The ImageNode entity class inherits from the Konva.Image class, with name set to IMAGE; its business attribute is the imagesrc attribute; the business-related method is the asynchronous resource loading method, which includes the following steps: loading images asynchronously to prevent the main thread from being blocked when the user sets the media resource link of the ImageNode or directly uploads an image; and providing the user with a prompt whether the image loading is successful or not. The VideoNode class inherits from the Konva.Image class and has the name VIDEO. Its business attributes include the videosrc attribute. The most business-related method is the asynchronous resource loading method, which includes the following steps: generating a video element when a user uploads a video resource; setting a video resource link for the video element and starting asynchronous loading, providing a prompt to the user regardless of success or failure; and converting the video element into a Konva.Image class and drawing it on the canvas. The CarouselNode entity class inherits from the Konva.Group class and is named CAROUSEL. Its business attributes include duration, gap, and carouselPadding. The business-related methods are the methods for implementing the carousel business logic. The HotSpotNode entity class inherits from the ButtonNode class and is named HOTSPOT. The BackgroundNode class inherits from the Konva.Image class and has the name BACKGROUND. The TextNode entity class inherits from the Konva.Text class and has the name TEXT. The CanvasEngine class has no parent class. This class is mainly used to drive the Canvas layer and is responsible for the global data interaction and processing of the layer. The implementation method of the carousel image business logic of the CarouselNode entity class includes the following steps: e1: Upload images. Add images to the carousel by uploading images. Subsequent uploaded images will be pasted after the previous carousel image. e2: Delete carousel images. After deleting one carousel image, the position of each carousel image is recalculated to avoid blank spaces in the middle. e3: Set the spacing between the carousel images. You can set the gap between each carousel image through the editing panel on the right. e4: Set the duration of the carousel images. Use the editing panel on the right to set the time for each carousel image to play. e5: Set the inner margin of the carousel. The inner margin of the carousel can be set through the editing panel on the right. In step a1, the specific information and the corresponding metadata set include: The ImageNode's ID and media resource path imageSrc are placed into the metadata collection images array as key-value pairs; Add the VideoNode's id and media resource path (videosrc) to the metadata collection (videos array); Add the ButtonNode's id and the redirect path targetUrl to the metadata collection links array; Add the id of the CarouselNode to the metadata collection carousels array; In step b1, the calculation method for the adaptation size of the design drawing on mobile devices is as follows: b11: Read the baseline information data of the design drawing from the received JSON data; b12: Reads the current size of the mobile device; b13: Calculate the width scaling ratio (scaleX) and height scaling ratio (scaleY) based on the size ratio of the current actual equipment and the original design drawing; b14: ​​Read the coordinate information (x, y) of the element in the design drawing; based on scaleX and scaleY, find the position (x', y') corresponding to the coordinate information (x, y) in the mobile display screen; b16: Reads the width and height of the element, and calculates the width' and height' of the element in the mobile display based on the scaling ratios scaleX and scaleY; In step b2, the virtual DOM is generated using Vue's rendering function Hyperscript.

[0010] This application provides a design method for mobile-adapted HTML5 pages based on Konva. It encapsulates some entity classes on top of Konva, giving them business-related methods for direct assignment or modification during initialization or other business processes. During serialization, it extends Konva's original serialization method, constructing a metadata collection for each element node. Specified business-related attribute data is stored in the metadata collection, and the original size and position information of the design drawing and image elements within it are recorded. During deserialization, dynamic calculations ensure accurate display of the image size and position in the design drawing on mobile devices of different sizes. This method abandons the original Konva deserialization method's method of generating a Canvas from JSON data, and instead reconstructs a mobile-adaptive deserialization method. This mobile-adaptive deserialization method describes each element node in the design drawing using virtual DOM nodes and generates a real DOM structure that is mounted on the HTML container on the mobile device, ensuring that web pages designed based on Konva can be displayed correctly and accurately on mobile devices. This mobile adaptation uses a deserialization method, which generates a DOM structure from JSON data to render the webpage. This can effectively improve the rendering effect of HTML webpages by leveraging existing DOM-related technologies. Attached Figure Description

[0011] Figure 1 This is a flowchart illustrating a design method for adapting mobile H5 pages based on Konva. Detailed Implementation

[0012] like Figure 1 As shown, this application includes a design method for adapting mobile H5 pages based on Konva, which includes the following steps.

[0013] While Konva provides basic geometric shape classes, such as `Rect` and `Image`, for quickly drawing corresponding geometric shapes or loading media resources on the Canvas, and Konva's graphics serialization API (toJSON) can serialize the Canvas and all its elements into JSON, the simplicity of Konva's native geometric shape classes does not fully meet users' business needs for easily using complex components and building H5 pages. Furthermore, the native serialization API loses some information during serialization, such as the image resource path for `Image` classes and the listener events bound to elements. Therefore, this approach constructs a complete, business-oriented, highly reusable component encapsulation framework.

[0014] S1: Based on business requirements, encapsulate and generate entity classes for mobile adaptation on the basis of Konva; Generate a unique UUID and a different code name for each mobile adaptation entity class to distinguish different classes; define its own business-specific attributes in the mobile adaptation entity class, which can be directly assigned or modified during initialization or other business processes; The operations implemented during generation in each mobile adaptation entity class include: Implement the methods of the abstract class interface; Inheriting from the Konva.Shape or Konva.Group class allows you to have the public and private properties and methods of the parent class. Among them, the Konva.Shape class is the parent class of most geometric shape classes in Konva, and the Konva.Group class manages the class formed by combining multiple geometric shapes in Konva. The `extends` class defines its own business-specific attributes or business-related methods; business-related methods are those that modify or generate business-specific attributes.

[0015] To address the issue of information loss during serialization in existing technologies like Konva, and to ensure complete recording of element information during serialization, this method defines corresponding business attributes for different entity classes to meet various business requirements. It also defines strongly business-related methods to fulfill these requirements, which modify or generate business-specific attributes during operation. For example, to implement image navigation, an asynchronous resource loading method is designed for the ImageNode class. This method allows users to set the media resource link for the ImageNode, and the corresponding business-specific attribute for the media resource link is the `imagesrc` attribute. The specific business-related attributes and strongly business-related methods are selected based on actual business needs.

[0016] This method supports more complex page designs by defining business-specific attributes and business-related methods for entity classes, and also ensures that these complex designs can accurately pass parameters during serialization and deserialization.

[0017] In this embodiment, attributes such as the `imagesrc` property of `ImageNode`, the `videosrc` property of `VideoNode`, the `targetUrl` property of `ButtonNode`, the `duration` property of `CarouselNode`, the `gap` property of `Carousel`, and the `carouselPadding` property of `Carousel` are stored in the corresponding metadata collection after being initialized in the entity class or assigned values ​​during user editing. These attributes are then successfully passed through the serialization and deserialization processes via the metadata collection.

[0018] In this embodiment, the encapsulated mobile adaptation entity class is shown below.

[0019] (1) ButtonNode entity class, which inherits from Konva.Group class, with name BUTTON; private attribute is targetUrl.

[0020] Since a "button" is visually a "composite component" consisting of a "rectangle" and "text", ButtonNode, while inheriting from the Konva.Group class, also needs to contain and manage the Konva.Rect (rectangle class) and Konva.Text (text class). The parameters required for initializing the ButtonNode entity class are: 1. config, of type Konva.GroupConfig, used to receive settings for Konva.Group related properties; 2. rectConfig, of type Konva.RectConfig, used to receive settings for Konva.Rect related properties; 3. textConfig, of type Konva.TextConfig, used to receive settings for Konva.Text related properties; 4. targetUrl, of type string, the jump link triggered when the button is clicked.

[0021] (2) The ImageNode entity class inherits from the Konva.Image class, with name set to IMAGE; its business attribute is the imagesrc attribute; the business-related method is the asynchronous resource loading method, which includes the following steps: loading images asynchronously to prevent the main thread from being blocked when the user sets the media resource link of the ImageNode or uploads an image directly; and providing the user with a prompt if the image loading is successful or unsuccessful. The business attribute modified by the ImageNode asynchronous resource loading method is the image's media resource attribute imagesrc.

[0022] The parameters required for initializing the ImageNode entity class are: 1. config, of type Konva.ImageConfig, used to set the relevant property values ​​of Konva.Image; 2. imageUrl, of type string, used to set the image source address.

[0023] (3) The VideoNode class inherits from the Konva.Image class, with the name VIDEO; its business attributes include the videosrc attribute and the targetUrl attribute of ButtonNode; the business-related method is the asynchronous resource loading method, which includes the following steps: generating a video element when the user uploads video resources; setting a video resource link for the video element and starting asynchronous loading, providing a prompt to the user regardless of whether the loading is successful or not; converting the video element into a Konva.Image class and drawing it on the canvas. The business attribute modified by the VideoNode asynchronous resource loading method is the video media resource attribute videosrc. The click action will modify the target address targetUrl attribute.

[0024] The parameters required for initializing the VideoNode class are: 1. config, of type Konva.ImageConfig, used to set the values ​​of Konva.Image related properties; 2. videoSrc, of type string, the video address resource link.

[0025] The `VideoNode` class needs to implement the following methods: `initializeVideoSource`, which initializes the video element and asynchronously loads video resources; `startAnimation`, which plays the video animation on the canvas; `pause`, which pauses video playback; and `play`, which plays the video. (4) The CarouselNode entity class inherits from the Konva.Group class and its name is CAROUSEL; its business attributes include duration, gap, and carouselPadding attributes; its business-related methods are the carousel business logic implementation methods.

[0026] The CarouselNode entity class consists of the Konva.Rect class and several Konva.Image classes; the initialization parameters are: 1. config, of type Konva.GroupConfig, used to set the relevant property values ​​of Konva.GroupConfig; 2. animationDuration, of type number, used to set the animation duration of the carousel images; 3. carouselPadding, of type number, used to set the inner margin of the carousel images.

[0027] The implemented methods include: the `recoverImageNode` method, used to recalculate the position of the `Konva.Image` element and move it to the corresponding position; the `addImage` method, used to insert a new image into the carousel component; the `removeImage` method, used to delete an image from the carousel component; the `resizeImage` method, used to recalculate the size of all carousel images after the carousel component changes size; the `setImageTargetUrl` method, used to set jump links for carousel images; the `setPadding` method, used to set the inner margin of the carousel component; the `playAnimation` method, the general method for playing the carousel animation; the `cancelAnimation` method, used to stop playing the carousel animation and return all elements to their original positions; the `nextSlide` method, used to switch to the next carousel image; the `cropImage` method, used to crop a new image according to the size of the carousel component when adding a new image; and the `setDuration` method, used to set the duration of the carousel animation.

[0028] (5) HotSpotNode entity class, which inherits from ButtonNode class, with name HOTSPOT. The difference between HotSpotNode and ButtonNode is that HotSpotNode entity class will make the background colorless and transparent during deserialization, and will not render the text, only retaining a clickable area that can be triggered; (6) The BackgroundNode class, which inherits from the Konva.Image class, has the name BACKGROUND. Parameters required for initialization: 1.config, of type Konva.ImageConfig, used to set the property values ​​of Konva.Image; The difference between BackgroundNode and ImageNode is that BackgroundNode, as a "background image component", cannot be scaled; (7) TextNode entity class, which inherits from Konva.Text class, with name TEXT. Parameters required for initialization: 1.config, of type Konva.TextConfig, used to set the property values ​​of Konva.Text; static variable MAX_FONT_SIZE: the maximum allowed font size, static variable MIN_FONT_SIZE: the minimum allowed font size; (8) The CanvasEngine class has no parent class. This class is mainly used to drive the Canvas layer and is responsible for the global data interaction and processing of the layer.

[0029] Initialization required parameters: 1. id, string type, unique identifier; 2. container, HTMLDivElement type, the HTML node used to mount the canvas; 3. config, Konva.StageConfig type, used to set canvas properties; 4. showGuideLines, boolean type, defaults to true, controls the on / off state of guide lines.

[0030] The methods to be implemented include: `clearGidelines`, which clears all guide lines on the canvas and is triggered when the user stops dragging elements on the canvas; `drawGuideline`, which draws guide lines and displays them when the user drags elements on the canvas; `enableGuidelines`, which activates the canvas's guide line functionality; `disableGuidelines`, which disables the canvas's guide lines functionality; `addNode`, which adds simple element nodes to the canvas; `getNodeById`, which finds an element on the canvas by its ID; `getNodeByName`, which finds a set of matching element nodes on the canvas based on the element's name attribute; `getNodeByType`, which finds a set of matching element nodes on the canvas based on the element's type; `updateNodeById`, which finds an element node on the canvas by its ID and updates the node's properties; and `serializ`. The `eStage` method serializes the canvas and all its elements; the `destroy` method destroys the canvas and all its elements, releasing memory; the `clear` method clears all elements on the canvas; the `cacheLayer` method caches and locks the canvas; the `cancelCacheLayer` method unlocks the canvas and removes the cache; the `addImage` method adds an image node (`ImageNode`) to the canvas; the `setBackground` method sets the canvas background image; the `addComponentNode` method adds more complex nodes (such as `ButtonNode`, `CarouselNode`) to the canvas; and the `removeChildNode` method deletes a specific node from the canvas.

[0031] The common methods of the above entity classes include: 1) The moveUp method. Raises the layer level of a specific element on the canvas by one level; 2) The moveDown method. This method lowers the layer level of a specific element on the canvas by one level. 3) The moveToTop method. This method moves a specific element's layer to the top level on the canvas. 4) The `moveToBottom` method. This method moves a specific element's layer to the lowest level on the canvas. 5) The `onTransform` method. Used to synchronize the size and attribute changes of an element on the canvas during scaling to the global context; 6) The destroy method. Destroys a given element on the canvas and all its internal element nodes, clears its cache, and removes all corresponding events; 7) The `enableTransformer` method. This displays a tooltip around an element on the canvas, indicating that it can be moved and zoomed. 8) The `disableTransformer` method. Clears the zoom tooltip for a specific element on the canvas; 9) The addTransformer method. Adds a zoom tooltip to an element on the canvas if it does not already exist.

[0032] The specific implementation details of each entity class and its methods can be implemented using existing programming methods based on the business logic requirements.

[0033] As an example, the business-related method in the ImageNode entity class is the asynchronous resource loading method. Specifically, it loads images asynchronously to prevent the main thread from blocking when the user sets the media resource link for the ImageNode or directly uploads an image; it also provides the user with a notification if the image loading is successful or unsuccessful. The business attribute modified by the ImageNode asynchronous resource loading method is the image's media resource attribute, imagesrc.

[0034] As an example, the business-relevant method in the VideoNode class is the asynchronous resource loading method. Specifically, it includes: generating a video element when a user uploads video resources; setting a video resource link for the video element and starting asynchronous loading, providing a prompt to the user regardless of success or failure; and converting the video element to a Konva.Image class and drawing it on the canvas. The business attribute modified by the VideoNode asynchronous resource loading method is the video media resource attribute videosrc. A click action will display the target URL targetUrl attribute on the screen.

[0035] As an example, the specific content of the carousel image business logic of the CarouselNode entity class includes: e1: Upload images. Add images to the carousel by uploading images. Subsequent uploaded images will be pasted after the previous carousel image. e2: Delete carousel images. After deleting one carousel image, the position of each carousel image is recalculated to avoid blank spaces in the middle. e3: Set the distance between the carousel images. Use the editing panel on the right to set the gap between each carousel image; e4: Set the duration of the carousel images. You can set the time for each carousel image to play through the editing panel on the right. For example, if you set it to 3 seconds, each carousel image will remain on the page for 3 seconds before switching. e5: Set the inner margin of the carousel. You can set the inner margin of the carousel through the editing panel on the right. If you set it to 20 pixels, the size of each carousel image will be recalculated, leaving a 20-pixel gap inside the carousel.

[0036] Konva's native serialization API (toJSON) cannot preserve key business attributes of elements (such as interactive event bindings, media resource paths, etc.) during serialization, nor can it record the original design drawing size information, making it impossible to calculate scaling ratios for subsequent cross-device layouts. Therefore, this invention redesigns the serialization mechanism, extending it based on Konva's native API (toJSON).

[0037] S2: Construct a serialization method for mobile adaptation, which includes the following steps: a1: Build a metadata set for each element node; Before serialization, all element nodes in the design diagram are retrieved according to their corresponding code name, and the business-specific attributes in the element nodes are extracted. These business-specific attributes are then placed into a dedicated metadata set to ensure that the media content and interaction logic can be accurately restored during deserialization.

[0038] In this embodiment, the specific information and the corresponding metadata set include: The imageNode's id and imageSrc are placed into the metadata collection images array as key-value pairs; Add the VideoNode's id and videosrc to the metadata collection videos array; Add the ButtonNode's id and targetUrl to the metadata collection links array; Add the id of the CarouselNode to the metadata collection carousels array.

[0039] a2: Record the baseline information data of the design drawings; The benchmark information data includes: The original height and width dimensions of the design drawing; The coordinates (x, y) of the elements in the design drawing, as well as the height and width of each element.

[0040] The elements in the design include various web page elements such as text, images, and videos; During the serialization stage, the aspect ratio information of the original design drawing is recorded. During the deserialization stage, the scaling ratio and layout coordinates are dynamically calculated based on the baseline data and the actual size of the terminal device, so that a single design can be adapted to multiple mobile devices of different sizes. This not only reduces the design workload, but also effectively avoids element misalignment or proportional imbalance.

[0041] a3: Use the native serialization API to combine metadata sets with baseline information data and design. Figure 1 It generates JSON data.

[0042] Specifically, the native serialization API (toJSON) is called and the original size and coordinate information of the elements in the design drawing (JSON) are recorded. All of the above information will generate new JSON data (i.e., images, videos, links, the original size of the design drawing originalSize, and the data obtained from toJSON form a new JSON object) and be submitted to the server.

[0043] S3: Construct a deserialization method for mobile adaptation, which includes the following steps.

[0044] b1: Based on the baseline information data of the design drawing, calculate the adaptation size of the design drawing on mobile devices, denoted as: mobile display size.

[0045] Recording the size ratio of the design drawing during the serialization stage facilitates subsequent element size calculations based on the actual device dimensions during deserialization. In step b1, the calculation method for the mobile device-adapted size of the design drawing is as follows: b11: Read the baseline information data of the design drawing from the received JSON data; b12: Reads the current size of the mobile device; b13: Calculate the width and height scaling ratios scaleX and scaleY based on the current actual equipment and the size ratio of the original design drawing; scaleX = Current device screen width / Original design width; scaleY = Current device screen height / Original design height; b14: ​​Read the coordinate information (x, y) of the element in the design drawing; based on scaleX and scaleY, find the position (x', y') corresponding to the coordinate information (x, y) in the mobile display screen; b16: Reads the width and height of the element, and calculates the width' and height' of the element in the mobile display based on the scaling ratios scaleX and scaleY; b2: Convert each element node into a virtual DOM node, and generate corresponding HTML nodes for each virtual DOM node; specifically, this method uses Vue's rendering function Hyperscript to generate the virtual DOM.

[0046] For example, Background transforms into ButtonNode is transformed <button>< / button> .

[0047] b3: During the generation process, the corresponding metadata is assigned to the virtual DOM node by retrieving the metadata set of the element node, thus retaining data that is strongly related to the business.

[0048] During the generation process, the metadata set corresponding to each element node is retrieved, and the corresponding metadata is assigned to the virtual DOM node. For example, the imageSrc attribute of ButtonNode will be transformed into... The src attribute, such as that generated for ButtonNode. <button>< / button> Add a click event to the element so that it can be clicked to jump to the corresponding address.

[0049] b4: Based on the calculated mobile display size, determine the absolute positioning coordinates of each virtual DOM node in the page, and finally generate the real DOM structure, which is mounted on the HTML container of the mobile device; b5: After performing steps b1~b4 for each image element, the final result is the generated HTML5 page.

[0050] To address the issue of lag during complex Canvas rendering on mobile devices, this invention abandons traditional Canvas rendering strategies and proposes a lightweight rendering solution based on a virtual DOM and dynamic style calculation. Specifically, step S3 also includes optimization methods for the rendering design, as detailed below.

[0051] Analyzing the structure of the design-state layers during serialization reveals that, before serialization, the design drawing is essentially composed of complex rendering units with multiple layers superimposed in a Canvas. Each layer corresponds to an independent component (such as a video player or text), and collaborative rendering is achieved through Kovna's layer management mechanism. Furthermore, to achieve lossless conversion of design information, this solution designs hierarchical layer metadata conversion rules.

[0052] c1: Extract the corresponding geometric information and style attributes from the basic layer attributes in Kovna's layer management mechanism; The geometric information includes: length, width, coordinate values, rotation angle, and scaling ratio; the style attributes include: background color, text color, and font category. Complex components, in addition to the basic layer attributes mentioned above, have corresponding extended descriptions to enable dynamic interaction, and additionally capture their media resource addresses, animation playback control parameters, and interactive event binding relationships. During serialization, different business-specific attributes need to be stored for different types of components.

[0053] c2: When serializing video elements, the business-specific attributes obtained include parameters for implementing dynamic interaction, which are saved as a metadata collection. The parameters for enabling dynamic interaction include: media resource path and autoplay.

[0054] c3: When dealing with carousel component sequences, the business-specific attributes obtained include animation time-related parameters, which are saved as a metadata collection. The animation time-related parameters include: carousel content, carousel image playback animation duration, and carousel image inner margins.

[0055] In this embodiment, during the animation effect design process, Konva.Tween from Konva is used to implement translation, scaling, and fading animations, and its dynamic attributes such as duration are transformed to ensure the consistency of animation logic between the design state and the rendering state. The relevant attributes can be obtained based on existing technologies.

[0056] Kovna's traditional deserialization approach, which directly renders the design descriptor recorded in the serialized JSON data as a Canvas, faces performance bottlenecks in mobile WebView's Canvas drawing (such as high GPU usage), easily leading to page rendering stutters. Therefore, this method proposes a Canvas-DOM conversion strategy to achieve high-performance rendering through the following approach.

[0057] The optimization methods for the deserialization process in the rendering design are as follows.

[0058] d1: Convert the design properties defined for different types of components in the JSON into corresponding CSS rules, such as converting fill to background-color; among them, design properties include: geometric information and style properties.

[0059] d2: When deserializing video components, while generating video tags, the parameters for dynamic interaction stored in the metadata collection associated with the media resource preloading controller should also be preloaded before playback.

[0060] d3: When deserializing the carousel component, use the animation time-related parameters stored in the existing carousel component's associated metadata collection in the HTML to play the video.

[0061] In this method, deserialization abandons the use of a Canvas and instead constructs an HTML page using the DOM structure. Therefore, when playing video data, after the DOM structure of the video elements generated by steps b1-b5 is mounted on the HTML container on the mobile device, various optimization methods for video playback in existing HTML technologies can be utilized. In this embodiment, a media resource preloading controller is used to achieve preloading before playback, which can effectively improve the video playback effect.

[0062] For carousel playback, any existing component that can be applied to an HTML container can be used, employing animation timing parameters saved during serialization to achieve the carousel effect. In this embodiment, a component from a VUE3 UI component library (such as VANT) is used to implement the carousel component, resulting in a smooth carousel effect.

[0063] By employing serialization and deserialization methods for rendering, the final deserialized output is a rendering unit composed of HTML / CSS logic, rather than a simple reproduction of the original Canvas. This approach achieves complex rendering based on HTML, leveraging existing HTML performance optimization techniques such as preloading video files within video tags for playback. This method effectively avoids the performance bottleneck of complex Canvas rendering on mobile devices, fully utilizing DOM layered rendering, GPU acceleration, and finer-grained event response optimization, resulting in significantly improved rendering performance for mobile H5.

[0064] The Virtual DOM is a lightweight JavaScript object used to describe the actual structure of a webpage. It's a tree-like structure based on JavaScript objects, using object properties to describe nodes. It includes at least three properties: tag name, attributes, and child elements. Compared to the real DOM, the Virtual DOM incurs significantly less overhead when manipulating APIs. This is because the Virtual DOM is essentially a tree-like object; manipulation of its properties modifies the object's values ​​without directly triggering the browser's rendering process, greatly reducing the browser's workload. For example, manipulating the DOM n times might trigger n browser repaints / reflows, but with the Virtual DOM, it can be manipulated n times until the final result is obtained before being converted into the real DOM for a single rendering.

[0065] This method uses the `h` function (Hyperscript) of Vue 3 as the underlying core tool for creating the virtual DOM. The `h` function is very powerful; it can generate virtual DOMs not only for native HTML elements but also for Vue components, passing parameters (props) and registering related events just like using common Vue components. In this invention, the `h` function can be used to transform VantUI's Swipe and SwipeItem components into virtual DOMs. For example, to generate the virtual DOM for the Foo component: import Foo from ". / Foo.vue h(Foo,{ someProp: 'hello', 'onUpdate:()=>{} ).

[0066] After generating the virtual DOM using the `h` function, it needs to be mounted onto the real DOM to render in the browser. This requires using another Vue 3 API: `render`. This API is used to programmatically create the component's virtual DOM tree, acting as a "bridge" connecting component logic and the final view. Assuming the virtual DOM is mounted within an `HTMLContainer`, the method is as follows: render(virtualDOM,HTMLContainer.value).

[0067] This method constructs a mobile-adaptive deserialization method that can effectively deserialize the JSON generated by the serialization algorithm into a real DOM structure on different devices while preserving media resource paths and corresponding interactive events. It can also effectively solve the performance bottleneck problem on mobile devices, ensuring a smoother user experience.

[0068] S4: When designing a mobile webpage, use the existing entity classes from the Konva library on the PC side, along with mobile-adaptive entity classes, to implement the design. After the design is complete, serialize the designed mobile webpage using the mobile-adaptive serialization method to obtain JSON format data, which is then uploaded to the server. The mobile device retrieves the JSON format data from the server and deserializes the JSON format data using the mobile-adaptive deserialization method to display the mobile webpage.

[0069] This method will use Konva's existing APIs, including: toJSON (stage.toJSON()); setAttrs and getAttrs (APIs of Konva.Shape and Konva.Group classes and their subclasses); setAttr and getAttr (APIs of Konva.Shape and Konva.Group classes and their subclasses); and fromURL (static method of the Konva.Image class).

[0070] Example 1 uses the configuration of a button element node (ButtonNode) and its jump link as an example to illustrate the implementation process of this method.

[0071] The operations platform staff configures corresponding redirect links for each brand. The links must contain the following parameters: pageType=page type &storePageId=corresponding page ID &seriesName=car series name &seriesId=car series ID &applyKey=used to verify whether the link is within the validity period &brandId=car series brand ID &adminToken=token used to verify user identity.

[0072] 1) When the user clicks the "Button Component (ButtonNode)", ButtonNode inherits from the Konva.Group class. In addition to inheriting the methods and properties of the Konva.Group class, it also extends the private property targetUrl. If the user has not configured a jump link, targetUrl is an empty string. 2) When configuring the targetUrl of a ButtonNode, the user will call the setAttr method inherited by Konva.Group from ButtonNode to assign a value to the targetUrl of the ButtonNode (such as setAttr('targetUrl','https: / / www.example.com')). At this time, the targetUrl is injected into the ButtonNode as business data. 3) During serialization, iterate through all element nodes in the design diagram, extract the element with the name BUTTON, and store the ButtonNode's id and business attribute value targetUrl in the links array as key-value pairs; 4) Record the current design drawing size data, and call Konva's native toJSON method to serialize the design drawing information into JSON. This JSON retains the size and coordinate information of all elements in the design drawing; 5) Package the above information into a new JSON file and upload it to the server; 6) Mobile devices retrieve packaged JSON data via an API; 7) The mobile device executes a deserialization algorithm to parse the JSON data and calculate the scaling ratios scaleX and scaleY. Using scaleX and scaleY, the size and coordinates of the element nodes on the design drawing are calculated on the mobile device. 8) Convert the element nodes on the design draft into corresponding HTML nodes (e.g., convert ButtonNode to HTML node). <button>< / button> If the ButtonNode is found to have a targetUrl attribute value, a click-to-jump event is added to it; 9) The generated HTML nodes are transformed into a virtual DOM using Vue's rendering function (h) and mounted on the mobile HTML container.

[0073] In Example 2, the following example of configuring a carousel element node and its playback business logic illustrates the implementation process of this method.

[0074] 1) When a user clicks on the "Carousel Component (CarouselNode)," the CarouselNode is initially blank. 2) Users upload carousel images and can configure attributes such as the inner margin of the carousel images, the spacing between the images, and the animation playback time. When configuring these attributes, the setAttr method is called to assign the corresponding values ​​to the carouselPadding, gap, and duration attributes respectively. 3) During serialization, traverse all element nodes in the design diagram, extract the element node with name CAROUSEL, and store the id of CarouselNode into the carousels array; 4) Record the current design drawing size data, and call Konva's native toJSON method to serialize the design drawing information into JSON. This JSON retains the size and coordinate information of all elements in the design drawing; 5) Upload the JSON data to the server; 6) Mobile devices retrieve JSON data via an API; 7) The mobile device executes a deserialization algorithm to parse the JSON data and calculate the scaling ratios scaleX and scaleY. Using scaleX and scaleY, the size and coordinates of the element nodes on the design drawing are calculated on the mobile device. 8) Unlike the conversion methods for common elements such as ButtonNode, CarouselNode is not directly converted into a native HTML element. In this invention, because the carousel component used on mobile devices is VantUI, CarouselNode is converted into two components: Swipe and SwipeItem. During the conversion process, the carouselPadding, gap, and duration attribute values ​​of CarouselNode are passed as props to the Swipe and SwipeItem components to set the width, gap, and playback duration of the carousel images.

[0075] 9) The generated components are transformed into a virtual DOM using Vue's rendering function (h) and mounted on the mobile HTML container.

[0076] By using the technical solution of this invention, when displaying on mobile devices, the deserialization algorithm in this method, combined with an intelligent scaling algorithm that dynamically calculates the viewport size of the target device, enables high-fidelity, adaptive rendering of design drawings on diverse mobile terminals. This solution effectively solves the problem of cross-device screen size adaptation, significantly improves H5 page development efficiency and visual consistency, and is suitable for mainstream smartphone devices in the current market.

Claims

1. A design method for adapting mobile H5 pages based on Konva, characterized in that, It includes the following steps: S1: Based on business requirements, encapsulate and generate entity classes for mobile adaptation on the basis of Konva; For each mobile terminal adaptation entity class, a unique UUID and a different code name are generated to distinguish different classes; business-specific attributes are defined in the entity class for direct assignment or modification during initialization or other business processes. The operations implemented during generation in each mobile adaptation entity class include: Implement the methods of the abstract class interface; Inheriting from the Konva.Shape or Konva.Group class allows you to have the public and private properties and methods of the parent class; Extend the definition of its own business-specific attributes and business-strongly related methods; the business-strongly related methods are methods for modifying or generating the business-specific attributes; S2: Construct a serialization method for mobile adaptation, which includes the following steps: a1: Build a metadata set for each element node; Before serialization, all element nodes in the design diagram are retrieved according to their corresponding code name, and the business-specific attributes in the element nodes are extracted and placed into a special metadata set. a2: Record the baseline information data of the design drawing; The benchmark information data includes: The original height and width dimensions of the design drawing; The coordinates (x, y) of each element in the design drawing, as well as the height and width of each element; a3: Use the native serialization API to generate JSON data together with the metadata set, the baseline information data, and the design drawing; S3: Construct a deserialization method for mobile adaptation, which includes the following steps: b1: Based on the baseline information data of the design drawing, calculate the adaptation size of the design drawing on mobile devices, denoted as: mobile display size; b2: Convert each element node into a virtual DOM node, and generate an HTML node corresponding to the virtual DOM; b3: During the generation process, the corresponding metadata is assigned to the virtual DOM node by retrieving the metadata set of the element node, thus preserving data that is strongly related to the business. b4: Based on the calculated mobile display size, determine the absolute positioning coordinates of each virtual DOM node in the page, and finally generate the real DOM structure, which is mounted on the HTML container of the mobile device; b5: After performing steps b1~b4 for each image element, the final result is the generated HTML5 page; S4: When designing a mobile webpage, use the existing entity classes in the Konva library on the PC side, along with the mobile adaptation entity classes, to implement the design. After the design is completed, serialize the designed mobile webpage using the mobile adaptation serialization method to obtain JSON format data, which is then uploaded to the server. The mobile device retrieves the JSON format data of the mobile webpage from the server and deserializes the JSON format data using the mobile adaptation deserialization method to display the mobile webpage.

2. The design method for adapting mobile H5 pages based on Konva according to claim 1, characterized in that: The serialization method also includes optimization methods for rendering design, comprising the following: c1: Extract the corresponding geometric information and style attributes from the basic layer attributes in Kovna's layer management mechanism; c2: When serializing video elements, the obtained business-specific attributes include parameters for implementing dynamic interaction, which are saved in the form of the metadata set; The parameters for enabling dynamic interaction include: media resource path and autoplay; c3: When dealing with carousel component sequences, the obtained business-specific attributes include animation time-related parameters, which are saved in the form of the metadata set; The animation time-related parameters include: carousel content, carousel image playback animation duration, and carousel image inner margins.

3. The design method for mobile H5 pages based on Konva according to claim 2, characterized in that: The deserialization method, specifically the rendering optimization method, includes the following: d1: Convert the design properties defined for different types of components in the JSON into corresponding CSS rules; The design attributes include: geometric information and style attributes; d2: When deserializing video components, while generating video tags, the parameters for dynamic interaction stored in the metadata set should be preloaded and played after being associated with the media resource preloading controller; d3: When deserializing the carousel component, use the existing carousel component in HTML to associate the animation time-related parameters stored in the metadata collection for playback.

4. The design method for adapting mobile H5 pages based on Konva according to claim 1, characterized in that: In step S1, the encapsulated mobile adaptation entity class includes: The ButtonNode entity class inherits from the Konva.Group class, with the name BUTTON and a private attribute named targetUrl. The ImageNode entity class inherits from the Konva.Image class, with name set to IMAGE; its business attribute is the imagesrc attribute; the business-related method is the asynchronous resource loading method, which includes the following steps: loading images asynchronously to prevent the main thread from being blocked when the user sets the media resource link of the ImageNode or directly uploads an image; and providing the user with a prompt whether the image loading is successful or not. The VideoNode class inherits from the Konva.Image class and has the name VIDEO. Its business attributes include the videosrc attribute. The most business-related method is the asynchronous resource loading method, which includes the following steps: generating a video element when a user uploads a video resource; setting a video resource link for the video element and starting asynchronous loading, providing a prompt to the user regardless of success or failure; and converting the video element into a Konva.Image class and drawing it on the canvas. The CarouselNode entity class inherits from the Konva.Group class and is named CAROUSEL. Its business attributes include duration, gap, and carouselPadding. The business-related methods are the methods for implementing the carousel business logic. The HotSpotNode entity class inherits from the ButtonNode class and is named HOTSPOT. The BackgroundNode class inherits from the Konva.Image class and has the name BACKGROUND. The TextNode entity class inherits from the Konva.Text class and has the name TEXT. The CanvasEngine class has no parent class. This class is mainly used to drive the Canvas layer and is responsible for global data interaction and processing of the layer.

5. The design method for adapting mobile H5 pages based on Konva according to claim 4, characterized in that: The implementation method of the carousel image business logic of the CarouselNode entity class includes the following steps: e1: Upload images. Add images to the carousel by uploading images. Subsequent uploaded images will be pasted after the previous carousel image. e2: Delete carousel images. After deleting one carousel image, the position of each carousel image is recalculated to avoid blank spaces in the middle. e3: Set the spacing between the carousel images. You can set the gap between each carousel image through the editing panel on the right. e4: Set the duration of the carousel images. Use the editing panel on the right to set the time for each carousel image to play. e5: Set the inner margin of the carousel. The inner margin of the carousel can be set through the editing panel on the right.

6. The design method for adapting mobile H5 pages based on Konva according to claim 4, characterized in that: In step a1, the specific information and the corresponding metadata set include: The ImageNode's ID and media resource path imageSrc are placed into the metadata collection images array as key-value pairs; Add the VideoNode's id and media resource path (videosrc) to the metadata collection (videos array); Add the ButtonNode's id and the redirect path targetUrl to the metadata collection links array; Add the id of the CarouselNode to the metadata collection carousels array.

7. The design method for adapting mobile H5 pages based on Konva according to claim 1, characterized in that: In step b1, the calculation method for the adaptation size of the design drawing on mobile devices is as follows: b11: Read the baseline information data of the design drawing from the received JSON data; b12: Reads the current size of the mobile device; b13: Calculate the width scaling ratio (scaleX) and height scaling ratio (scaleY) based on the size ratio of the current actual equipment and the original design drawing; b14: ​​Read the coordinate information (x, y) of the element in the design drawing; based on scaleX and scaleY, find the position (x', y') corresponding to the coordinate information (x, y) in the mobile display screen; b16: Reads the element's width and height, and calculates the element's width and height on the mobile display screen based on the scaling ratios scaleX and scaleY.

8. The design method for adapting mobile H5 pages based on Konva according to claim 1, characterized in that: In step b2, the virtual DOM is generated using Vue's rendering function Hyperscript.

Images