在飞镖（颤振）中为移动应用创建“签名区域”[关闭]

Posted 2023-02-23

【中文标题】在飞镖（颤振）中为移动应用创建“签名区域”[关闭]

【英文标题】：Create `signature area` for mobile app in dart (flutter) [closed]

【发布时间】：2018-02-24 17:37:50

【问题描述】：

我想在移动应用中使用 dart 创建一个签名区域，例如 Here！

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

谁能帮帮我？

【问题讨论】：

我们不鼓励发表断章取义的帖子，并希望社区能够解决它。假设您尝试自己解决并陷入困境，如果您写下您的想法和您无法弄清楚的内容，这可能会有所帮助。在您的代码中添加minimal reproducible example，并描述您遇到的问题。 “但它不起作用”不是很有帮助。

你的程序doesn't work?

删除投票者能否解释他们的投票？此处发布的答案似乎很有帮助....

The Meta effect, @user000001。鉴于高质量的答案，我同意删除是完全没有根据的。如果它仍然被删除，请标记它。

【参考方案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 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()));

【讨论】：

这段代码似乎不再适用于 Flutter 的 beta 通道。我在模拟器和真实设备（Pixel 2）上进行了尝试，但屏幕上没有任何内容。

@xrd 我稍微改变了结构，请在此处查看要点：gist.github.com/kitttn/408aa1264b82ae8ce1c0098a270e4f52

@xrd 请注意，您应该在 IDE / 分析器中启用 Dart 2 支持。或者只是在子构造函数调用中手动添加new。

@NikitaKraev 谢谢。我怎样才能让它更高效？如果我继续绘画，我会失去 60 fps 并进入 5 fps 并且变得非常慢。有没有办法让它更高效。我创建更像是一个绘图应用程序。谢谢。

我不得不切换 GestureDetector 和 CustomPaint，否则 onPanUpdate 没有被触发