flutter

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

2021-09-22  本文已影响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),
    ));
上一篇 下一篇

猜你喜欢

热点阅读