About making a simple frame chart using JavaScript

This article mainly introduces JavaScript to create a simple frame chart in detail, which has certain reference value. Interested friends can refer to it

Story background: I encountered this in the past few days A customer is taking meeting minutes. During each meeting, a specific device will record the speaker's position and display it as an angle value. He gave me the angle values and asked me to make him a diagram showing an approximate position of each person.

The customer thought of using Echarts charts. The first thing I thought of was using Echarts. However, after thinking about his request, I realized that using Echarts to create a simple frame selection chart would be overkill, and There is also so much useless code to import.

So I thought of using canvas to imitate it, but after thinking about it again, canvas was not easy to operate. Can I use ordinary css combined with javascript to make it? This reflection proves that you must use your brain more when doing anything in order to find a simpler way to solve the problem.

Considering that maybe everyone will need it one day, I released it. Note: It has portability and can be moved to any position on the page, and the effect will not change

Let’s take a look at the final effect first:

Figure 1:

Picture 2:

## This little thing will involve few knowledge points. Let’s summarize: js’s trigonometric function, CSS3’s transform, mouse’s Calculation of coordinate axis But if you haven’t heard of it at all, then please go and learn more about it.

Code area

Some knowledge points that will be used to expand

Note: When setting Transform in js, I did not use the scale() method. Because I wanted to be compatible with versions below IE9, I used matrix change. Of course, you can also change it to scale() without any impact.

1. The matrix function matix(a,b,c,d,e,f) under standard browsers and the matrix function progid under ie:DXImageTransform.Microsoft.Matrix(M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expend')

What they have in common: M11 == a; M12 == c; M21 == b; M22 == d

The difference: The matrix function under ie does not have two parameters, e and f. In the matrix function, e and f are used for displacement, which means that displacement cannot be achieved through the matrix function under ie [But here we It seems that no displacement is needed, hehe]

2. Under the standard browser, the initial value of the one-to-one correspondence between a, b, c, d, e, f in the matrix function matrix is: matix(1,0, 0,1,0,0)

3. Scaling through matrix:

x-axis scaling: a = x a c = x c e = x*e

y-axis scaling: b = y b d = y d f = y*f

4. Realize displacement through matrix: [ie no displacement]

x-axis displacement: e = e x

y-axis displacement: f = f y

5. Implement tilt through matrix:

x-axis tilt: c = Math.tan(xDeg/180*Math.PI)

y-axis tilt: b = Math.tan(yDeg/180*Math.PI)

6. Rotation through matrix:

a = Math.cos(deg/180*Math.PI);

b = Math.sin(deg/180*Math.PI);

c = -Math.sin(deg/180*Math.PI);

d = Math. cos(deg/180*Math.PI);

7. As for trigonometric functions, I won’t introduce them, Baidu has a lot of them.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use JS and CSS3 to create cool pop-up window effects

javascript to achieve waterfall flow dynamics Loading images

jQuery implements the function of fixing the top display of the sliding page

##

The above is the detailed content of About making a simple frame chart using JavaScript. For more information, please follow other related articles on the PHP Chinese website!