The WeChat applet uses canvas to create a K-line instance for details, canvas

The applet uses canvas to create a detailed explanation of the K-line instance, canvas

The applet uses canvas to create a k

Implementation:

Preface:

We want a smooth curve to represent the moving average and so on, rather than a line with obvious turning points. Therefore, you must continue to explore APIs. We found that there are two curves that can be drawn in the canvas API.

beZierCurveTo(num1, num2, num3, num4, x, y)quadraticCurveTo(num1, num2, x, y)

Both APIs use the besell curve to draw the path. Fortunately, when learning PS, we have a certain degree of proficiency in the specific performance of the Bessel curve. Therefore, we know that we need to determine a curve path composed of multiple points, each turning point requires two control points to control the curve performance.

However, there is only one control point at the starting and ending points of the curve. Therefore, we must use quadraticCurveTo when drawing the start and end points. beZierCurveTo is used to draw the middle point.

Now, the difficulty is how to calculate their control points through known points to pass through?

To find an effective formula, the draft starts. I drew a draft that only I can understand.

I didn't expect to say goodbye to High School Mathematics for so many years. With a little memory, I spent a morning and forced a formula. I thought if I was still in high school mathematics, it would take about 10 minutes to roll it out, sweat!

I don't know if you still remember the concept of tangent. If we want to draw a beiser curve, M [I-1] is the starting point, M [I] is the end point, and the other two control points are A1, a2, these two control points will be on the tangent line of a certain surface, and the tangent can be determined by three points, such as in my draft, the orange line at the top is the tangent. We only need to take 2 points at will on this cutting line as the control points of the front and back curves respectively.

After a long time of thinking, I have summarized a formula as follows:

A1[M[i-1][0] + a*(M[i][0] - M[i-2][0]), M[i-1][1] + b*(M[i][1] - M[i-2][1])]A2[M[i][0] - b*(M[i+1][0] - M[i-1][0]), M[i][1] - b*(M[i+1][1] - M[i-1][1])]

Here, coefficient a and coefficient B are a random value according to the situation. I have tried it. We recommend that you set a value near 0.3 and debug it. Try the specific effect and then confirm it.

The first vertex and the last vertex cannot obtain two control points in this way. Therefore, I add a custom vertex before and after the vertex set, and ignore them during actual traversal.

After sorting out the ideas, the specific implementation is as follows:

BezierLine (canvasId, options) {let construct wwidth = 0wx. getSystemInfo ({success (result) {synchronized wwidth = result. required wwidth}) let a = required wwidth/(options. xAxis. length-1) let data = [] options. xAxis. map (item, I) => {data. push ([I X a, 200-options. yAxis [I])}) data. unshift (data [0]) data. push (data [data. length-1]) const ctx = wx. createCanvasContext (canvasId) ctx. beginPath () data. map (item, I) =>{ const a = 0.25 const B = 0.25 if (I = 0 | I = data. length-1) {// do nothing} else if (I = 1) {ctx. moveTo (item [0], item [1])} else {const a1 = data [I-1] [0] + a * (data [I] [0]-data [I-2] [0]) const a2 = data [I-1] [1] + B * (data [I] [1]-data [I-2] [1]) const b1 = data [I] [0]-B * (data [I + 1] [0]-data [I-1] [0]) const b2 = data [I] [1]-B * (data [I + 1] [1]-data [I-1] [1]) ctx. bezierCurveTo (a1, a2, b1, b2, item [0], item [1])}) ctx. setLineWidth (1) ctx. setStrokeStyle ('red') ctx. stroke () ctx. draw ()} // call this in onLoad. bezierLine ('stage ', {xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], yAxis: [11, 33, 22, 32, 14, 15, 20, 60, 23, 44, 77,122,133, 89,156,122,128,143,111,101,132, 99, 98, 44, 62, 74,111, 13, 42, 55]})

Oh yeah! The effect is good, and we don't have to worry about curve drawing any more in the future. We have taken a step closer to our K-line chart.

Ps: data can be organized in a variety of ways, including arrays, two arrays, or objects. This is not the main point, as long as it can be correctly processed.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!