flutter canvas 画折线图及下方阴影渐变

最新推荐文章于 2024-05-16 11:25:57 发布

竹北

最新推荐文章于 2024-05-16 11:25:57 发布

阅读量1.7k

点赞数 3

分类专栏： flutter canvas 文章标签： flutter canvas 大前端

本文链接：https://blog.youkuaiyun.com/weixin_45029658/article/details/120325909

版权

本文介绍了如何使用Flutter的Canvas API来绘制折线图，并添加下方的阴影渐变效果。首先，通过定义点集并利用drawPoints方法以PointMode.polygon模式画出折线。接着，绘制一个包含折线的矩形，为应用渐变做准备。然后，绘制折线路径，并进行路径切割。虽然这种方法较为繁琐，但可以直接在新的路由中使用。作者期待有更简便的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是折线图，折线图是由点集构成，所以先整个点集

 final dot=[
      Offset(0, 0),
      Offset(40, -40),
      Offset(80, -20),
      Offset(120, -100),
      Offset(140, -20),
      Offset(180, -40),
      Offset(190, 0),
    ];

然后用drawpoint这个方法画出折线，点模式选择PointMode.polyon

    canvas.drawPoints(PointMode.polygon, 
    dot, 
    paint..strokeWidth=2
    ..color= Color.fromRGBO(104, 232, 190, 1),

再画一个能包裹住这个折线图的长方形，因为渐变要加在长方形上，（应该有好点的方法，但我没有找到），渐变的点位也要

   var rect1= Rect.fromLTRB(0, -200, 190, 0);
    var colors = [
      Color.fromRGBO(104, 232, 190, 1),
      Color.fromRGBO(104, 232, 190, 0.8),
      Color.fromRGBO(104, 232, 190, 0.6),
      Color.fromRGBO(104, 232, 190, 0.4),
      Color.fromRGBO(104, 232, 190, 0.3),
      Color.fromRGBO(104, 232, 190, 0.2),
      Color.fromRGBO(104, 232, 190, 0.1),
    ];
    var pos = [1.0 / 7, 2.0

最低0.47元/天解锁文章