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

This article mainly introduces Flutter how to draw curves, line charts and wave dynamic effects, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Brief introduction

Before using Flutter's Canvas to draw interesting graphics, we introduced the use of CustomPaint to draw custom shapes, we can see that with the graphic plane drawing mathematical calculation method, we can draw the desired shape. In this article, we introduce the drawing of line graphics, and realize the common wave dynamic effect with Animation. Through this article, you can learn:

Drawing of sinusoidal curve

Using two sinusoidal curves plus Animation to realize wave dynamic effect

The general drawing method of curve

Line chart drawing

The following is the effect diagram of the final implementation, which we will introduce one by one.

Sinusoidal curve drawing

For the sinusoidal curve, the formula is defined as follows: y=Asin (2ut+ θ) for drawing on the screen, because the points on the screen are discrete, so it is actually sampling the sinusoidal curve, as long as the sampling interval is dense enough, it is difficult to distinguish the effect drawn by the naked eye through the connection between discrete points. Therefore, to draw a sine curve is to connect the points of the sine curve in turn. The following is the implementation code drawn, waveHeight is the amplitude of the sine curve, here we draw a period for each screen width, so we use 2 * pi * I / size.width.

Path path = Path (); path.moveTo (0, center.height); for (double I = 1; I < size.width; I + = 1) {path.lineTo (I, center.height + waveHeight * sin (2 * pi * I / size.width + startAngle * pi * 4),);} canvas.drawPath (path, paint); Wave dynamic effect

Observing the dynamic effect of waves is actually two sinusoidal curves. Because they move at different speeds, they give people the impression of surging forward. The movement of the control curve can actually control the starting angle of the sine curve in the animation process, that is, the θ variable in the formula. The range of our animation control variable Animation is 0 to 1. In order to ensure the consistency of the repetition angle of the animation, we can keep the starting angle consistent at the end of an animation cycle, that is, an integer multiple of 2 π at the end of the animation cycle. Here we set a sinusoidal cancellation period of 4 π and the other 6 π. The larger the periodic angle of the starting angle, the faster it feels to move. Here is the drawing code for two sinusoids, where startAngle is the value of the Animation object during the animation. It is important to note that because startAngle is refreshed every time, in a subclass of CustomPainter, you need to return shouldRepaint to true to support redrawing. If this value is returned as false, it will not be redrawn.

Void paint (Canvas canvas, Size size) {var center = Size (size.width / 2, waveHeight * 2); var paint1 = Paint ().. color = Color (0xFF20B0FE); paint1.strokeWidth = 1.0; paint1.style = PaintingStyle.stroke; var paint2 = Paint (). Color = Color (0x8020C0E5); paint2.strokeWidth = 1.0; paint2.style = PaintingStyle.stroke; Path path2 = Path (); path2.moveTo (0, center.height); Path path3 = Path () Path3.moveTo (0, center.height + waveHeight); for (double I = 1; I < size.width; I + = 1) {path2.lineTo (I, center.height + waveHeight * sin (2 * pi * I / size.width + startAngle * pi * 4),); path3.lineTo (I, center.height + waveHeight * sin (2 * pi * I / size.width + startAngle * 6 * pi)) } canvas.drawPath (path2, paint1); canvas.drawPath (path3, paint2);}

The complete code has been uploaded to: custom drawing code, the directory is in the curves_paint.dart under the basic_paint directory.

Curve drawing

With the knowledge of sinusoidal curve drawing, other curves are actually the same truth. We use mathematical expressions, Abscissa to calculate the value of ordinates, and then form a series of sampling points, and then use Path objects to connect these points in turn to achieve the drawing of all kinds of curves. The following is the sample code for drawing a logarithmic curve.

Var center = Size (size.width / 2, size.height / 2); var paint = Paint ().. color = Color (0xFF2080E5); / / 2080E5paint.strokeWidth = 1.0 scene paint.style = PaintingStyle.stroke;Path path = Path (); path.moveTo (0, center.height); for (double I = 1; I)

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.