Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use canvas to draw a movable grid" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use canvas to draw a movable grid" article can help you solve the problem.

Analysis.

First of all, you need to have a starting point so that you can determine the location of the mesh, and then what is the side length of each square in the mesh (let's think about it in terms of a square, so it's easier), and when each vertex moves, the edge also needs to move.

So in fact, there are only two types of objects to be stored, one is lines, and the other is vertices.

How do you store vertices and lines? Using a library fabric.js, it is relatively easy to create objects of vertices and edges, and it also provides a way to move edges, but the problem also arises: according to the above display, a point is associated with at most 4 edges and at least 2 edges, how to express the relationship between vertices and edges?

The first idea is to use an array to store vertices and lines, and then determine whether the line is connected to a vertex according to the vertex coordinates contained in the line, and if so, it will be added to the vertex association attribute. Later, when you move the vertex, according to the vertex to get its associated line, to dynamically change the coordinates of the line, so that the above effect can be achieved.

Realize

Based on the above analysis, let's implement the code. The first objects that need to be stored are vertices and edges. Then all the vertex coordinates can be easily calculated according to the starting point coordinates and the side length of each small rectangle.

Function Grid ({node, unit, row, col, matrix = []}) {/ / store vertex this.vertexes = []; / / store edge this.lines = []; / / calculate for based on starting point coordinates and unit edge length (let I = 0; I {key.lines = value;});}

Here we reduce the complexity of O (mn) to O (n), where m is the length of lines and n is the length of vertexes. Then let's take a look at the number of vertices calculated at this time. The calculation time is only 200ms, which can already meet my needs. So how does the graph achieve this association? in fact, every time an edge is added, two vertices of the edge are added to the association relationship at the same time, that is, the structure of Map.

Function addEdges (v, w) {const line = makeLine ({point1: v, point2: W}); / / vertex v is associated with edge line this.edges.get (v) .push (line); / / vertex w is also associated with edge line this.edges.get (w) .push (line); this.lines.push (line);} function addVertexes (v) {this.vertexes.push (v) / / set a Map structure this.edges.set (v, []) for each vertex;}

After calculating all the vertices, the edges associated with the actual vertices are determined, and you only need to traverse these edges.

Once this is done, happily call fabric's api and add these objects to the canvas.

/ / API of fabric, adding fabric objects to the canvas canvas.add (.. this.vertexes); canvas.add (... this.lines)

All right, it's done. It's time to hand over the job. Run the page, open a look, boy, the calculation speed is much faster, but the rendering speed is terrible, 30: 30 vertex number, the page is still stuttered, how is this going on?

If you think about it, adding so many objects to the canvas is really a lot of computation, but we can't change the rendering consumption here. So I came up with a compromise, which is to use time slicing, to put it simply, to use the API of requestAnimationFrame to divide the rendering task into fragments and render it when the browser is idle, so that it will not block the tasks of other browsers. Here is some knowledge about browser rendering.

Function renderIdleCallback (canvas) {/ / Task slice const points = this.points.slice (); const lines = this.lines.slice (); const task = () = > {/ / when cleaning canvas, interrupt the subsequent rendering if (this.interrupt) return; if (! points.length & &! lines.length) return; let slicePoint = [], sliceLine = []; for (let I = 0 I < 10; iTunes +) {if (points.length) {const top = points.shift (); slicePoint.push (top);} if (lines.length) {const top = lines.shift (); sliceLine.push (top) }} canvas.add (.. slicePoint); canvas.add (.. sliceLine); window.requestAnimationFrame (task);} task ();}

The above code adds an identifier to interrupt the rendering, because there is a situation in which the grid is cleaned up and re-rendered before it is finished rendering, so you need to stop the last rendering and start a new rendering.

That's all for "how to use canvas to draw movable grids". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.