today... It's a very important day - Goddess day. As a programmer, how to express our blessings to the people we like in a low-key way without losing the force is related to our happiness in the later half of our life, and the blessings are in place. Ordinary friends add a word to become girlfriends, and girlfriends become wives. If they are already wives, the pocket money of this month can be several hundred more, which is exciting to think about.

Back to reality, as programmers, of course, we need to be unique, different, to break through the sky, to be able to reflect our identity, and force the grid to be full. Therefore, it is absolutely your best choice to develop an App for the goddess, which is heaven and earth, and only for us.

Don't talk too much

Let's start with a wave:

First of all, the above effect is to draw the path all the time. When the flowers and leaves are drawn, they are colored. Therefore, it is difficult to get the point coordinates of the path here. As long as the point coordinates are drawn one by one, the above effect will be achieved.

Now the main point is how to get point coordinates. One way is to manually write and adjust one by one. This method is too heavy. How can programmers use this method? How can I get the program to generate these coordinates?

Think about whether we can get the coordinates of the current point when listening to the gesture (mouse) and a moving path coordinate when moving. Therefore, we only need to load the desired image on the screen first and then move according to the path on the image, so we can get the path we want.

For any language, it can be implemented according to the above ideas. Now, the very hot Flutter is used to realize this function.

OK, first load a picture, and then listen to its gesture (mouse) movement event. The code is as follows:

Container(
  width: 400,
  height: 700,
  child: GestureDetector(
    onLongPressStart: (LongPressStartDetails details) {
      print('${details.localPosition},');
    },
    onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
      print('${details.localPosition},');
    },
    onLongPressEnd: (LongPressEndDetails details) {
      print('${details.localPosition},');
    },
    child: Image.asset(
      'images/123.png',
      fit: BoxFit.fill,
    ),
  ),
)

Two points should be noted here:

• The size of the image display should be the same as the final canvas, so that the coordinates obtained do not need to be converted.
• The aspect ratio of the picture is the same as that of the canvas.

We output the path to the console. In the background, we just need to copy these coordinates to the application program, and define these coordinates as arrays, as follows:

static final List<Offset> flowerPoints = [
  Offset(182.0, 136.3),
  Offset(182.7, 135.3),
  Offset(183.0, 135.3),
  Offset(183.3, 135.3),
  ...
)

Get from point to path. Here is the drawing. First draw the red flower. To draw the path in the Flutter, you need to inherit the CustomPainter class and override the paint method. The drawing path and fill color code are as follows:

@override
void paint(Canvas canvas, Size size) {
  //Turn flowers red
    if (flowerPaths.length >= RoseData.flowerPoints.length) {
      var path = Path();
      for (int i = 0; i < flowerPaths.length; i++) {
        if (i == 0) {
          path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy);
        } else {
          path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy);
        }
      }
      _paint.style = PaintingStyle.fill;
      _paint.color = _flowerColor;
      canvas.drawPath(path, _paint);
    }
    //Drawing line
    _paint.style = PaintingStyle.stroke;
    _paint.color = _strokeColor;
	 canvas.drawPoints(PointMode.polygon, flowerPaths, _paint);
}

Here, we should pay attention to fill the color only when all the paths are drawn, and fill the color first, then draw the route, otherwise the route will be covered by the fill color.

In order to have the effect of drawing path, you need to increase the points in turn, add animation controller, and control the drawing path. The code is as follows:

AnimationController _controller;
Animation<num> _animation;

@override
void initState() {
  _controller = AnimationController(
      duration: Duration(seconds: 10), vsync: this)
    ..addListener(() {
      setState(() {
        _flowerPaths = RoseData.flowerPoints.sublist(0, _animation.value.floor());
      });
      });

    _animation = Tween(
            begin: 0.0,
            end: RoseData.flowerPoints.length)
        .animate(_controller);
}

The UI code is as follows:

@override
  Widget build(BuildContext context) {
		Container(
          width: 400,
          height: 700,
          child: CustomPaint(
            painter: RosePaint(_flowerPaths),
          ),
        )
  }

RosePaint is a custom paint. The effect is as follows:

In the final filling, it is found that some parts are not filled, and the blue point in the figure is the last point, so it is necessary to add 2 points, green and yellow points, to fill the unfilled area.

The fill point code is as follows:

static final List<Offset> flowerPoints = [
    Offset(182.0, 136.3),
    Offset(182.7, 135.3),
    ...
	Offset(179.3, 301.7),
  Offset(237.7, 144.7),
];

These two points need to be removed when drawing lines:

if (flowerPaths.length >= RoseData.flowerPoints.length) {
  var path = Path();
  for (int i = 0; i < flowerPaths.length; i++) {
    if (i == 0) {
      path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy);
    } else {
      path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy);
    }
  }
  _paint.style = PaintingStyle.fill;
  _paint.color = _flowerColor;
  canvas.drawPath(path, _paint);
}
//Drawing line
_paint.style = PaintingStyle.stroke;
_paint.color = _strokeColor;
//Remove the last two points, the last two points to draw red
var points = flowerPaths.sublist(0, max(0, flowerPaths.length - 2));
canvas.drawPoints(PointMode.polygon, points, _paint);

Just like huaguduo, other leaves and parts are the same drawing method. I won't introduce it here. Because there are many codes, I won't post them all here. You can add my wechat if you need.