我正在尝试使用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);
}
}
}
1条答案
按热度按时间2izufjch1#
您的问题在此行中:
drawCircle
获取radius
来绘制它,所以_paint
strokeWidth是8
,所以你的drawCircle的半径应该是4
来绘制与你的stroke相等的Circle,所以把它改为: