Today, our front-end group asked such a question, and then a heated discussion began.
So let's take a look at this question together. This question asks two small questions:
1. How to draw a polygon on the canvas?
2. How to select a drawing with the mouse?
So let's answer two questions.
Draw polygon
To draw a polygon, the basic element of a polygonal figure is a path. A path is a collection of points of different shapes connected by line segments or curves of different colors and widths. A path, even a sub-path, is closed. Drawing graphics using paths requires some additional steps.
First, you need to create the path starting point
Then you use the draw command to draw the path.
Then you close the path
Once the path is generated, you can render the graphics by stroking or filling the path area. The above steps will use some APIs:
beginPath()
creates a new path. After it is generated, the graphics drawing command is directed to the path to generate a path.
After closePath()
closes the path, the graphics drawing command points to the context again.
stroke()
draws the outline of the figure through lines.
fill()
generates solid graphics by filling the content area of the path.
Detailed drawing process
Here is a detailed explanation of the drawing process: the
first step is to generate a path and call beginPath. In essence, the path is composed of many sub-paths. All these sub-paths are in a list, and all the sub-paths (lines, arcs) form a graph. . And every time this method is called, the list will be reset, and then new graphics can be drawn. (You need to specify your starting position after setting the path); the
second step is to call the specified function to draw the path; the
third step is to close the path closePath (not required);
Pen plotter model
Draw a triangle example:
var ctx = canvas.getContext("2d");
ctx.beginPath(); //开始路径
ctx.moveTo(75, 50); //指定起始位置
ctx.lineTo(100, 75); //绘制到这个位置的一条线
ctx.lineTo(100, 25); //绘制到这个位置的一条线
ctx.fill(); //填充图形，默认就制动结束路径了In this process, there is a more useful function, moveTo, this function can not actually draw anything, it is part of the path list described above.
Look at the role of this function:
moveTo()
moves the stroke to the specified coordinates x and y.
When the canvas is initialized or beginPath() is called, you usually use the moveTo() function to set the starting point. We can also use moveTo() to draw some discontinuous paths.
At this time, you can imagine the process of drawing something on paper and the pen tip moving from one point to another. The mode of this process is called pen plotter mode . So the canvas 2d drawing mode is also this mode.
Now there is no problem drawing polygons.
Find the specified graphics on the canvas
First of all, complete the description of this problem: how to judge that a certain figure is selected when the mouse is pressed?
For example, the following figure:
The mouse clicks on the inside of this irregular polygon, how to judge?
The first reaction is isPointInPath, or iterating all the graphics, using the mouse point to detect the point collision of the graphics, this method can be used, but the application scenarios are relatively small, and the performance overhead is relatively large. If there are too many graphics, each All need to be calculated, then this interaction will become very unfriendly.
Are there any other solutions? There is a commonly used solution in the game industry-bounding box. What is a bounding box? Let's take the above figure as an example, the red line frame drawn outside is the bounding box of this polygon.
A very vivid example is the moon cake box issued by the company, which is a bounding box of round moon cakes????
The scheme of bounding box has a shortcoming, the selected range is relatively coarse. For example, in the red box above, the content that is not part of the polygon is selected. If you want to use the bounding box scheme, you must divide it into enough detail, as shown in the figure below:
Multiple bounding boxes are separated. In this case, the scheme of bounding boxes is a bit rough when the graphics are particularly complicated.
There is also the following picture, solid and hollow circles, using bounding boxes is very unfriendly.
What to do then?
Program
If we want to quickly select a certain graph, can we have a corresponding hash for each of our graphs, and when the mouse clicks, we can get this hash. Use the value of hash to find this graph, the time complexity of this process is O(1).
For example, these graphics on the canvas:
I drew these figures on another canvas that was exactly the same
The upper canvas (displayed) is a normal graphic, but each graphic is assigned an rgb color value.
The lower canvas (hidden) uses this rgb color value as a fill or stroke.
When the mouse is clicked, take a pixel at the same position as the hidden canvas.
And the rgb value of this pixel is the hash we are looking for.
So far, the two questions have been answered.
Recently, I found that many people in my front-end group have begun to study the direction of front-end graphics. Front-end graphics and front-end architects are now the two major front-end directions, and front-end graphics is a very unique front-end direction and required skills. Unlike other directions, animation, data visualization, and games are all its fields. There is a great demand in the market. It can also be seen from the major recruitment websites that the salary is very high, and the current market is in short supply of talent.
Previously, Jingcheng Yideng launched the industry's only front-end graphics tutorial (season 1), starting from basic mathematics knowledge, involving all aspects of 2D and 3D, helping everyone quickly master the key knowledge points and programming skills of graphics.
Now they have launched the second season of graphics tutorials, especially new H5 game development combat, comprehensive upgrades, the goal is to take you into the world of front-end graphics engineers in the shortest time.
Those who pay attention to [Front End Universe] have special benefits: register for the second season and give away the first season tutorial.
Scan the QR code in the picture below,
To receive the free card, only 0.02 yuan.
????????????