<分区>
我想创建一个像Here这样的签名区在移动应用程序中使用 Dart !
我尝试使用 CustomPaint类 ... 但它不起作用。
谁能帮帮我?
最佳答案
您可以使用 GestureDetector
创建签名区记录触摸和CustomPaint
在屏幕上绘制。这里有一些提示:
RenderBox.globalToLocal
转换 DragUpdateDetails
由 GestureDetector.onPanUpdate
提供成相对坐标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 Stack(
children: [
GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
setState(() {
_points = new List.from(_points)..add(localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),
),
CustomPaint(painter: SignaturePainter(_points), size: Size.infinite),
],
);
}
}
class DemoApp extends StatelessWidget {
Widget build(BuildContext context) => new Scaffold(body: new Signature());
}
void main() => runApp(new MaterialApp(home: new DemoApp()));
关于mobile - 在 Dart 中为移动应用创建 `signature area` (flutter),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46241071/
相关文章:
mobile - 为什么 Doxygen 对手机如此不友好?
android - 谷歌浏览器(手机)在下载文件时进入无限循环打开新标签
xcode - 架构arm64的 undefined symbol : Azure mobile Services (o)
android - 使用 x.509 android 对 XML 进行签名
jquery - 如何在支持触摸和指针事件的设备上处理触摸事件,并且菜单中的子项不是父菜单的子项
flutter - 在flutter中使用 `Draggable`时如何设置反馈和指针之间的偏移量?