在飞镖(扑翼)中为移动应用程序创建`签名区域'
答
您可以使用GestureDetector
创建一个签名区域来记录触摸,并使用CustomPaint
在屏幕上绘制。这里有几个技巧:
- 使用
RenderBox.globalToLocal
由GestureDetector.onPanUpdate
提供的DragUpdateDetails
转换成相对坐标 - 使用
GestureDetector.onPanEnd
手势处理机记录笔画之间的断裂。 - 突变
List
将不会自动触发重绘因为CustomPainter
构造函数参数是相同的。每次提供新点时,都可以通过创建新的List
来触发重绘。 - 使用
Canvas.drawLine
在签名的每个记录点之间绘制一条圆形线。
import 'package:flutter/material.dart';
class SignaturePainter extends CustomPainter {
SignaturePainter(this.points);
final List<Offset> points;
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.black
..strokeCap = StrokeCap.round
..strokeWidth = 5.0;
for (int i = 0; i < points.length - 1; i++) {
if (points[i] != null && points[i + 1] != null)
canvas.drawLine(points[i], points[i + 1], paint);
}
}
bool shouldRepaint(SignaturePainter other) => other.points != points;
}
class Signature extends StatefulWidget {
SignatureState createState() => new SignatureState();
}
class SignatureState extends State<Signature> {
List<Offset> _points = <Offset>[];
Widget build(BuildContext context) {
return new GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
_points = new List.from(_points)..add(localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),
child: new CustomPaint(painter: new SignaturePainter(_points)),
);
}
}
class DemoApp extends StatelessWidget {
Widget build(BuildContext context) => new Scaffold(body: new Signature());
}
void main() => runApp(new MaterialApp(home: new DemoApp()));
+0
此代码似乎不再适用于颤动的测试版。我尝试过仿真器和真实设备(Pixel 2),但没有画在屏幕上。 – xrd
我们不鼓励的帖子,简单地陈述问题断章取义,并期望社会来解决它。假设你试图自己解决它并陷入困境,那么如果你写下了你的想法和你无法想象的东西,这可能会有所帮助。添加你的代码的[mcve],并描述你有什么问题。 _“但它不起作用”_不是很有帮助。 – Cerbrus
你的程序[不起作用](http://importblogkit.com/2015/07/does-not-work/)? –
删除选民可以解释他们的投票吗?在这里发布的答案似乎相当有帮助.... – user000001