The drag effect of Flutter is implemented by custom view. The effect of Flutter is as follows
- To achieve the final effect, first draw the line (long rectangle) at the drag joint.
- In order to keep the width of the rectangle unchanged, the dynamic coordinates of the four points of the rectangle are calculated.
- With the Path connection, replace the top and bottom sides with bezier curves.
- Finally draw circles on both sides and hide the sharp corners of the rectangle.
var angleA = atan((during.dx - end.dx) / (end.dy - during.dy)); var temp_dx = cos(angleA) * lineWidth; var temp_dy = sin(angleA) * lineWidth; var firstControlPoint = Offset(end.dx + (during.dx - end.dx) / 2, during.dy + (end.dy - during.dy) / 2); var firstPoint = Offset(during.dx + temp_dx, during.dy + temp_dy); var secondPoint = Offset(end.dx - temp_dx * ratio, end.dy - temp_dy * ratio); / * * p1 p3 | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | | | | | | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | p2 p4 * / / / origin - > p1 path. The moveTo (end. Dx - temp_dx * ratio, end.dy - temp_dy * ratio); // p1 -> p2 path.lineTo(end.dx + temp_dx * ratio, end.dy + temp_dy * ratio); // p2 -> p4 path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstPoint.dx, firstPoint.dy); // p4 -> p3 path.lineTo(during.dx - temp_dx, during.dy - temp_dy); // p3 -> p1 path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, secondPoint.dx, secondPoint.dy); canvas.drawPath(path, paint); canvas.drawCircle(end, lineWidth * ratio, paint); canvas.drawCircle(during, lineWidth, paint);Copy the code
If you have any questions, please leave a comment.
Demo download