在Dart中创建用于移动应用程序的“签名区域"(颤振) [英] Create `signature area` for mobile app in dart (flutter)
本文介绍了在Dart中创建用于移动应用程序的“签名区域"(颤振)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建一个像此处这样的签名区域,移动应用!
i want to create a signature area like Here with dart in a mobile app!
我尝试使用 CustomPaint 类...但是它不起作用.
I tried to use the CustomPaint class ... But it doesn't work.
有人可以帮助我吗?
推荐答案
您可以使用 GestureDetector
记录触摸和 CustomPaint
在屏幕上绘制.这里有一些提示:
You can create a signature area using GestureDetector
to record touches and CustomPaint
to draw on the screen. Here are a few tips:
- 使用
RenderBox.globalToLocal
来转换DragUpdateDetails
flutter/widgets/GestureDetector/onPanUpdate.html"rel =" noreferrer>GestureDetector.onPanUpdate
转换为相对坐标 - 使用
GestureDetector.onPanEnd
手势处理程序记录之间的间隔中风. - 更改相同的
List
不会自动触发重新绘制,因为 c7> 构造函数参数相同.您可以通过在每次提供新点时创建一个新的List
来触发重新绘制. - 使用
Canvas.drawLine
在两个签名的每个记录点.
- Use
RenderBox.globalToLocal
to convert theDragUpdateDetails
provided byGestureDetector.onPanUpdate
into relative coordinates - Use a
GestureDetector.onPanEnd
gesture handler to record the breaks between strokes. - Mutating the same
List
won't automatically trigger a repaint because theCustomPainter
constructor arguments are the same. You can trigger a repaint by creating a newList
each time a new point is provided. - Use
Canvas.drawLine
to draw a rounded line between each of the recorded points of the signature.
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()));
这篇关于在Dart中创建用于移动应用程序的“签名区域"(颤振)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文