Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to draw a wave ball with Android Bezier curve". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The effect is as follows:

Let's first summarize the characteristics of WaveLoadingWidget so that we can sum up the steps needed to achieve this effect:

The main body of the widget is an irregular semicircle, and the top curve undulates from left to right in a wave-like form.

The wavy ball can be customized in color, named after waveColor.

The undulating line of the wavy ball divides the embedded text into two colors, the upper half is named after backgroundColor and the lower half is named after foregroundColor. The overall color of the text is always changing dynamically according to the movement of the waves.

Although the overall color of the text is constantly changing, as long as the figure of one frame can be drawn, the dynamic effect can be achieved by constantly changing the position parameters of the wave curve, so here we first regard the widget as static and realize its static effect first.

Disassemble the drawing steps into the following steps:

Draw the text with the color backgroundColor and draw it at the bottom of the canvas

Construct a maximum circular path circlePath that is not out of range according to the width and height information of widget

Taking the horizontal middle line of circlePath as the reference undulating line of waves, a continuous wavy path is drawn with Bezier curves on the upper and lower sides of the undulating line, and the first and second ends of the path are connected in a rectangular way, so that the bottom of the wavePath,wavePath will intersect with the bottom of the circlePath.

Take the intersection combinePath of circlePath and wavePath, fill it with waveColor, and get a semicircular spherical wave.

Use the canvas.clipPath (combinePath) method to cut the canvas, and then draw the text with the color of foregroundColor. At this time, the drawn foregroundColor text will only display the part within the combinePath range, that is, only the lower part will be displayed, so that the text drawn at two different times will overlap, thus the text with different color ranges can be obtained.

By using AnimationController to constantly change the X coordinate of the starting point of wavePath, and refresh UI at the same time, the dynamic effect of waves fluctuating from left to right is obtained.

Now let's implement the above drawing steps step by step.

First, draw backgroundColor text

Flutter provides developers with access to self-drawn UI through CustomPainter, and its internal void paint (Canvas canvas, Size size) methods provide canvas canvas objects and size objects that contain widget width and height information.

Here we inherit the CustomPainter class and first draw the text with the color backgroundColor in the paint method. The canvas object of flutter does not provide API for direct drawText, so the step of drawing text is a little more troublesome than the native custom View.

