Corrugated animation rendering method and device based on map data vertexes

Abstract

The invention provides a ripple animation rendering method and device based on atlas data vertexes, and the method comprises the steps: creating an auxiliary thread, and creating an off-screen canvas in the auxiliary thread; preprocessing the off-screen canvas according to a target map, and enabling the off-screen canvas to correspond to the target map; performing multi-frame aperture rendering synthesis calculation in a preset area on the off-screen canvas to obtain ripple aperture rendering data of a corresponding frame number; and when the off-screen canvas completes the aperture rendering synthesis calculation of the preset frame number, sending the ripple aperture rendering data of the preset frame number to the main canvas for corresponding aperture rendering, thereby realizing the ripple aperture rendering of the preset area on the target map. By independently creating the auxiliary thread, rendering calculation and actual rendering are not executed through the same thread any more, so that the overall rendering performance is improved, and the method can cope with a scene with a relatively large data size.

Description

Technical Field

[0001] The present invention relates to the field of signal processing technology, and in particular to a method and device for rendering ripple animation based on graph data vertices. Background Art

[0002] In the display of knowledge graphs, highlighting vertices is a common requirement. Traditional methods, such as changing vertex colors, have the following defects: when the vertex color is the same as the highlight color, the highlight effect is not obvious and it is difficult to attract attention. Furthermore, in existing image rendering methods, most of them use a single-threaded main canvas to calculate rendering data and perform actual rendering. In this method, when the amount of data to be processed is large, performance bottlenecks will inevitably occur, resulting in low actual processing efficiency.

[0003] In view of this, overcoming the defects of the prior art is an urgent problem to be solved in the field of this technology. Summary of the invention

[0004] The technical problem to be solved by the present invention is how to render the corrugated aperture with higher rendering efficiency.

[0005] The present invention adopts the following technical solution: In a first aspect, a ripple animation rendering method based on graph data vertices is provided, comprising: Creating an auxiliary thread, and creating an off-screen canvas in the auxiliary thread; Preprocessing the off-screen canvas according to a target graph, and making the off-screen canvas correspond to the target graph; wherein the target graph has at least one vertex to be rendered; Determining a preset area corresponding to each of the vertices to be rendered on the off-screen canvas, performing aperture rendering synthesis calculation of multiple frames around each of the preset areas, and obtaining ripple aperture rendering data of a corresponding number of frames; Whenever the off-screen canvas completes aperture rendering synthesis calculation for a preset number of frames, the preset number of frames of ripple aperture rendering data are sent to the main canvas to perform aperture rendering on the vertices to be rendered.

[0006] Preferably, the creating an off-screen canvas in the auxiliary thread specifically includes: The width and height of the off-screen canvas are consistent with the width and height of the target map, and the CSS width and height of the off-screen canvas are consistent with the CSS width and height of the target map.

[0007] Preferably, the preprocessing of the off-screen canvas according to the target atlas to correspond the off-screen canvas to the target atlas specifically includes: Setting a first synthesis mode and a second synthesis mode, and adjusting the opacity of the off-screen canvas; The view matrix of the off-screen canvas is adjusted to be consistent with the view matrix of the target atlas.

[0008] Preferably, adjusting the view matrix of the off-screen canvas to be consistent with the view matrix of the target atlas specifically includes: The scaling ratio, X-axis offset and Y-axis offset of the off-screen canvas are adjusted according to the view matrix data of the target atlas. The calculation formula is as follows: x=-this.camera.x * this.camera.zoom * this.pixelRatio; y=-this.camera.y * this.camera.zoom * this.pixelRatio; scale=this.camera.zoom * this.pixelRatio; Among them, x is the X-axis offset of the off-screen canvas, this.camera.x is the X-axis offset of the target map, this.camera.zoom is the zoom ratio of the target map, this.pixelRatio is the device pixel ratio, y is the Y-axis offset of the off-screen canvas, this.camera.y is the Y-axis offset of the target map, and scale is the zoom ratio of the off-screen canvas.

[0009] Preferably, performing aperture rendering synthesis calculation of multiple frames around each of the preset areas to obtain ripple aperture rendering data of a corresponding number of frames specifically includes: Set the minimum aperture radius, maximum aperture radius and preset difference; Starting from the minimum aperture radius, aperture rendering of a corresponding aperture radius is performed in each frame with a preset area on the off-screen canvas as the center of the circle. In each frame of aperture rendering: the synthesis mode is switched to a first synthesis mode, and an aperture image of the corresponding aperture radius is superimposed and synthesized on an upper layer of an aperture image of a previous frame according to the first synthesis mode; the synthesis mode is switched to a second synthesis mode, and a mask layer of a preset transparency is superimposed on the superimposed and synthesized image according to the second synthesis mode; Starting from the minimum aperture radius, the aperture radius corresponding to each frame of aperture rendering is larger than the aperture radius corresponding to the previous frame of aperture rendering by a preset difference value, until the aperture radius corresponding to the aperture rendering is greater than or equal to the maximum aperture radius.

[0010] Preferably, the step of superimposing and synthesizing the aperture image of the corresponding aperture radius on an upper layer of the previous aperture image frame according to the first synthesis mode specifically includes: The aperture image of the current frame is superimposed on the aperture image of the previous frame to obtain a superimposed composite image; The center of the aperture image of the current frame and the center of the aperture image of the previous frame are both the centers of the preset area, and the aperture radius of the aperture image of the current frame is greater than the aperture radius of the previous frame by a preset difference.

[0011] Preferably, superimposing a mask layer of preset transparency on the superimposed synthesized image according to the second synthesis mode specifically includes: superimposing a mask layer of preset transparency on the superimposed synthesized image; The parts where all aperture images on the superimposed synthesized image overlap with the mask layer are retained, and the parts where all aperture images on the superimposed synthesized image do not overlap with the mask layer are removed.

[0012] Preferably, the performing of aperture rendering synthesis calculation of multiple frames around each of the preset areas to obtain ripple aperture rendering data of a corresponding number of frames further includes: When the aperture radius corresponding to the aperture rendering is greater than or equal to the maximum aperture radius, the aperture radius corresponding to the aperture rendering of the current frame is adjusted to the minimum aperture radius, and the aperture rendering of the next frame is performed again according to the preset difference starting from the minimum aperture radius.

[0013] In a second aspect, a ripple animation rendering device based on graph data vertices is provided, comprising at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor to execute the ripple animation rendering method based on graph data vertices.

[0014] In a third aspect, the present invention further provides a non-volatile computer storage medium, wherein the computer storage medium stores computer executable instructions, and the computer executable instructions are executed by one or more processors to complete the method described in the first aspect.

[0015] In a fourth aspect, a chip is provided, comprising: a processor and an interface, for calling and running a computer program stored in the memory from a memory to execute the method of the first aspect.

[0016] In a fifth aspect, a computer program product comprising instructions is provided, which, when executed on a computer or a processor, causes the computer or the processor to execute the method of the first aspect.

[0017] In a sixth aspect, a ripple animation rendering system based on graph data vertices is provided, comprising a ripple animation rendering device based on graph data vertices as in the second aspect, and using a ripple animation rendering method based on graph data vertices as in the first aspect.

[0018] The present invention provides a method and device for rendering ripple animation based on graph data vertices, which includes creating an auxiliary thread, creating an off-screen canvas in the auxiliary thread; preprocessing the off-screen canvas according to a target graph, and making the off-screen canvas correspond to the target graph; performing aperture rendering synthesis calculations for multiple frames in a preset area on the off-screen canvas to obtain ripple aperture rendering data of a corresponding number of frames; and whenever the off-screen canvas completes the aperture rendering synthesis calculations for a preset number of frames, sending the ripple aperture rendering data of the preset number of frames to the main canvas for corresponding aperture rendering, thereby achieving ripple aperture rendering for a preset area on the target graph. By creating an auxiliary thread separately, rendering calculations and actual rendering are no longer performed by the same thread, thereby improving the overall rendering performance and enabling it to cope with scenes with relatively larger data volumes. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the embodiments of the present invention. Obviously, the drawings described below are only some embodiments of the present invention, and for ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0020] Figure 1 It is a method flow chart of a ripple animation rendering method based on graph data vertices provided by an embodiment of the present invention; Figure 2 It is a flow chart of a method for preprocessing an off-screen canvas in a ripple animation rendering method based on graph data vertices provided by an embodiment of the present invention; Figure 3 It is a flow chart of a method for performing rendering calculation in a ripple animation rendering method based on graph data vertices provided by an embodiment of the present invention; Figure 4 This is a rendering effect diagram of the actual rendering of the ripple aperture in a ripple animation rendering method based on graph data vertices provided by an embodiment of the present invention; Figure 5 It is a method flow chart of another method for rendering ripple animation based on graph data vertices provided by an embodiment of the present invention; Figure 6 It is a schematic diagram of a ripple animation rendering device based on graph data vertices provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0021] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0022] In the description of the present invention, it is necessary to understand that the terms "center", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside", etc., indicating orientations or positional relationships, are based on the orientations or positional relationships shown in the accompanying drawings, and are only for the convenience of describing the present disclosure and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore should not be understood as a limitation on the present disclosure.

[0023] In the description of the present invention, the terms "first" and "second" are used only for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Thus, the features defined as "first" and "second" may explicitly or implicitly include one or more of the features. In the description of the embodiments of the present disclosure, unless otherwise specified, the meaning of "multiple" is two or more. In addition, for example, the same type of nouns may be described as two independent individuals by adding "A" and "B" at the end. In this case, the corresponding features defined as "A" and "B" are only used to distinguish the same type of individuals for description purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features.

[0024] As used herein, "about," "substantially," or "approximately" includes the stated value and an average value that is within an acceptable range of deviation from the particular value as determined by one of ordinary skill in the art taking into account the measurements in question and the errors associated with the measurement of the particular quantity (i.e., the limitations of the measurement system).

[0025] Unless the context requires otherwise, throughout the specification and claims, the term "including" is to be interpreted as open inclusion, that is, "including, but not limited to". In the description of the specification, the terms "one embodiment", "some embodiments", "exemplary embodiments", "examples", "specific examples" or "some examples" and the like are intended to indicate that specific features, structures, materials or characteristics associated with the embodiment or example are included in at least one embodiment or example of the present disclosure. The schematic representation of the above terms does not necessarily refer to the same embodiment or example. In addition, the specific features, structures, materials or characteristics may be included in any one or more embodiments or examples in any appropriate manner, that is, although they may be carried in the embodiments or examples of the above terms due to reasons such as the order and position of appearance, it is not limited to that they can be carried in combination by one embodiment or example.

[0026] In addition, the technical features involved in the various embodiments of the present invention described below can be combined with each other as long as they do not conflict with each other.

[0027] Embodiment 1: Embodiment 1 of the present invention provides a ripple animation rendering method based on graph data vertices, such as Figure 1 As shown, the method flow includes: In step 101, an auxiliary thread is created, and an off-screen canvas is created in the auxiliary thread.

[0028] In this embodiment, the auxiliary thread can be a Web Worker thread, the off-screen canvas is used to perform image rendering calculations, and after completing the rendering calculations of the corresponding image on the off-screen canvas, the corresponding rendering data is obtained, and then the corresponding rendering data is rendered on the main canvas, and the main canvas is used to render the actual image according to the rendering data, wherein the main canvas is in the main thread, and the main thread is used to render the actual image according to the rendering data. By creating an auxiliary thread separately, the rendering calculation and the actual rendering are no longer executed by the same thread, thereby improving the overall rendering performance, so that it can cope with scenes with relatively larger data volumes.

[0029] In step 102, the off-screen canvas is preprocessed according to the target atlas, and the off-screen canvas is made to correspond to the target atlas; wherein the target atlas has at least one vertex to be rendered.

[0030] In this embodiment, the target map is an object to be rendered, wherein the target map has at least one vertex to be rendered. In the target map, a corrugated aperture needs to be rendered at the location of the vertex to highlight the vertex, and the corrugated aperture can also be effectively distinguished from the vertex to avoid confusion between the corrugated aperture and the vertex.

[0031] Since the present embodiment uses an off-screen canvas to render the corrugated aperture that needs to be rendered on the target map, it is necessary to first clear the data on the off-screen canvas and make the off-screen canvas correspond to the target map. The correspondence is: according to the X-axis offset, Y-axis offset and overall scaling of the target map, the X-axis offset, Y-axis offset and overall scaling of the off-screen canvas are adjusted respectively, so that the off-screen canvas as a whole can match the target map, thereby ensuring that the rendering calculation performed on the off-screen canvas can be rendered to the correct position on the target map with the correct size after the actual rendering.

[0032] In step 103, preset areas corresponding to the vertices to be rendered are determined on the off-screen canvas, and aperture rendering synthesis calculations of multiple frames are performed around the preset areas to obtain ripple aperture rendering data of a corresponding number of frames.

[0033] After the off-screen canvas and the target map are matched, the preset area corresponding to each vertex to be rendered can be determined on the off-screen canvas. The preset area is the position that the user needs to highlight on the target map, which can be set by a person skilled in the art according to the needs. In this embodiment, in order to distinguish between the mark and the vertex, the aperture rendering calculation is generally performed around the vertex to mark it with a corrugated aperture. Since the corrugated aperture has a gradient effect, in actual rendering, the corrugated aperture can be obtained by superimposing and synthesizing multiple frames of concentric apertures with different transparency.

[0034] In this embodiment, multiple apertures are rendered starting from the innermost circle of a preset area, and the aperture radius gradually increases. In the process of gradually increasing the aperture radius, the color depth of the aperture gradually changes from light to dark. All apertures are rendered and superimposed and synthesized. After obtaining corresponding rendering data, the rendering data is sent to the main thread corresponding to the main canvas. The main thread renders the image according to the rendering data to superimpose corresponding ripple apertures at the vertices.

[0035] It should be noted that before receiving the rendering data, the main thread also needs to clear the rendering on the main canvas and make the main canvas correspond to the target map. The correspondence is: according to the X-axis offset, Y-axis offset and overall zoom size of the target map, adjust the X-axis offset, Y-axis offset and overall zoom size of the main canvas respectively, so that the main canvas as a whole can match the target map, thereby ensuring that the image obtained by rendering on the main canvas can be rendered to the correct position on the target map with the correct size.

[0036] In step 104, whenever the off-screen canvas completes aperture rendering synthesis calculation for a preset number of frames, the ripple aperture rendering data for the preset number of frames is sent to the main canvas to perform aperture rendering on the vertices to be rendered.

[0037] In this embodiment, the preset frame number needs to be determined based on the performance of the main thread corresponding to the main canvas, that is, the number of frames that the main canvas can render at one time in an actual application scenario. The number of frames is used to determine how many frames of aperture rendering synthesis calculations the off-screen canvas completes, and the rendering data of the corresponding number of frames is sent to the main canvas for aperture rendering. Therefore, the preset frame number is set by a technician in this field according to actual conditions.

[0038] Furthermore, in this embodiment, in order to ensure that the rendering calculation performed on the off-screen canvas can match the target map, it is necessary to ensure that the size of the off-screen canvas is consistent with the size of the target map. Therefore, this embodiment also involves the following design: the off-screen canvas is created in the auxiliary thread, specifically including: the width and height of the off-screen canvas are consistent with the width and height of the target map, and the CSS width and height of the off-screen canvas are consistent with the CSS width and height of the target map.

[0039] In this embodiment, an off-screen canvas is created in the auxiliary thread, and the corresponding code is: (canvas = newOffscreenCanvas(width, height)), the width and height of the off-screen canvas and the width and height of the main canvas are set to be consistent with the width and height of the target atlas, the style width and height of the off-screen canvas and the style width and height of the main canvas are set to be consistent with the style width and height of the target atlas, and the width and height attributes are set according to the device pixel ratio to ensure that a clear image is rendered on different devices. In this embodiment, the width and height of the off-screen canvas = the CSS width and height of the main canvas * the device pixel ratio, and the CSS width and height of the off-screen canvas = the CSS width and height of the main canvas.

[0040] Furthermore, in this embodiment, before performing aperture rendering calculations through the off-screen canvas, it is necessary to correspond the off-screen canvas to the target atlas, so as to ensure that the image obtained by the rendering calculation performed on the off-screen canvas can be rendered to the correct position on the target atlas with the correct size after the actual rendering. Therefore, this embodiment also involves the following designs: The off-screen canvas is preprocessed according to the target map, and the off-screen canvas is made to correspond to the target map, such as Figure 2 As shown, the corresponding method flow includes: In step 201, a first synthesis mode and a second synthesis mode are set to adjust the opacity of the off-screen canvas.

[0041] In this embodiment, the "synthesis" in the synthesis mode of the off-screen canvas represents the superposition operation of the two layers of rendered images, and there are different rules for this superposition operation, which are the synthesis modes. The synthesis modes in this embodiment include a first synthesis mode and a second synthesis mode, which are used to switch when actually performing rendering calculations, so as to superimpose and synthesize images of different levels in different ways. The first synthesis mode is used to superimpose a new frame of aperture image on the previous frame of aperture image, and the second synthesis mode is used to superimpose a mask layer of preset transparency on the superimposed image.

[0042] In this embodiment, the opacity can be represented by a value between 0 and 1, where 1 is completely opaque and 0 is completely transparent. In this embodiment, the opacity set corresponding to each frame of image can be 0.95. It should be noted that the opacity of each frame of aperture image can be achieved through a mask, that is, a mask of corresponding opacity is added to the corresponding frame of aperture image, and the mask is synthesized with the image on the off-screen canvas to create a new image, so that the image on the off-screen canvas has corresponding opacity.

