flutter-画板签名,并生成图片

今天实现一个可以签名的画板功能,并截屏生成图片,如下:

WeChat54097f1f3b7ac3fe795bec895e4767ec.png

import 'dart:typed_data';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:pipeline_flutter/common_widget/appbar_widget.dart';
import 'package:pipeline_flutter/tools/const_config.dart';
import 'package:pipeline_flutter/tools/select_file_util.dart';

class SignNamePage extends StatefulWidget {
  @override
  _SignNamePageState createState() => _SignNamePageState();
}

class _SignNamePageState extends State<SignNamePage> {
  GlobalKey key = GlobalKey();
  PointerEvent? _event;
  List<Offset?> _points = <Offset>[];
  Color selectColor = Colors.red;
  Uint8List? _postBytes;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        Container(
          color: TKConstantConfig.MAINCOLOR,
          child: CommonAppBar("签名", () {
            Navigator.pop(context);
          }, rightWidget: _rightNavWidget()),
        ),
        RepaintBoundary(
          key: key,
          child: Stack(children: [
            Listener(
              child: Container(
                alignment: Alignment.center,
                color: Colors.white,
                width: ScreenUtil().screenWidth,
                height: ScreenUtil().screenWidth,
                // child: Text(_event?.toString() ?? "",
                //     style: TextStyle(color: Colors.black)),
              ),
              onPointerDown: (PointerDownEvent event) {
                setState(() {
                  _event = event;
                  _points.add(_event?.localPosition ?? Offset.zero);
                });
              },
              onPointerMove: (PointerMoveEvent event) {
                setState(() {
                  _event = event;
                  _points.add(_event?.localPosition ?? Offset.zero);
                });
              },
              onPointerUp: (PointerUpEvent event) {
                setState(() {
                  _event = event;
                  _points.add(Offset.zero);
                });
              },
            ),
            Positioned(
                left: (_event != null ? _event?.position.dx : 0),
                top: (_event != null
                    ? (_event?.position.dy ?? 0) -
                        TKConstantConfig.appbarHeight -
                        50
                    : 0),
                child: Container(
                  width: 1,
                  height: 1,
                  color: Colors.black,
                )),
            CustomPaint(painter: new SignaturePainter(_points))
          ]),
        ),
        SizedBox(height: 20),
        GestureDetector(
            onTap: () {
              setState(() {
                _points = [];
              });
            },
            child: Container(
              height: 30,
              child: Text(
                "清空重写",
                style: TextStyle(fontSize: 15.sp),
              ),
            )),
      ]),
    );
  }

  Widget _rightNavWidget() {
    return GestureDetector(
      onTap: () {
        _saveSignPic();
      },
      child: Container(
          padding: EdgeInsets.only(right: 15.w),
          child: Text(
            "保存",
            style: TextStyle(
                color: Color(0xFFFFFFFF),
                fontSize: 16.sp,
                fontWeight: FontWeight.normal),
          )),
    );
  }

///截图保存至相册并上传至服务器, 拿到图片网络地址,退出页面
  _saveSignPic() async {
    RenderRepaintBoundary boundary =
        key.currentContext!.findRenderObject() as RenderRepaintBoundary;
    var image = await boundary.toImage(pixelRatio: 3.0);
    ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
    _postBytes = byteData?.buffer.asUint8List();
    //保存到相册
    var result = await ImageGallerySaver.saveImage(_postBytes!);
    String path = result['filePath'].replaceAll("file://", '');
    if (result != null && result != "") {
    //上传到服务器
      SelectFileUtil.uploadFile(
          path, "sign_${DateTime.now().microsecondsSinceEpoch}.png",
          successCallback: (url) {
     //拿到服务器返回图片地址,退出页面
        if (url != null && url.isNotEmpty) {
          if (!mounted) return;
          Navigator.of(context).pop(url);
        }
      });
    }
  }
}

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);

  final List<Offset?> points;
  final Color paintColor = Colors.black;

  Paint myPaint = new Paint();

  void paint(Canvas canvas, Size size) {
    myPaint.strokeCap = StrokeCap.round;
    myPaint.strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null &&
          points[i + 1] != null &&
          points[i] != Offset.zero &&
          points[i + 1] != Offset.zero) {
        canvas.drawLine(points[i]!, points[i + 1]!, myPaint);
      }
    }
  }

  bool shouldRepaint(SignaturePainter other) => other.points != points;
}

有问题随时交流, 对你有帮助的话, 帮忙点点小心心哦~