Browser vector graphics rendering method and device based on canvas and R tree space

A vector graphics and browser technology, applied in the direction of program control device, user interface execution, etc., can solve problems such as the inability to balance performance and interaction, and achieve the effect of solving interaction and performance problems

Inactive Publication Date: 2018-10-16
GUANGDONG ESHORE TECH
View PDF9 Cites 4 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

The basic shape points, lines, and planes in the map elements are rendered with div, svg, and canvas. Users can change the display mode of the map by changing the style during use, but the current solution is in the case of a large amount of data. In this case, there is a problem that performance and interaction cannot be balanced

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Browser vector graphics rendering method and device based on canvas and R tree space
  • Browser vector graphics rendering method and device based on canvas and R tree space
  • Browser vector graphics rendering method and device based on canvas and R tree space

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0045] see figure 2 , in a specific embodiment, the step S20 specifically includes,

[0046] S21. Group the minimum bounding rectangle of each graphic element in the canvas;

[0047] S22. Calculate a minimum area, the minimum area can contain the minimum circumscribed rectangle of each graphic element in a group;

[0048] S23. Group the minimum areas until a minimum area that can contain all graphics elements is calculated;

[0049] S24. Establish a hierarchical index relationship between the smallest circumscribed rectangle and the smallest area of ​​each group to form a tree structure.

[0050] In this embodiment, the minimum circumscribed rectangle of the primitive is grouped, and the minimum area of ​​the minimum circumscribed rectangle contained in each group is calculated. The node of the minimum circumscribed rectangle of the primitive is a leaf node, and the reference of the leaf node is stored in the minimum area. By Divide the minimum area into groups until a min...

Embodiment 2

[0052] In a specific embodiment, the step S30 specifically includes,

[0053] S31. Obtain the position coordinates of the mouse event;

[0054] S32. Find the smallest circumscribed rectangle including the position coordinates according to the hierarchical index relationship.

[0055] In this embodiment, the location coordinates of the mouse event are obtained, and according to the hierarchical index relationship, a layer-by-layer search is started from the smallest circumscribed area that can contain all graphics elements, and the smallest circumscribed rectangle where the coordinate position is located can be quickly searched to improve interaction efficiency .

[0056] see image 3 , a browser vector graphics rendering device based on canvas and R tree space, characterized in that: comprising,

[0057] The minimum enclosing rectangle calculation module is used to calculate the minimum enclosing rectangle of each graphic element in the canvas;

[0058] A hierarchical inde...

Embodiment 3

[0063] see Figure 4, in a specific embodiment, the hierarchical index building module includes,

[0064] The minimum enclosing rectangle grouping unit is used to group the minimum enclosing rectangle of each primitive in the canvas;

[0065] A minimum area calculation unit, configured to calculate a minimum area that can contain the minimum circumscribed rectangle of each graphic element in a group;

[0066] The minimum area grouping unit, which groups the minimum area until a minimum area that can contain all primitives is calculated;

[0067] The tree structure forming unit is used to establish a hierarchical index relationship between the minimum bounding rectangle and the minimum area of ​​each group to form a tree structure.

[0068] In this embodiment, the minimum enclosing rectangle grouping unit groups the minimum enclosing rectangles of the primitives, and the minimum area calculation unit calculates the minimum area of ​​the minimum enclosing rectangles contained ...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention provides a browser vector graphics rendering method based on canvas and R tree space, the method includes the following steps of: computing a minimum bounding rectangle for each primitive in a canvas; establishing a hierarchical index relationship for a minimum bounding rectangle in a canvas through an R-tree spatial index algorithm; searching a minimum bounding rectangle of a primitive according to a hierarchical index relationship; and searching a pattern of a primitive by using canvas after finding a minimum bounding rectangle of the primitive. The invention relates to an R-tree space index, a minimum bounding rectangle containing a primitive is built, according to the hierarchical index relationship a minimum bounding rectangle of the mouse position can be quickly found,the pattern of the primitive in a minimum bounding rectangle is set through the canvas setting primitive style, canvas and R-tree are combined, and interaction and performance problem of large data volume graph rendering are solved.

Description

technical field [0001] The present invention relates to a browser vector graphics rendering method and device, in particular to a browser vector graphics rendering method and device based on canvas and R tree space. Background technique [0002] In traditional web geographic information system applications, if you want to display various map element information in the browser, you need to publish the map elements as layer tile services, and then call and display them in the form of services on the front end. This approach has two disadvantages. One is that when the map data changes, the map service needs to be reconfigured. If the map service is a cached tile service, all previously cached tile data needs to be pre-generated again. When the number of tiles is large and the number of tiles is large, it takes a lot of time; secondly, in the client, the display effect of the map is determined when the map service is configured, and users cannot configure the display method acco...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
Patent Type & Authority Applications(China)
IPC IPC(8): G06F9/451
CPCG06F9/451
Inventor 倪峥余虎张郭强刘晶王亮刘志明
Owner GUANGDONG ESHORE TECH
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products