[0043] It should be noted that, since in the present embodiment, each frame image is synthesized in an overlay manner, after the aperture image of the latest frame is overlaid on the aperture image of the previous frame, a mask will be added, and the mask added during this rendering process will also cover the aperture image of the previous frame, making the opacity of the aperture image of the previous frame lower, so that the color of the aperture image of the previous frame is lighter than the color of the aperture image of the latest frame.

[0044] In step 202, the view matrix of the off-screen canvas is adjusted to be consistent with the view matrix of the target atlas.

[0045] In this embodiment, the view matrix of the off-screen canvas is setTransform, and the view matrix of the target atlas is camera. Correspondingly, the scaling ratio, X-axis offset, and Y-axis offset of the off-screen canvas need to be adjusted according to the view matrix data of the target atlas. The calculation formula is as follows: x=-this.camera.x * this.camera.zoom * this.pixelRatio; y=-this.camera.y * this.camera.zoom * this.pixelRatio; scale=this.camera.zoom * this.pixelRatio; Among them, x is the X-axis offset of the off-screen canvas, this.camera.x is the X-axis offset of the target map, this.camera.zoom is the zoom ratio of the target map, this.pixelRatio is the device pixel ratio, y is the Y-axis offset of the off-screen canvas, this.camera.y is the Y-axis offset of the target map, and scale is the zoom ratio of the off-screen canvas.

[0046] In this embodiment, the off-screen canvas and the target map are made to correspond by adjusting the view matrix of the off-screen canvas. When calculating the aperture image on the off-screen canvas, it is necessary to first find the corresponding position of the vertex to be rendered on the target map on the off-screen canvas, so as to ensure the accuracy of the position of the subsequent aperture image. In this embodiment, the coordinates of the vertex to be rendered on the target map can be obtained first, and then the coordinates of the vertex to be rendered can be converted to the coordinate system of the off-screen canvas, so as to obtain the preset area.

[0047] Furthermore, in this embodiment, once the off-screen canvas is created and set, aperture rendering synthesis calculation can be performed through the off-screen canvas to achieve a ripple aperture effect, thereby improving vertex recognition.

[0048] like Figure 3 As shown, the method flow of aperture rendering synthesis calculation includes: In step 301, a minimum aperture radius, a maximum aperture radius and a preset difference are set.

[0049] In this embodiment, the minimum aperture radius and the maximum aperture radius are set by technical personnel in this field according to needs. The preset difference is the difference between the aperture radii in two adjacent frames of aperture images. The size of the preset difference is determined according to the set diffusion speed. The calculation method of the preset difference is (size += speed * 0.1).

[0050] In step 302, starting from the minimum aperture radius, aperture rendering of corresponding aperture radius is performed in each frame with a preset area on the off-screen canvas as the center of the circle, and in each frame of aperture rendering: the synthesis mode is switched to the first synthesis mode, and the aperture image of corresponding aperture radius is superimposed and synthesized on the upper layer of the aperture image of the previous frame according to the first synthesis mode; the synthesis mode is switched to the second synthesis mode, and a mask layer of preset transparency is superimposed on the superimposed and synthesized image according to the second synthesis mode; starting from the minimum aperture radius, the aperture radius corresponding to each frame of aperture rendering is larger than the aperture radius corresponding to the aperture rendering of the previous frame by a preset difference, until the aperture radius corresponding to the aperture rendering is greater than or equal to the maximum aperture radius.

[0051] In this embodiment, when the off-screen canvas starts aperture rendering, the aperture radius corresponding to the first frame of aperture rendering is the minimum aperture radius, and the aperture radius corresponding to each subsequent frame of aperture rendering increases by a preset difference based on the previous frame until the aperture radius is greater than or equal to the maximum aperture radius. It should be noted that each frame of aperture rendering includes: rendering a layer of aperture image and rendering a layer of mask layer.

[0052] In the above steps, the first synthesis mode is used for rendering the aperture image in each frame of aperture rendering, specifically: superimposing the aperture image of the current frame on the upper layer of the aperture image of the previous frame to obtain a superimposed synthesized image; wherein the center of the aperture image of the current frame and the center of the aperture image of the previous frame are both the center of the preset area, and the aperture radius of the aperture image of the current frame is larger than the aperture radius of the previous frame by a preset difference.

[0053] It should be noted that since the aperture radius of the aperture image of the current frame is larger than the aperture radius of the aperture image of the previous frame, and the center positions of all aperture images are the same, the aperture image of the current frame will not overlap with the aperture image of the previous frame. Therefore, in this embodiment, when synthesizing in the first synthesis mode, the aperture image of the current frame can be superimposed on the specified position on the previous frame.

