在飞镖（扑翼）中为移动应用程序创建`签名区域'

Question

我想用移动应用程序中的飞镖创建像Here这样的签名区域！

我试图使用CustomPaint类...但它不起作用。

任何人都可以帮助我吗？

Answer 1

您可以使用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()));