Class _ WaveLoadingPainter extends CustomPainter {final String text; final double fontSize; final double animatedValue; final Color backgroundColor; final Color foregroundColor; final Color waveColor; _ WaveLoadingPainter ({required this.text, required this.fontSize, required this.animatedValue, required this.backgroundColor, required this.foregroundColor, required this.waveColor,}); @ override void paint (Canvas canvas, Size size) {final side = min (size.width, size.height) _ drawText (canvas: canvas, side: side, color: backgroundColor);} void _ drawText ({required Canvas canvas, required double side, required Color color}) {ParagraphBuilder paragraphBuilder = ParagraphBuilder (ParagraphStyle (textAlign: TextAlign.center, fontStyle: FontStyle.normal, fontSize: fontSize,)); paragraphBuilder.pushStyle (ui.TextStyle (color: color); paragraphBuilder.addText (text); ParagraphConstraints pc = ParagraphConstraints (width: fontSize) Paragraph paragraph = paragraphBuilder.build ().. layout (pc); canvas.drawParagraph (paragraph, Offset ((side-paragraph.width) / 2.0, (side-paragraph.height) / 2.0),);} @ override bool shouldRepaint (CustomPainter oldDelegate) {return animatedValue! = (oldDelegate as _ WaveLoadingPainter) .animatedValue;}}

Second, construct circlePath

Taking the minimum values of the width and height of widget as the diameter of the circle, a maximum circular path circlePath within the range of widget is constructed.

@ override void paint (Canvas canvas, Size size) {final side = min (size.width, size.height); _ drawText (canvas: canvas, side: side, color: backgroundColor); final circlePath = Path (); circlePath.addArc (Rect.fromLTWH (0,0, side, side), 0,2 * pi);} III. Draw wavy lines

The width and height of the waves are calculated according to a fixed scale value, and the middle separation line of the circlePath is used as the horizontal line, and a continuous wave line is drawn according to the Bezier curve above and below the horizontal line.

Override void paint (Canvas canvas, Size size) {final side = min (size.width, size.height); _ drawText (canvas: canvas, side: side, color: backgroundColor); final circlePath = Path (); circlePath.addArc (Rect.fromLTWH (0,0, side, side), 0,2 * pi); final waveWidth = side * 0.8; final waveHeight = side / 6; final wavePath = Path (); final radius = side / 2.0 WavePath.moveTo (- waveWidth, radius); for (double I =-waveWidth; I

< side; i += waveWidth) { wavePath.relativeQuadraticBezierTo( waveWidth / 4, -waveHeight, waveWidth / 2, 0); wavePath.relativeQuadraticBezierTo( waveWidth / 4, waveHeight, waveWidth / 2, 0); } //为了方便读者理解，这里把 wavePath 绘制出来，实际上不需要 final paint = Paint() ..isAntiAlias = true ..style = PaintingStyle.fill ..strokeWidth = 3 ..color = waveColor; canvas.drawPath(wavePath, paint); }

At this time, the curve drawn is still in an unclosed state, so it is necessary to connect the beginning and end of the wavePath so that it can intersect with the circlePath later.

WavePath.relativeLineTo (0, radius); wavePath.lineTo (- waveWidth, side); wavePath.close (); / / for readers' convenience, wavePath is drawn here without actually requiring final paint = Paint ().. isAntiAlias = true.. style = PaintingStyle.fill.. strokeWidth = 3.. color = waveColor;canvas.drawPath (wavePath, paint)

After the wavePath is closed, the color of the semicircle will be covered.

Fourth, take the intersection

Take the intersection of circlePath and wavePath and you get a semicircular wave ball.

Final paint = Paint ().. isAntiAlias = true.. style = PaintingStyle.fill.. strokeWidth = 3.. color = waveColor;final combinePath = Path.combine (PathOperation.intersect, circlePath, wavePath); canvas.drawPath (combinePath, paint)

5. Draw foregroundColor text

The color of the text is divided into two parts, the upper part is backgroundColor, and the lower part is foregroundColor. In the first step, the backgroundColor text has already been drawn, and the foregroundColor text does not need to display the upper part, so before drawing the foregroundColor text, it is necessary to limit the drawing area to the combinePath, so that the text drawn at two different times overlap, thus the text with different color ranges can be obtained.

Canvas.clipPath (combinePath); _ drawText (canvas: canvas, side: side, color: foregroundColor)

Add animation

Now that you have drawn the static effect, you can consider how to make the widget move.

To achieve the dynamic effect is also very simple, as long as you constantly change the coordinates of the starting point of the Bezier curve and make it move from left to right, you can create the effect of waves moving from left to right. _ WaveLoadingPainter sets the starting coordinate point of wavePath according to the externally passed animation value animatedValue. The logic and other drawing parameters for generating animatedValue are provided by _ WaveLoadingState.

Class _ WaveLoadingState extends State with SingleTickerProviderStateMixin {String get _ text = > widget.text; double get _ fontSize = > widget.fontSize; Color get _ backgroundColor = > widget.backgroundColor; Color get _ foregroundColor = > widget.foregroundColor; Color get _ waveColor = > widget.waveColor; late AnimationController _ controller; late Animation _ animation; @ override void initState () {super.initState (); _ controller = AnimationController (duration: const Duration (milliseconds: 700), vsync: this) _ animation = Tween (begin: 0. 0, end: 1. 0,). Animate (_ controller).. addListener (() {setState (() = > {});}); _ controller.repeat ();} @ override void dispose () {_ controller.dispose (); super.dispose () } @ override Widget build (BuildContext context) {return RepaintBoundary (child: CustomPaint (painter: _ WaveLoadingPainter (text: _ text, fontSize: _ fontSize, animatedValue: _ animation.value, backgroundColor: _ backgroundColor, foregroundColor: _ foregroundColor, waveColor: _ waveColor,);}}

_ WaveLoadingPainter sets the starting coordinate point of wavePath according to animatedValue

WavePath.moveTo ((animatedValue-1) * waveWidth, radius); VII. Use

Finally, wrap _ WaveLoadingState into StatefulWidget, and open the parameters that can be customized in StatefulWidget.

Class WaveLoading extends StatefulWidget {final String text; final double fontSize; final Color backgroundColor; final Color foregroundColor; final Color waveColor; WaveLoading ({Key? Key, required this.text, required this.fontSize, required this.backgroundColor, required this.foregroundColor, required this.waveColor,}: super (key: key) {assert (text.isNotEmpty & & fontSize > 0);} @ override State createState () {return _ WaveLoadingState ();}}

Mode of use:

SizedBox (width: 300, height: 300, child: WaveLoading (text: "open", fontSize: 210, backgroundColor: Colors.lightBlue, foregroundColor: Colors.white, waveColor: Colors.lightBlue,) "how to draw a wave ball with Android Bezier curve" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.