[0054] In the above steps, the second synthesis mode is used for rendering the mask in each frame of aperture rendering, specifically: superimposing a mask with a preset transparency on the superimposed synthesized image; retaining the overlapping parts of all aperture images on the superimposed synthesized image with the mask, and removing the non-overlapping parts of all aperture images on the superimposed synthesized image with the mask.

[0055] It should be noted that the width and height of the mask are consistent with those of the off-screen canvas. When the mask is superimposed on the superimposed synthesized image, it will cover the entire off-screen canvas. However, since the superimposed synthesized image includes the aperture images rendered in all previous frames, the only overlapping part of the mask and the superimposed synthesized image is the area where the aperture images rendered in all previous frames are located. The mask is retained in this area, and the masks in other areas of the off-screen canvas are completely removed, so that all parts where the aperture images are located will be affected by the opacity effect of the mask, while other parts will not be affected by the mask. Figure 4 The following is the actual rendering effect.

[0056] To show the above rendering process more clearly, take the following example: Starting from the minimum aperture radius, the first frame aperture rendering process is: the first frame aperture image is rendered to the center position of the preset area according to the first synthesis mode to obtain a superimposed synthesized image, and then switched to the second synthesis mode, and the mask is superimposed on the superimposed synthesized image. The mask of the area where the first frame aperture image is located is retained, and the mask of other areas on the off-screen canvas is removed. At this time, the first frame aperture rendering is completed.

[0057] The second frame aperture rendering process is as follows: the aperture radius of the second frame aperture image is the aperture radius of the first frame aperture image plus a preset difference, the second frame aperture image is rendered to the upper layer of the first frame aperture rendering according to the first synthesis mode, and is located at the center of the preset area to obtain a superimposed synthesized image, and then switch to the second synthesis mode, superimpose the mask on the superimposed synthesized image, retain the second frame aperture image and the mask of the area where the first frame aperture image is located, and remove the mask of other areas on the off-screen canvas, and the second frame aperture rendering is completed at this time; it is worth mentioning that since two layers of mask are rendered above the first frame aperture image at this time, and only one layer of mask is rendered above the second frame aperture image, the color of the first frame aperture image is lighter than that of the second frame aperture image.

[0058] The aperture rendering process of the third frame is as follows: the aperture radius of the third frame aperture image is the aperture radius of the second frame aperture image plus a preset difference, the third frame aperture image is rendered to the upper layer of the second frame aperture rendering according to the first synthesis mode, and is located at the center of the preset area to obtain a superimposed synthesized image, and then switch to the second synthesis mode, superimpose the mask on the superimposed synthesized image, retain the mask layers of the third frame aperture image, the second frame aperture image and the area where the first frame aperture image is located, and remove the mask layers of other areas on the off-screen canvas, and the third aperture rendering is completed at this time; it is worth mentioning that, since three layers of mask layers are rendered above the first frame aperture image, two layers of mask layers are rendered above the second frame aperture image, and only one layer of mask layer is rendered above the third frame aperture image, the color of the first frame aperture image is the lightest, the color of the second frame aperture image is the second, and the color of the third frame aperture image is the darkest.

[0059] By following the above method and performing multiple frames of aperture rendering, you can get ripple aperture rendering with gradient colors.

[0060] It should be noted that when the aperture radius corresponding to the aperture rendering is greater than or equal to the maximum aperture radius, the aperture radius corresponding to the aperture rendering of the current frame is adjusted to the minimum aperture radius, and the aperture rendering of the next frame is performed again in sequence according to the preset difference starting from the minimum aperture radius, that is, the process of step 302 is repeated. Through the above repeated cyclic rendering, a repeated ripple animation effect is formed, and the highlight effect of the aperture at the vertex position is improved through the repeated ripple animation effect.

[0061] According to the above method flow, the corresponding implementable code is provided in this embodiment as follows: public renderRippleEffect() { if (!this.rippleNodes.size) return const ctx = this.canvasContexts['rippleEffect'] / / Main canvas ctx.resetTransform() / / Reset the main canvas view matrix if (!this.offsetCanvas) { / / Check if there is an offline canvas, if not, create a new one this.offsetCanvas = document.createElement('canvas') this.offsetCanvas.width = this.width *PIXEL_RATIO this.offsetCanvas.height = this.height *PIXEL_RATIO this.offsetCanvas.style.width = `${this.width}px`; this.offsetCanvas.style.height = `${this.height}px`; } const buffer = this.offsetCanvas.getContext('2d') asCanvasRenderingContext2D / / Offline canvas if (this.rippleEffectFrame) cancelAnimationFrame(this.rippleEffectFrame) / / Check if there is a ripple animation. If so, cancel the animation const x = -this.camera.x * this.camera.zoom * this.pixelRatio const y = -this.camera.y * this.camera.zoom * this.pixelRatio const scale = this.canvasInfo.scale * this.pixelRatio const renderCanvas = () => { buffer.globalCompositeOperation = 'destination-in'; / / Set the image synthesis mode to destination-in buffer.globalAlpha = this.rippleAlpha; / / Set the opacity to 0.95 by default, you can customize the configuration when using it buffer.resetTransform() / / Reset the offline canvas view matrix buffer.fillRect(0, 0, this.width * this.pixelRatio, this.height *this.pixelRatio) / / Rendering the entire canvas is equivalent to adding a mask buffer.setTransform(scale, 0, 0, scale, x, y) / / Set the offline canvas view matrix buffer.globalCompositeOperation = 'source-over'; / / Set the image synthesis mode to source-over buffer.lineWidth = 2; / / Set the line width of the circle this.rippleNodes.forEach(item =>{ / / Traverse all nodes that need to render ripples const node = this.data.getNodeById(item.id) as IDataNode if (!node || node.hidden) return buffer.strokeStyle = item.color === 'inherit' ? node.style.color :item.color; item.size += item.speed * 0.1 if (item.size>node.style.size + item.overSize) item.size =node.style.size - 5 buffer.beginPath(); buffer.arc(node.x, node.y, item.size, 0, Math.PI * 2); buffer.closePath(); buffer.stroke(); / / Draw a circle }) ctx.clearRect(0, 0, this.width * this.pixelRatio, this.height *this.pixelRatio) / / Clear the canvas like Figure 5 As shown, it is a method flow chart of the ripple animation rendering method based on graph data vertices provided in this embodiment.

[0062] In summary, this embodiment can achieve the following beneficial effects through the above method: Rendering performance is greatly improved. Conventional rendering methods use only one main canvas, which is responsible for both calculation and rendering tasks. When the amount of data is large, performance bottlenecks will inevitably occur. The method of the present invention uses a Web Worker thread and creates an off-screen canvas to calculate rendering data. The main thread obtains and uses the rendering data of the Web Worker thread and then directly draws, which separates calculation and rendering, thereby greatly improving rendering performance.

[0063] Embodiment 2: like Figure 6 , which is a schematic diagram of a device for rendering ripple animation based on graph data vertices according to an embodiment of the present invention. The device for rendering ripple animation based on graph data vertices according to this embodiment includes one or more processors 41 and a memory 42.

[0064] The processor 41 and the memory 42 may be connected via a bus or other means. Figure 6 The example of connecting through bus is taken in the following.

[0065] The memory 42 is a non-volatile computer-readable storage medium that can be used to store non-volatile software programs and non-volatile computer executable programs, such as the ripple animation rendering method based on the graph data vertices in the above embodiment. The processor 41 executes the ripple animation rendering method based on the graph data vertices by running the non-volatile software programs and instructions stored in the memory 42.

[0066] The memory 42 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some embodiments, the memory 42 may optionally include a memory remotely arranged relative to the processor 41, and these remote memories may be connected to the processor 41 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0067] The program instructions / modules are stored in the memory 42, and when executed by the one or more processors 41, the ripple animation rendering method based on the graph data vertex in the above embodiment is executed, for example, the above described Figure 1-Figure 3 The steps shown.

[0068] An embodiment of the present invention further provides a computer storage medium having computer program instructions stored thereon; when the computer program instructions are executed by a processor, the ripple animation rendering method based on graph data vertices provided by an embodiment of the present invention is implemented.

[0069] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A ripple animation rendering method based on graph data vertices, characterized in that: include: Creating an auxiliary thread, and creating an off-screen canvas in the auxiliary thread; Preprocessing the off-screen canvas according to a target graph, and making the off-screen canvas correspond to the target graph; wherein the target graph has at least one vertex to be rendered; Determining a preset area corresponding to each of the vertices to be rendered on the off-screen canvas, performing aperture rendering synthesis calculation of multiple frames around each of the preset areas, and obtaining ripple aperture rendering data of a corresponding number of frames; Whenever the off-screen canvas completes aperture rendering synthesis calculation for a preset number of frames, the ripple aperture rendering data for the preset number of frames is sent to the main canvas to perform aperture rendering on the vertices to be rendered.

2. The ripple animation rendering method based on graph data vertices according to claim 1 is characterized in that: The creating of the off-screen canvas in the auxiliary thread specifically includes: The width and height of the off-screen canvas are consistent with the width and height of the target map, and the CSS width and height of the off-screen canvas are consistent with the CSS width and height of the target map.

3. The ripple animation rendering method based on graph data vertices according to claim 1 is characterized in that: The preprocessing of the off-screen canvas according to the target atlas to correspond the off-screen canvas to the target atlas specifically includes: Setting a first synthesis mode and a second synthesis mode, and adjusting the opacity of the off-screen canvas; The view matrix of the off-screen canvas is adjusted to be consistent with the view matrix of the target atlas.

4. The ripple animation rendering method based on graph data vertices according to claim 3 is characterized in that: The adjusting the view matrix of the off-screen canvas to be consistent with the view matrix of the target atlas specifically includes: The scaling ratio, X-axis offset and Y-axis offset of the off-screen canvas are adjusted according to the view matrix data of the target atlas. The calculation formula is as follows: x=-this.camera.x * this.camera.zoom * this.pixelRatio; y=-this.camera.y * this.camera.zoom * this.pixelRatio; scale=this.camera.zoom * this.pixelRatio; Among them, x is the X-axis offset of the off-screen canvas, this.camera.x is the X-axis offset of the target map, this.camera.zoom is the zoom ratio of the target map, this.pixelRatio is the device pixel ratio, y is the Y-axis offset of the off-screen canvas, this.camera.y is the Y-axis offset of the target map, and scale is the zoom ratio of the off-screen canvas.

5. The ripple animation rendering method based on graph data vertices according to claim 3 is characterized in that: The step of performing aperture rendering synthesis calculation for multiple frames around each of the preset areas to obtain ripple aperture rendering data of a corresponding number of frames specifically includes: Set the minimum aperture radius, maximum aperture radius and preset difference; Starting from the minimum aperture radius, aperture rendering of a corresponding aperture radius is performed in each frame with a preset area on the off-screen canvas as the center of the circle. In each frame of aperture rendering: the synthesis mode is switched to a first synthesis mode, and an aperture image of the corresponding aperture radius is superimposed and synthesized on an upper layer of an aperture image of a previous frame according to the first synthesis mode; the synthesis mode is switched to a second synthesis mode, and a mask layer of a preset transparency is superimposed on the superimposed and synthesized image according to the second synthesis mode; Starting from the minimum aperture radius, the aperture radius corresponding to each frame of aperture rendering is larger than the aperture radius corresponding to the previous frame of aperture rendering by a preset difference value, until the aperture radius corresponding to the aperture rendering is greater than or equal to the maximum aperture radius.

6. The ripple animation rendering method based on graph data vertices according to claim 5 is characterized in that: The step of superimposing and synthesizing the aperture image of the corresponding aperture radius on the upper layer of the previous aperture image frame according to the first synthesis mode specifically includes: The aperture image of the current frame is superimposed on the aperture image of the previous frame to obtain a superimposed composite image; The center of the aperture image of the current frame and the center of the aperture image of the previous frame are both the centers of the preset area, and the aperture radius of the aperture image of the current frame is greater than the aperture radius of the previous frame by a preset difference.

7. The ripple animation rendering method based on graph data vertices according to claim 5 is characterized in that: The step of superimposing a mask layer with a preset transparency on the superimposed synthesized image according to the second synthesis mode specifically includes: superimposing a mask layer of preset transparency on the superimposed synthesized image; The parts where all aperture images on the superimposed synthesized image overlap with the mask layer are retained, and the parts where all aperture images on the superimposed synthesized image do not overlap with the mask layer are removed.

8. The ripple animation rendering method based on graph data vertices according to claim 5, characterized in that: The step of performing aperture rendering synthesis calculation for multiple frames around each of the preset areas to obtain ripple aperture rendering data of a corresponding number of frames further includes: When the aperture radius corresponding to the aperture rendering is greater than or equal to the maximum aperture radius, the aperture radius corresponding to the aperture rendering of the current frame is adjusted to the minimum aperture radius, and the aperture rendering of the next frame is performed again according to the preset difference starting from the minimum aperture radius.

9. A ripple animation rendering device based on graph data vertices, characterized in that: It includes at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor to execute the ripple animation rendering method based on graph data vertices as described in any one of claims 1-8.

10. A non-volatile computer storage medium, characterized in that: The computer storage medium stores computer program instructions, which, when executed by one or more processors, implement the ripple animation rendering method based on graph data vertices as described in any one of claims 1 to 8.

Images