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

This article mainly introduces how to use canvas to make K-line in WeChat Mini Programs, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article.

Foreword:

Our goal is to have a smooth curve to represent the moving average, etc., rather than a broken line with an obvious turning point. So we have to continue to explore api. We found that in canvas API, there are two that can draw a curve.

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

Both api draw paths through Bezier curves. Fortunately, when learning PS, I also have a certain degree of proficiency in the specific performance of the Bezier curve, so I know that in order to determine a curve path composed of multiple points, each turning point must have two control points to control the performance of the curve.

At the beginning and end of the curve, there can only be one control point. Therefore, when we draw the start and end points, we have to use quadraticCurveTo, and when we draw the middle point, we use beZierCurveTo.

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

In order to find an effective formula, the draft started.

Did not expect to bid farewell to high school math for so many years, with a little memory, spent the whole morning, forcibly worked out a formula, I think if I am still the level of high school math, it will be possible to come out in 10 minutes, Khan!

I don't know if you still remember the concept of tangent. If we want to draw a Bezier curve, M [I-1] is the starting point, M [I] is the end point, and the other two control points are A1 and A2, these two control points must be on the tangent of a curved surface, and the tangent can be determined by three points. for example, in my draft, the top orange line is the tangent, we only need to be on this tangent. Take two points at random and use them as the control points of the front and rear curves.

So, after a long time of thinking, I summed up 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]-M [I-1] [0]-M [I-1] [0]) M [I] [1]-b * (M [I + 1] [1]-M [I-1] [1])]

Among them, the coefficients an and b are a value that I take at random according to the situation. I have tried, and it is recommended to take a value around 0.3 and debug it. Try to determine the specific effect.

The first point and the last point because it is impossible to get two control points in this way, so I add a random custom point before and after the point set, and ignore them in the actual traversal.

The ideas are sorted out, and the specific implementation is as follows

BezierLine (canvasId, options) {let windowWidth = 0wx.getSystemInfo ({success (result) {windowWidth = result.windowWidth}}) let a = windowWidth / (options.xAxis.length-1) let data = [] options.xAxis.map ((item, I) = > {data.push ([I * 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.bezierLine in onLoad (' 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 OK, and we don't have to worry about the drawing of the curve any more. Our k-diagram is a step closer.

Ps: data can be organized in a variety of forms, including arrays, two-digit arrays, or objects. This is not the most important point, as long as it is handled correctly.

Thank you for reading this article carefully. I hope the article "how to use canvas to make K-line in WeChat Mini Programs" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.