在飛鏢（撲翼）中爲移動應用程序創建`簽名區域'

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()));