Flutter 动画鼻祖之CustomPaint

移动开发 作者: 2024-08-25 10:50:01
老孟导读:CustomPaint可以称之为动画鼻祖,它可以实现任何酷炫的动画和效果。CustomPaint本身没有动画属性,仅仅是绘制属性,一般情况下,CustomPaint会和动画控制配合使用,达到
CustomPaint(
  painter: MyCustomPainter(),)
class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas,Size size) {}

  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}

绘制点

Paint _paint = Paint()
    ..color = Colors.red
    ..strokeWidth = 3;

  @override
  void paint(Canvas canvas,Size size) {
    var points = [
      Offset(0,0),Offset(size.width / 2,size.height / 2),Offset(size.width,size.height),];
    canvas.drawPoints(PointMode.points,points,_paint);
  }
  • points:点
  • lines:将2个点绘制为线段,如果点的个数为奇数,最后一个点将会被忽略
  • polygon:将整个点绘制为一条线

绘制线

canvas.drawLine(Offset(0,_paint);

绘制路径

Paint _paint = Paint()
  ..color = Colors.red
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3;

@override
void paint(Canvas canvas,Size size) {
  print('size:$size');
  var _path = Path()
    ..moveTo(0,0)
    ..lineTo(size.width,size.height)
  ..close();
  canvas.drawPath(_path,_paint);
}

绘制各种形状

canvas.drawCircle(Offset(size.width/2,size.height/2),20,_paint);
canvas.drawOval(Rect.fromLTRB(0,size.width,_paint);
canvas.drawArc(
    Rect.fromLTRB(0,pi/2,true,_paint);
canvas.drawRRect(
    RRect.fromLTRBR(0,size.height,Radius.circular(10)),_paint)
///
/// 绘制花骨朵
///
_drawFlower(Canvas canvas,Size size) {
  //将花变为红色
  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);
  }
  //绘制线
  _paint.style = PaintingStyle.stroke;
  _paint.color = _strokeColor;
  //去掉最后2个点,最后2个点为了绘制红色
  var points = flowerPaths.sublist(0,max(0,flowerPaths.length - 2));
  canvas.drawPoints(PointMode.polygon,_paint);
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68353.html