CN117953120A - Rendering method and device for elements in canvas and electronic equipment - Google Patents
Rendering method and device for elements in canvas and electronic equipment Download PDFInfo
- Publication number
- CN117953120A CN117953120A CN202410102607.4A CN202410102607A CN117953120A CN 117953120 A CN117953120 A CN 117953120A CN 202410102607 A CN202410102607 A CN 202410102607A CN 117953120 A CN117953120 A CN 117953120A
- Authority
- CN
- China
- Prior art keywords
- layer
- window
- canvas
- layers
- elements
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 86
- 238000000034 method Methods 0.000 title claims abstract description 39
- 230000009466 transformation Effects 0.000 claims abstract description 123
- 239000011159 matrix material Substances 0.000 claims abstract description 67
- 238000006243 chemical reaction Methods 0.000 claims abstract description 11
- 230000015654 memory Effects 0.000 claims description 17
- 230000003993 interaction Effects 0.000 claims description 14
- 238000013461 design Methods 0.000 claims description 9
- 238000013519 translation Methods 0.000 claims description 8
- 230000001131 transforming effect Effects 0.000 claims description 7
- 230000002452 interceptive effect Effects 0.000 claims description 5
- 238000004590 computer program Methods 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 12
- 239000008186 active pharmaceutical agent Substances 0.000 description 7
- 238000012545 processing Methods 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 241000256836 Apis Species 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000000059 patterning Methods 0.000 description 2
- 239000007787 solid Substances 0.000 description 2
- 230000000694 effects Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Landscapes
- Image Generation (AREA)
Abstract
The disclosure provides a rendering method and device for elements in canvas and electronic equipment, wherein the method comprises the following steps: designing a canvas layer architecture of a WebGL rasterization rendering engine, and describing a multi-level layer in the canvas layer architecture by adopting a tree structure; under a multi-level layer of a canvas layer framework, controlling each element in the canvas to exclusive one layer frame so that the element draws a vertex in the layer frame exclusive to the element, wherein each layer frame is determined by an origin and a base vector, and the layer where the element is positioned is an element layer; and carrying out cascade transformation on the layers in the canvas layer framework to obtain a window projection transformation matrix, carrying out linear transformation on the layer frame based on the window projection transformation matrix, and projecting the elements in the element layers to the correct positions of the windows so as to render the elements in the correct positions of the windows. The hierarchical relationship among the layers is expressed by using the tree structure, so that the layers can be conveniently expanded; the elements are projected in a cascading conversion mode, so that the rendering efficiency can be improved.
Description
Technical Field
The disclosure relates to the technical field of graphic rendering, in particular to a rendering method and device of elements in canvas and electronic equipment.
Background
Currently, web applications are typically rendered by DOM rendering engines that utilize a computer CPU to calculate, which is inferior in terms of computational performance to GPU-based WebGL rasterization rendering engines.
Most Web applications which adopt a WebGL rasterization rendering engine for rendering have relatively simple rendering architecture, and the native APIs of the WebGL rasterization rendering engine are directly used for rendering; however, this manner of rendering is disadvantageous for the extension of the layers.
Aiming at the problem that the Web application in the related technology directly uses the native API of the Web GL rasterization rendering engine to render and is unfavorable for the expansion of the layer, no effective technical solution is proposed at present.
Disclosure of Invention
The main purpose of the present disclosure is to provide a rendering method, apparatus and electronic device for elements in canvas, so as to solve the problem that in the related art, a Web application directly uses the native API of WebGL rasterization rendering engine to render, which is not beneficial to layer expansion.
To achieve the above object, a first aspect of the present disclosure provides a rendering method of an element in a canvas, including:
Designing a canvas layer architecture of a WebGL rasterization rendering engine, and describing a multi-level layer in the canvas layer architecture by adopting a tree structure, wherein the multi-level layer comprises a root layer, a page layer and an element layer from high to low according to the hierarchy;
Under a multi-level layer of the picture layer framework, controlling each element in canvas to exclusive one layer frame so that the element draws a vertex in the layer frame exclusive to the element, wherein each layer frame is determined by an origin and a base vector, and the layer where the element is located is the element layer;
Performing cascade transformation on layers in the canvas layer framework to obtain a window projection transformation matrix; and
And carrying out linear transformation on the layer frame based on the window projection transformation matrix, and projecting the elements in the element layer to the correct position of the window so as to render the elements to the correct position of the window.
Optionally, the multi-level layers in the canvas layer architecture further include a background layer, an interactive layer and a drawing board layer, the levels of the background layer, the page layer and the interactive layer are the same, and the drawing board layer and the element layer are nested in multiple ways;
When rendering, controlling the WebGL rasterization rendering engine to perform preamble traversal from the root layer, and sequentially rendering the root layer, the background layer, the page layer and the interactive layer, wherein the later rendered layer covers the layer which is rendered first;
And when rendering, the drawing board layer and the element layer both belong to the page layer.
Optionally, the root layer is a parent layer of the page layer, and the root layer and the page layer are ancestor layers of the element layer;
the multi-level layers in the canvas layer framework further comprise drawing board layers, and the drawing board layers and the element layers are nested in a plurality of modes;
The cascade transformation is carried out on the layers in the canvas layer framework to obtain a window projection transformation matrix, and the cascade transformation comprises the following steps:
and multiplying the element layer in the canvas layer framework and all ancestor layers of the element layer in a cascading manner to obtain a window projection transformation matrix of the element layer.
Further, the step of performing hierarchical multiplication on the element layer and all ancestor layers of the element layer in the canvas layer architecture to obtain a window projective transformation matrix of the element layer includes:
Let the root layer transformation matrix be T 0, the element layer transformation matrix be T n, the parent layer transformation matrix of the element layer be T n-1, the window projection transformation matrix T of the element layer is determined according to the following formula:
where i represents the i-th layer, i=0 represents the root layer, i=n represents the element layer, and T i represents the i-th layer transform matrix.
Optionally, the linearly transforming the layer frame based on the window projective transformation matrix, projecting the elements in the element layer to the correct positions of the window, including:
the element α in the element layer is transformed into the element β in the window according to the following formula:
β＝Tα
wherein T is a window projective transformation matrix, the window projective transformation matrix contains transformation information, and the transformation information comprises translation transformation information, rotation transformation information and scaling transformation information.
Optionally, after projecting the elements in the element layer to the correct position of the window, the method further comprises:
determining a bounding box of the element by using a bounding box algorithm based on the element vertices projected to the window;
Judging whether the element is outside the window according to the relative positions of the bounding box and the window, and eliminating the element outside the window during rendering.
Further, the bounding box of the element is an circumscribed minimum rectangle of the element;
judging whether the element is outside the window according to the relative positions of the bounding box and the window comprises the following steps:
judging whether the rectangle occupied by the bounding box and the rectangle occupied by the window intersect or not;
If so, the element is within the window;
If not, the element is outside the window.
A second aspect of the present disclosure provides a rendering apparatus for elements in a canvas, comprising:
The design unit is used for designing a canvas layer architecture of the WebGL rasterization rendering engine, describing a multi-level layer in the canvas layer architecture by adopting a tree structure, wherein the multi-level layer comprises a root layer, a page layer and an element layer from high to low according to the level;
The control unit is used for controlling each element in the canvas to exclusive one layer frame under the multi-level layers of the canvas layer frame so that the element draws a vertex in the layer frame exclusive to the element, wherein each layer frame is determined by an origin and a base vector, and the layer where the element is positioned is the element layer;
The cascade conversion unit is used for carrying out cascade conversion on the layers in the canvas layer framework to obtain a window projection conversion matrix; and
And the linear transformation unit is used for carrying out linear transformation on the layer frame based on the window projection transformation matrix, and projecting the elements in the element layer to the correct position of the window so as to render the elements to the correct position of the window.
A third aspect of the present disclosure provides a computer-readable storage medium storing computer instructions for causing a computer to perform the rendering method of an element in a canvas provided by any one of the first aspects.
A fourth aspect of the present disclosure provides an electronic device, comprising: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores a computer program executable by the at least one processor to cause the at least one processor to perform the rendering method of elements in the canvas provided in any one of the first aspects.
In the rendering method of elements in the canvas provided by the embodiment of the present disclosure, a canvas layer architecture of a WebGL rasterization rendering engine is designed, and a tree structure is adopted to describe multi-level layers in the canvas layer architecture, wherein the multi-level layers include a root layer, a page layer and an element layer from high to low according to the level; the hierarchical relation among the layers is expressed by using the tree structure, so that the layers can be conveniently expanded, and the problem that the Web application in the related technology directly uses the native API of the WebGL rasterization rendering engine to render and is not beneficial to the expansion of the layers is solved;
Under a multi-level layer of the picture layer framework, controlling each element in canvas to exclusive one layer frame so that the element draws a vertex in the layer frame exclusive to the element, wherein each layer frame is determined by an origin and a base vector, and the layer where the element is located is the element layer; each element in the canvas is exclusive to one layer of frame, and each layer can be independently drawn out of the window;
Performing cascade transformation on layers in the canvas layer framework to obtain a window projection transformation matrix; and carrying out linear transformation on the layer frame based on the window projection transformation matrix, and projecting the elements in the element layer to the correct position of the window so as to render the elements to the correct position of the window. After a window projection transformation matrix is obtained in a cascade transformation mode, elements are projected to a window in a linear transformation mode, so that the rendering efficiency of the WebGL rasterization rendering engine can be improved.
Drawings
In order to more clearly illustrate the embodiments of the present disclosure or the technical solutions in the related art, the drawings that are required to be used in the description of the embodiments or the related art will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present disclosure, and other drawings may be obtained according to the drawings without inventive effort to those of ordinary skill in the art.
FIG. 1 is a flow chart of a method for rendering elements in a canvas according to an embodiment of the present disclosure;
FIG. 2 is a schematic diagram of a patterning layer architecture provided by an embodiment of the present disclosure;
FIG. 3 is a schematic diagram of a multi-level layer in a patterning layer architecture according to an embodiment of the present disclosure;
FIG. 4 is a schematic diagram of drawing elements in a layer frame provided by an embodiment of the present disclosure;
FIG. 5 is a schematic diagram of linear transformation of a layer frame provided in an embodiment of the disclosure;
Fig. 6 is a schematic diagram of removing elements outside a window according to an embodiment of the disclosure;
FIG. 7 is a block diagram of a rendering device for elements in a canvas provided by an embodiment of the present disclosure;
Fig. 8 is a block diagram of an electronic device provided in an embodiment of the present disclosure.
Detailed Description
In order that those skilled in the art will better understand the present disclosure, a technical solution in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present disclosure, not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art without inventive effort, based on the embodiments in this disclosure, shall fall within the scope of the present disclosure.
It should be noted that the terms "first," "second," and the like in the description and claims of the present disclosure and in the foregoing figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate in order to describe the embodiments of the disclosure herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
It should be noted that, without conflict, the embodiments of the present disclosure and features of the embodiments may be combined with each other. The present disclosure will be described in detail below with reference to the accompanying drawings in conjunction with embodiments.
At present, most Web applications adopting a WebGL rasterization rendering engine for rendering have relatively simple rendering architecture, and the native APIs of the WebGL rasterization rendering engine are directly used for rendering; however, this manner of rendering is disadvantageous for the extension of the layers.
In order to solve the above problems, an embodiment of the present disclosure provides a rendering method of elements in a canvas, as shown in fig. 1, the method includes the following steps S11 to S14:
Step S11: designing a canvas layer architecture of a WebGL rasterization rendering engine, and describing a multi-level layer in the canvas layer architecture by adopting a tree structure, wherein the multi-level layer comprises a root layer, a page layer and an element layer from high to low according to the hierarchy; the picture layer architecture adopts a tree structure, a picture layer tree is integrally formed, in the design of the picture layer architecture, a page is used as an independent layer, namely a page layer, the page layer and the descendant layer of the page layer form a page layer tree, elements in the page are all mounted on the page layer tree, and the page layer tree is a subtree of the picture layer tree;
The hierarchical relation among the layers is expressed by using the tree structure, so that the layers can be conveniently expanded, and the problem that the Web application in the related technology directly uses the native API of the WebGL rasterization rendering engine to render and is not beneficial to the expansion of the layers is solved.
In an optional embodiment of the disclosure, the multi-level layer in the canvas layer architecture further includes a background layer, an interaction layer and a drawing board layer, the levels of the background layer, the page layer and the interaction layer are the same, and the drawing board layer and the element layer are nested in multiple ways; the interaction layer and the page layer are the same level and are used for rendering interaction states in canvas;
Specifically, the nesting mode of the drawing board layer and the element layer comprises the following steps: the element layers are nested in the drawing board layers, the drawing board layers are nested in the element layers, the second drawing board layers are nested in the first drawing board layers, and the second element layers are nested in the first element layers;
The schematic diagram of the drawing layer architecture provided by the embodiment of the disclosure is shown in fig. 2, wherein the layers in the canvas layer architecture include a root layer, a background layer, a page layer, an interaction layer, a drawing board layer and an element layer, the first drawing board layer (drawing board 1) and the second drawing board layer (drawing board 2) are both drawing board layers, and the first element layer (element 1), the second element layer (element 2), the third element layer (element 3), the fourth element layer (element 4), the fifth element layer (element 5), the sixth element layer (element 6) and the seventh element layer (element 7) are all element layers;
In fig. 2, a first element layer and a second element layer are nested in a first drawing board layer, and a third element layer and a fourth element layer are nested in a second drawing board layer; the sub-layers of the page layer comprise a first drawing board layer, a second drawing board layer, a fifth element layer, a sixth element layer and a seventh element layer, the sub-layers of the first drawing board layer comprise a first element layer and a second element layer, and the sub-layers of the second drawing board layer comprise a third element layer and a fourth element layer.
When rendering, controlling the WebGL rasterization rendering engine to perform preamble traversal from the root layer, and sequentially rendering the root layer, the background layer, the page layer and the interactive layer, wherein the later rendered layer covers the layer which is rendered first; when rendering, the WebGL rasterization rendering engine starts to perform preamble traversal from the root layer of the canvas;
And when rendering, the drawing board layer and the element layer both belong to the page layer.
The hierarchical schematic diagram of the multi-level layers in the graphic layer architecture is shown in fig. 3, wherein in the rendering process, the WebGL rasterization rendering engine starts to perform the preamble traversal from the root layer to sequentially render each layer, so that the later rendered layer covers the layer which is rendered first; in the canvas Layer tree, a Background Layer (Background Layer) is at the bottommost Layer, a page Layer (PAGE LAYER) is at the secondary Layer, an Element Layer belongs to the page Layer, the Element Layer is located in the page Layer, an interaction Layer is covered on the page Layer, in fig. 3, a first Element Layer (Element 1) and a second Element Layer (Element 2) are both Element layers, a first interaction Layer (UI Layer 1) and a second interaction Layer (UI Layer 2) are both interaction layers, the first interaction Layer is covered on the page Layer, and the second interaction Layer is covered on the first interaction Layer.
Step S12: under a multi-level layer of the picture layer framework, controlling each element in canvas to exclusive one layer frame so that the element draws a vertex in the layer frame exclusive to the element, wherein each layer frame is determined by an origin and a base vector, and the layer where the element is located is the element layer;
The origin and the base vector determine the layer frame, and the schematic diagram of drawing the element in the layer frame provided in the embodiment of the present disclosure is shown in fig. 4, where Shape Container is a Shape Container, and belongs to the element layer, the element layer frame corresponds to the layer coordinate system, the origin coordinate of the layer coordinate system corresponding to the element layer frame is (0, 0), the horizontal right is the positive x-axis direction, the vertical downward is the positive y-axis direction, and three vertices of the element obtained after drawing the element are (w/2, 0), (0, h) and (w, h) respectively.
Because each element in the canvas monopolizes one layer frame, namely each node on the page layer tree monopolizes one layer frame, each layer can be independently drawn by separating from a window, the layers are not interfered with each other, the element draws a vertex in the layer frame monopolized by itself, and the projection position of the window does not need to be concerned, so that the drawing of the element is simpler and more efficient.
Step S13: performing cascade transformation on layers in the canvas layer framework to obtain a window projection transformation matrix; performing cascade transformation on each layer in the canvas layer framework, and cascading each layer transformation matrix to obtain a window projection transformation matrix;
in an optional embodiment of the disclosure, the root layer is a parent layer of the page layer, and the root layer and the page layer are ancestor layers of the element layer; correspondingly, the page layer and the element layer are offspring layers of the root layer;
the multi-level layers in the canvas layer framework further comprise drawing board layers, and the drawing board layers and the element layers are nested in a plurality of modes;
Specifically, the nesting mode of the drawing board layer and the element layer comprises the following steps: the element layers are nested in the drawing board layers, the drawing board layers are nested in the element layers, the second drawing board layers are nested in the first drawing board layers, and the second element layers are nested in the first element layers;
When the element layers are nested in the drawing board layers, the page layer is a father layer of the drawing board layer, the drawing board layer is a father layer of the element layers, and the page layer and the drawing board layer are ancestor layers of the element layers; when a second element layer is nested in the first element layer, the page layer is a father layer of the first element layer, the first element layer is a father layer of the second element layer, and the page layer and the first element layer are ancestor layers of the second element layer.
The step S13 of performing cascade transformation on the layers in the canvas layer architecture to obtain a window projective transformation matrix includes:
and multiplying the element layer in the canvas layer framework and all ancestor layers of the element layer in a cascading manner to obtain a window projection transformation matrix of the element layer.
In a preferred embodiment of the present disclosure, after obtaining the window projective transformation matrix of the element layer, the method further comprises:
The window projective transformation matrix is applied to all elements in the canvas, transforming the page layer to scroll or scale the window.
The page layer in the picture layer framework is an independent layer, and elements in the canvas are loaded by using the independent page layer; the page layer and the descendant layer of the page layer form a page layer tree, the page layer is an ancestor layer of the element layer, all elements in the canvas are mounted in the page layer tree, a window projection transformation matrix is applied to all elements in the canvas, and the window in the canvas can be rolled or scaled by transforming the page layer without changing the design of the whole picture layer structure.
When scrolling or zooming a window, it is actually a transformed page layer, i.e. a scaling transformation and a translation transformation are applied on the root node of the page layer tree, by transforming the page layer a scrolling or scaling of the window can be achieved without changing the design of the overall picture layer architecture.
In a preferred embodiment of the present disclosure, the step of performing hierarchical multiplication on the element layer and all ancestor layers of the element layer in the canvas layer architecture to obtain a window projective transformation matrix of the element layer includes:
Let the root layer transformation matrix be T 0, the element layer transformation matrix be T n, the parent layer transformation matrix of the element layer be T n-1, the window projection transformation matrix T of the element layer is determined according to the following formula:
Where i represents the i-th layer, i=0 represents the root layer, i=n represents the element layer, and T i represents the i-th layer transform matrix. The manner of layer transformation includes translation transformation, rotation transformation, and scaling transformation, and thus, the i-th layer transformation matrix T i may be determined according to the translation transformation matrix, rotation transformation matrix, and scaling transformation matrix of the i-th layer.
Because the front traversal is performed when the picture layout layer tree is rendered, the front traversal ensures that the parent layer is rendered before the child layer and the ancestor layer is rendered before the offspring layer, and therefore, the cascade matrix is continuously multiplied right, and the conversion sequence of element layer projection is just satisfied; each layer transformation matrix sequentially multiplies right from the root layer transformation matrix to the element layer transformation matrix, and the transformation sequence of element layer projection is satisfied; the window projective transformation matrix of the element layer is obtained by cascading the element layer with all ancestor layers of the element layer.
Step S14: and carrying out linear transformation on the layer frame based on the window projection transformation matrix, and projecting the elements in the element layer to the correct position of the window so as to render the elements to the correct position of the window. The linear transformation performed on the layer frame can be one or more of translation transformation, rotation transformation and scaling transformation.
The schematic diagram of the linear transformation of the layer frame provided by the embodiment of the disclosure is shown in fig. 5, and the linear transformation of the layer frame in fig. 5 is a rotation transformation, specifically, the clockwise rotation angle θ of the layer frame transforms the elements in the element layer into the window and projects the elements to the correct position of the window, so that the elements are rendered on the correct position of the window.
Transforming the elements in the element layer into the window by using the window projection transformation matrix through linear transformation on the layer frame, and projecting the elements to the correct position of the window so as to render the elements at the correct position of the window, thereby realizing the rendering of the elements in the canvas; after the window projection transformation matrix is obtained in a cascading transformation mode, elements are projected to the window in a linear transformation mode, so that the rendering efficiency of the WebGL rasterization rendering engine can be improved.
In an alternative embodiment of the present disclosure, step S14 includes:
the element α in the element layer is transformed into the element β in the window according to the following formula:
β＝Tα
Wherein T is a window projective transformation matrix, the window projective transformation matrix contains transformation information, and the transformation information comprises translation transformation information, rotation transformation information and scaling transformation information. The position of the element beta in the window is the correct position of the projection of the element alpha in the element layer to the window.
After the window projection transformation matrix is obtained in a cascading transformation mode, elements are projected to the window in a linear transformation mode, so that the rendering efficiency of the WebGL rasterization rendering engine can be improved.
In an alternative embodiment of the present disclosure, after projecting the element to the correct position of the window in step S14, the method further includes:
determining a bounding box of the element by using a bounding box algorithm based on the element vertices projected to the window;
Judging whether the element is outside the window according to the relative positions of the bounding box and the window, and eliminating the element outside the window during rendering. A schematic diagram of removing elements outside a window provided by an embodiment of the disclosure is shown in FIG. 6.
By eliminating elements outside the window, elements to be rendered in the canvas can be reduced, elements in the rendering window are minimized, and the rendering performance of the WebGL rasterization rendering engine is improved.
In a preferred embodiment of the present disclosure, the bounding box of the element is a circumscribed minimum rectangle of the element; wherein the bounding box or the minimum bounding box is the circumscribed minimum rectangle of the element;
judging whether the element is outside the window according to the relative positions of the bounding box and the window comprises the following steps:
judging whether the rectangle occupied by the bounding box and the rectangle occupied by the window intersect or not;
If so, the element is within the window;
If not, the element is outside the window.
Whether the element is outside the window is judged by judging whether the rectangle occupied by the bounding box is intersected with the rectangle occupied by the window, and the element outside the window is removed after the judging result is obtained, so that only the element in the window can be rendered during rendering, and the rendering performance of the WebGL rasterization rendering engine is improved.
From the above description, it can be seen that the present disclosure achieves the following technical effects:
the hierarchical relation among the layers is expressed by using the tree structure, so that the layers can be conveniently expanded, and the problem that the Web application in the related technology directly uses the native API of the WebGL rasterization rendering engine to render and is not beneficial to the expansion of the layers is solved;
Because each element in the canvas monopolizes one layer frame, namely each node on the page layer tree monopolizes one layer frame, each layer can be independently drawn by separating from a window, the layers are not interfered with each other, and the element draws a vertex in the layer frame monopolized by itself without concern about the projection position of the window, so that the drawing of the element is simpler and more efficient;
a scaling transformation and a translation transformation are applied to the root node of the page layer tree, and scrolling or scaling of the window can be realized by transforming the page layer without changing the design of the whole picture layer architecture;
After a window projection transformation matrix is obtained by adopting a cascading transformation mode, elements are projected to a window by adopting a linear transformation mode, so that the rendering efficiency of a WebGL rasterization rendering engine can be improved;
by eliminating elements outside the window, elements to be rendered in the canvas can be reduced, elements in the rendering window are minimized, and the rendering performance of the WebGL rasterization rendering engine is improved.
It should be noted that the steps illustrated in the flowcharts of the figures may be performed in a computer system such as a set of computer executable instructions, and that although a logical order is illustrated in the flowcharts, in some cases the steps illustrated or described may be performed in an order other than that illustrated herein.
The disclosed embodiments also provide a rendering apparatus for implementing the elements in the canvas of the above method embodiment, as shown in fig. 7, the design apparatus 70 includes:
a design unit 71, configured to design a canvas layer architecture of a WebGL rasterization rendering engine, and describe multiple levels of layers in the canvas layer architecture by adopting a tree structure, where the multiple levels of layers include a root layer, a page layer and an element layer from top to bottom according to a hierarchy;
The control unit 72 is configured to control, under a multi-level layer of the canvas layer architecture, each element in the canvas to exclusive one layer frame, so that the element draws a vertex in the layer frame exclusive to itself, where each layer frame is determined by an origin and a base vector, and a layer in which the element is located is the element layer;
the cascade conversion unit 73 is used for carrying out cascade conversion on the layers in the canvas layer framework to obtain a window projection conversion matrix; and
And a linear transformation unit 74, configured to perform linear transformation on the layer frame based on the window projective transformation matrix, and project the element in the element layer to the correct position of the window, so that the element is rendered in the correct position of the window.
The specific manner in which the units of the above embodiments of the apparatus perform their operations has been described in detail in relation to the embodiments of the method and is not described in detail here.
The disclosed embodiment also provides an electronic device, as shown in fig. 8, which includes one or more processors 81 and a memory 82, and in fig. 8, one processor 81 is taken as an example.
The controller may further include: an input device 83 and an output device 84.
The processor 81, the memory 82, the input device 83 and the output device 84 may be connected by a bus or otherwise, for example in fig. 8.
The Processor 81 may be a central processing unit (Central Processing Unit, abbreviated as CPU), the Processor 81 may be other general purpose Processor, digital signal Processor (DIGITAL SIGNAL Processor, abbreviated as DSP), application SPECIFIC INTEGRATED Circuit (ASIC), field-Programmable gate array (FPGA) or other Programmable logic device, discrete gate or transistor logic device, discrete hardware component, or a combination of the foregoing chips, and the general purpose Processor may be a microprocessor or any conventional Processor.
The memory 82, as a non-transitory computer readable storage medium, may be used to store non-transitory software programs, non-transitory computer-executable programs, and modules, such as program instructions/modules corresponding to the control methods in embodiments of the present disclosure. The processor 81 executes various functional applications of the server and data processing, i.e., implements the rendering methods of elements in the canvas of the above-described method embodiments, by running non-transitory software programs, instructions, and modules stored in the memory 82.
The memory 82 may include a storage program area that may store an operating system, at least one application program required for functions, and a storage data area; the storage data area may store data created according to the use of a processing device operated by the server, or the like. In addition, the memory 82 may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid state storage device. In some embodiments, memory 82 may optionally include memory located remotely from processor 81, which may be connected to a network connection device via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The input means 83 may receive input numeric or character information and generate key signal inputs related to user settings and function control of the processing means of the server. The output 84 may include a display device such as a display screen.
One or more modules are stored in the memory 82 that, when executed by the one or more processors 81, perform the method shown in fig. 1.
Those skilled in the art will appreciate that implementing all or part of the above-described method embodiments may be accomplished by way of a computer program to instruct related hardware, and the program may be stored in a computer readable storage medium, which when executed may include the above-described method embodiment. The storage medium may be a magnetic disk, an optical disc, a Read-Only Memory (ROM), a random access Memory (Random Access Memory RAM), a Flash Memory (FM), a hard disk (HARD DISK DRIVE HDD), or a Solid state disk (Solid-STATE DRIVE SSD); the storage medium may also comprise a combination of memories of the kind described above.
Although embodiments of the present disclosure have been described with reference to the accompanying drawings, various modifications and variations may be made by those skilled in the art without departing from the spirit and scope of the disclosure, and such modifications and variations fall within the scope as defined by the appended claims.
Claims (10)
1. A method of rendering elements in a canvas, comprising:
Designing a canvas layer architecture of a WebGL rasterization rendering engine, and describing a multi-level layer in the canvas layer architecture by adopting a tree structure, wherein the multi-level layer comprises a root layer, a page layer and an element layer from high to low according to the hierarchy;
Under a multi-level layer of the picture layer framework, controlling each element in canvas to exclusive one layer frame so that the element draws a vertex in the layer frame exclusive to the element, wherein each layer frame is determined by an origin and a base vector, and the layer where the element is located is the element layer;
Performing cascade transformation on layers in the canvas layer framework to obtain a window projection transformation matrix; and
And carrying out linear transformation on the layer frame based on the window projection transformation matrix, and projecting the elements in the element layer to the correct position of the window so as to render the elements to the correct position of the window.
2. The method of claim 1, wherein the multi-level layers in the canvas layer architecture further comprise a background layer, an interaction layer, and a palette layer, wherein the background layer, the page layer, and the interaction layer are the same in level, and wherein the palette layer and the element layer are nested in multiple ways;
When rendering, controlling the WebGL rasterization rendering engine to perform preamble traversal from the root layer, and sequentially rendering the root layer, the background layer, the page layer and the interactive layer, wherein the later rendered layer covers the layer which is rendered first;
And when rendering, the drawing board layer and the element layer both belong to the page layer.
3. The method of claim 1, wherein the root layer is a parent layer of the page layer, the root layer and page layer each being an ancestor layer of the element layer;
the multi-level layers in the canvas layer framework further comprise drawing board layers, and the drawing board layers and the element layers are nested in a plurality of modes;
The cascade transformation is carried out on the layers in the canvas layer framework to obtain a window projection transformation matrix, and the cascade transformation comprises the following steps:
and multiplying the element layer in the canvas layer framework and all ancestor layers of the element layer in a cascading manner to obtain a window projection transformation matrix of the element layer.
4. The method of claim 3, wherein the step of cascading the element layer and all ancestor layers of the element layer in the canvas layer architecture to obtain the window projective transformation matrix of the element layer comprises:
Let the root layer transformation matrix be T 0, the element layer transformation matrix be T n, the parent layer transformation matrix of the element layer be T n-1, the window projection transformation matrix T of the element layer is determined according to the following formula:
where i represents the i-th layer, i=0 represents the root layer, i=n represents the element layer, and T i represents the i-th layer transform matrix.
5. The method of claim 1, wherein linearly transforming the layer frame based on the window projective transformation matrix to project elements in the element layer to the correct position of the window comprises:
the element α in the element layer is transformed into the element β in the window according to the following formula:
β＝Tα
wherein T is a window projective transformation matrix, the window projective transformation matrix contains transformation information, and the transformation information comprises translation transformation information, rotation transformation information and scaling transformation information.
6. The method of claim 1, wherein after projecting the elements in the element layer to the correct position of the window, the method further comprises:
determining a bounding box of the element by using a bounding box algorithm based on the element vertices projected to the window;
Judging whether the element is outside the window according to the relative positions of the bounding box and the window, and eliminating the element outside the window during rendering.
7. The method of claim 6, wherein the bounding box of the element is a circumscribed minimum rectangle of the element;
judging whether the element is outside the window according to the relative positions of the bounding box and the window comprises the following steps:
judging whether the rectangle occupied by the bounding box and the rectangle occupied by the window intersect or not;
If so, the element is within the window;
If not, the element is outside the window.
8. A rendering apparatus for an element in a canvas, comprising:
The design unit is used for designing a canvas layer architecture of the WebGL rasterization rendering engine, describing a multi-level layer in the canvas layer architecture by adopting a tree structure, wherein the multi-level layer comprises a root layer, a page layer and an element layer from high to low according to the level;
The control unit is used for controlling each element in the canvas to exclusive one layer frame under the multi-level layers of the canvas layer frame so that the element draws a vertex in the layer frame exclusive to the element, wherein each layer frame is determined by an origin and a base vector, and the layer where the element is positioned is the element layer;
The cascade conversion unit is used for carrying out cascade conversion on the layers in the canvas layer framework to obtain a window projection conversion matrix; and
And the linear transformation unit is used for carrying out linear transformation on the layer frame based on the window projection transformation matrix, and projecting the elements in the element layer to the correct position of the window so as to render the elements to the correct position of the window.
9. A computer-readable storage medium storing computer instructions for causing a computer to perform the method of rendering elements in a canvas as claimed in any one of claims 1 to 7.
10. An electronic device, the electronic device comprising: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores a computer program executable by the at least one processor to cause the at least one processor to perform the rendering method of the element in the canvas of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410102607.4A CN117953120A (en) | 2024-01-24 | 2024-01-24 | Rendering method and device for elements in canvas and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410102607.4A CN117953120A (en) | 2024-01-24 | 2024-01-24 | Rendering method and device for elements in canvas and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117953120A true CN117953120A (en) | 2024-04-30 |
Family
ID=90797554
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410102607.4A Pending CN117953120A (en) | 2024-01-24 | 2024-01-24 | Rendering method and device for elements in canvas and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117953120A (en) |
-
2024
- 2024-01-24 CN CN202410102607.4A patent/CN117953120A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11449661B2 (en) | System and method for extended dynamic layout | |
| US6487565B1 (en) | Updating animated images represented by scene graphs | |
| AU2005200389B2 (en) | Grid canvas | |
| US8458614B1 (en) | Rendition-based graphical layout management | |
| CN108038897B (en) | Shadow map generation method and device | |
| US9418068B2 (en) | Dimensional conversion in presentations | |
| US8180177B1 (en) | Seam-based reduction and expansion of images using parallel processing of retargeting matrix strips | |
| US20100164986A1 (en) | Dynamic Collage for Visualizing Large Photograph Collections | |
| US8379058B2 (en) | Methods and apparatuses to arbitrarily transform windows | |
| US9053529B2 (en) | System and method for capturing digital images | |
| CN111209721A (en) | Bitmap font realization method and device, electronic equipment and storage medium | |
| US20130120407A1 (en) | Seam-Based Reduction and Expansion of Images Using Partial Solution Matrix Dependent on Dynamic Programming Access Pattern | |
| US8803883B2 (en) | Generating Voronoi treemaps | |
| CN111459501A (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| US9501812B2 (en) | Map performance by dynamically reducing map detail | |
| CN115061680A (en) | Method for realizing custom display panel based on ECharts map component | |
| US20090119577A1 (en) | Method and Arrangement in a Display System | |
| CN117953120A (en) | Rendering method and device for elements in canvas and electronic equipment | |
| CN115659087B (en) | Page rendering method, equipment and storage medium | |
| CN106998489A (en) | A kind of focus is crossed the border searching method and device | |
| CN108564637B (en) | Geometric model arrangement method and device | |
| US20220005151A1 (en) | Method of processing picture, computing device, and computer-program product | |
| CN113918267B (en) | Map interaction method and device, electronic equipment and storage medium | |
| CN117953184A (en) | Collision detection method and device of WebGL rendering engine and electronic equipment | |
| RU2821841C2 (en) | Imaging method, electronic device and data medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |