美文网首页flutter
学习一下Paint、Canvas--绘制网格

学习一下Paint、Canvas--绘制网格

作者: 卢融霜 | 来源:发表于2021-09-22 13:59 被阅读0次

    效果图

    image.png

    绘制网格

      Paint mPaint;
      BuildContext context;
    
      StarView(this.context) {
        mPaint = Paint();
        mPaint.style = PaintingStyle.stroke;
        mPaint.color = Colors.blue;
        mPaint.isAntiAlias = true;
      }
    
    class StarView extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
    
      var winSize = MediaQuery.of(context).size;
        //绘制网格
        canvas.drawPath(girdPath(40, winSize), mPaint);
      }
    
      @override
      bool shouldRepaint(covariant CustomPainter oldDelegate) {
        return true;
      }
    
      /// 绘制网格
      /// @param setp 边长
      /// @param winSize  屏幕宽高
      Path girdPath(int setp, Size winSize) {
        Path path = Path();
        for (int i = 0;
            i < (winSize.height - MediaQuery.of(context).padding.top) / setp;
            i++) {
          //绘制横线
          path.moveTo(0, setp * i.toDouble());
          path.lineTo(winSize.width, setp * i.toDouble());
        }
    
        for (int i = 0; i < winSize.width / setp; i++) {
          //绘制竖线
          path.moveTo(setp * i.toDouble(), 0);
          path.lineTo(setp * i.toDouble(), winSize.height);
        }
        path.close();
        return path;
      }
    
    }
    

    展示

      return Scaffold(
            body: CustomPaint(
          painter: StarView(context),
        ));
    

    相关文章

      网友评论

        本文标题:学习一下Paint、Canvas--绘制网格

        本文链接:https://www.haomeiwen.com/subject/wgawgltx.html