问题描述
我有一个简单的CustomPaint / CustomPainter,它绘制了一个圆的段(下面的代码)。我已经读到我不能使用GestureDetector,因为它不是一个合适的小部件,所以获取输入的最佳方法是什么?
I have a simple CustomPaint/CustomPainter that draws a segment of a circle (code below). I've read that I can't use GestureDetector because it isn't a proper widget, so what's the best way to get input?
我会有很多东西分段在一起,所以我需要精确像素的触摸位置。
I'll have a bunch of segments together so I need pixel-accurate touch location.
我想到过两种可能性:
- 将画家放入SizedBox中并获取触摸坐标,然后手动计算它是否在路径内。但这将使很多代码加倍。
- 使用Material类和自定义BorderShape。
我的CustomPainter:
My CustomPainter:
class _SegmentPainter extends CustomPainter {
static const offset = -pi/2;
double start;
double end;
double innerRadius;
double outerRadius;
Color color;
_SegmentPainter(this.start, this.end, {this.innerRadius = 0.0, this.outerRadius, this.color});
@override bool shouldRepaint(CustomPainter oldDelegate) => this == oldDelegate;
@override bool shouldRebuildSemantics(CustomPainter oldDelegate) => this == oldDelegate;
@override
void paint(Canvas canvas, Size size) {
Path path = new Path();
path.arcTo(Rect.fromCircle(center: new Offset(0.0, 0.0), radius: outerRadius), offset + start, end-start, true);
path.relativeLineTo(-cos(offset + end)*(outerRadius-innerRadius), -sin(offset + end)*(outerRadius-innerRadius));
path.arcTo(Rect.fromCircle(center: new Offset(0.0, 0.0), radius: innerRadius), offset + end, start-end, false);
path.close();
canvas.drawPath(path, new Paint()..color = color..style = PaintingStyle.fill);
}
}
推荐答案
I同意您必须将CustomPainter放入具有大小的窗口小部件中。它可能是一个SizedBox,所以我在这里使用了它。幸运的是,您无需进行手动命中测试,因为CustomPainter只需进行一些重构即可为您处理。首先要注意的是,无需在每个paint()上重建路径-可以在构造函数中构建路径。
I agree that you have to put the CustomPainter inside a widget that has size. It could be a SizedBox, so I've used that here. Luckily, you don't need to do a manual hit test as the CustomPainter can handle that for you with a little refactoring. The first thing to notice is that path doesn't need to be reconstructed on each paint() - it can be built in the constructor. This allows CustomPainter's hitTest to simply ask whether the tap is inside or outside the path.
class _SegmentPainter extends CustomPainter {
static const offset = -pi / 2;
double start;
double end;
double innerRadius;
double outerRadius;
Color color;
Path path;
_SegmentPainter(
this.start, this.end, this.innerRadius, this.outerRadius, this.color) {
path = new Path()
..arcTo(
Rect.fromCircle(center: new Offset(0.0, 0.0), radius: outerRadius),
offset + start,
end - start,
true)
..relativeLineTo(-cos(offset + end) * (outerRadius - innerRadius),
-sin(offset + end) * (outerRadius - innerRadius))
..arcTo(
Rect.fromCircle(center: new Offset(0.0, 0.0), radius: innerRadius),
offset + end,
start - end,
false)
..close();
}
@override
bool shouldRepaint(_SegmentPainter oldDelegate) {
return oldDelegate.start != start ||
oldDelegate.end != end ||
oldDelegate.innerRadius != innerRadius ||
oldDelegate.outerRadius != outerRadius ||
oldDelegate.color != color;
}
@override
bool shouldRebuildSemantics(_SegmentPainter oldDelegate) => true;
@override
void paint(Canvas canvas, Size size) {
canvas.drawPath(
path,
new Paint()
..color = color
..style = PaintingStyle.fill);
}
@override
bool hitTest(Offset position) {
return path.contains(position);
}
}
class SegmentWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: () => print('tap'),
child: new SizedBox(
width: 250.0,
height: 250.0,
child: new CustomPaint(
painter: new _SegmentPainter(0.0, 2.8, 150.0, 200.0, Colors.orange),
),
),
);
}
}
我用过Dart ..
(级联)语法来清理路径。 (我认为您的应该...
测试被否定了。)我添加了一个StatelessWidget,作为 SizedBox
的主页和 GestureDetector
。
I've used Dart ..
(cascade) syntax to clean up the path. (I think your should...
tests were negated.) I added a StatelessWidget just as a home for the SizedBox
and GestureDetector
.
这篇关于Flutter-在CustomPainters上获得触摸输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!