flutter 绘制的线条始终以圆形结束

xxhby3vn  于 2022-12-27  发布在  Flutter
关注(0)|答案(1)|浏览(105)

我正在尝试使用CustomPainter制作一个可以在上面绘图的板,我添加了逻辑来绘制线条和圆圈,但我不明白为什么总是以圆圈结束每条线条,我希望线条是正常的线条,下面是绘制后线条外观的图片

这里是我存储位置的地方

final _points = <Offset>[];

这是颜料

@override
  void initState() {
    // TODO:  initState
    super.initState();
    _paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 8;
  }

这是我小部件

body: Center(
            child: GestureDetector(
                onPanDown: (details) {
                  setState(() {
                    _points.add(details.localPosition);

                  });
                },
                onPanUpdate: (details) {
                  setState(() {
                    _points.add(details.localPosition);
                  });
                },
                onPanEnd: (details) {
                  setState(() {
                    _points.add(Offset.infinite);

                  });
                },
                child: CustomPaint(
                  painter: DrawingPainter(_points, _paint),
                  child: Container(),
                ))),

这是我创建的类DrawingPainter上的绘制方法,它从CustomPainter扩展而来

@override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < points.length - 1; i++) {
      if ((i > 0 && points[i - 1].isInfinite == points[i].isInfinite) &&
          points[i].isInfinite == points[i + 1].isInfinite) {
        canvas.drawLine(points[i], points[i + 1], _paint);
      } else if (!points[i].isInfinite && points[i + 1].isInfinite) {
        canvas.drawCircle(points[i], 8, _paint);
      }
    }
  }
2izufjch

2izufjch1#

您的问题在此行中:

canvas.drawCircle(points[i], 8, _paint);

drawCircle获取radius来绘制它,所以_paint strokeWidth是8,所以你的drawCircle的半径应该是4来绘制与你的stroke相等的Circle,所以把它改为:

canvas.drawCircle(points[i], _paint.strokeWidth/2, _paint);

相关问题