如何从自定义画图中保存图片?

我想做一个简单的应用程序,根据用户的输入进行绘制。在完成基本功能后,我遇到了一个问题,我无法保存图片。我搜索了一下,发现我应该使用PictureRecorder(),但我不能让它工作(是我的错,不是bug)。所以我想请教你,我应该如何实现PictureRecorder并使用Custom Paint将图像保存到磁盘上。

这里的代码。

import 'package:flutter/services.dart';
import 'dart:ui' as ui;

class Painter extends StatefulWidget {
  static String id = 'Painter';
  @override
  _PainterState createState() => _PainterState();
}

class _PainterState extends State<Painter> {
  final recorder = new ui.PictureRecorder();
  double canvasWidth = 1200;
  double canvasHeight = 1000;
  double SecondWidth = 0;
  double SecondHeight = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(
        title: Center(
          child: Text(
            '⚡  ⚡',
            style: TextStyle(color: Colors.blue),
          ),
        ),
        backgroundColor: Colors.black26,
      ),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(10.0),
          child: ListView(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('⚡  ⚡'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none, hintText: 'title'),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Canvas  Height'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          onChanged: (value) {
                            setState(() {
                              canvasHeight = double.parse(value);
                            });
                          },
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Canvas. Height'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Canvas. Width'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          onChanged: (value) {
                            setState(() {
                              canvasWidth = double.parse(value);
                            });
                            print(canvasWidth);
                          },
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Canvas. Width'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Second. height'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Second. height'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                          onChanged: (value) {
                            setState(() {
                              SecondHeight = double.parse(value);
                            });
                          },
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Secon. width'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Second. Width'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                          onChanged: (value) {
                            setState(() {
                              SecondWidth = double.parse(value);
                            });
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              RaisedButton(
                onPressed: () async {
                  final picture = recorder.endRecording();
                  final img = picture.toImage(200, 200);
                  final pngBytes = await img.toByteData(format: new ui.EncodingFormat.png());
                },
                child: Text('Save Image'),
              ),
              FittedBox(
                child: SizedBox(
                  width: canvasWidth,
                  height: canvasHeight,
                  child: Container(
                    color: Colors.yellow,
                    child: CustomPaint(
                      painter: BoxInABox(
                        canvasrecorder: recorder,
                        width: canvasWidth,
                        height: canvasHeight,
                        iHeight: SecondHeight,
                        iWidth: SecondWidth,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class BoxInABox extends CustomPainter {
  @override
  BoxInABox({this.width, this.height, this.iWidth, this.iHeight, this.canvasrecorder});

  final double width;
  final double height;
  final double iWidth;
  final double iHeight;
  final canvasrecorder;

  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0
      ..color = Colors.indigo;

    canvas.drawRect(
        Rect.fromCenter(
          height: height,
          width: width,
          center: Offset(
            width / 2,
            height / 2,
          ),
        ),
        Paint()..color = Colors.green);

    canvas.drawRect(
        Rect.fromCenter(
          height: iHeight,
          width: iWidth,
          center: Offset(
            width / 2,
            height / 2,
          ),
        ),
        Paint()..color = Colors.red);
  }

  @override
  bool shouldRepaint(BoxInABox oldDelegate) => true;
}

先谢谢你

编辑:更新了代码,包括我实现记录器的失败尝试,P.s它给了我一个’错误’的错误。

‘toByteData’方法没有为’Future’类定义。 (undefined_method at [flutterappquesion] lib/main.dart:152))’和错误。未定义类’ui.EncodingFormat’。(undefined_class at [flutterappquesion] lib/main.dart:152)’ 和错误:未定义类’ui.EncodingFormat’。

解决方案:

只要使用一个 PictureRecorder 在你 Canvas.

PictureRecorder pictureRecorder = PictureRecorder();
Canvas canvas = Canvas(pictureRecorder);

// Paint your canvas as you want

Picture picture = pictureRecorder.endRecording();
Image image = await picture.toImage(yourWidth, yourHeight);

给TA打赏
共{{data.count}}人
人已打赏
未分类

当访问alpnProtocol属性时,Node.js req与req.stream.session之间的对比。

2022-9-8 3:18:41

未分类

如何在MySQL中找到特定用户使用的总空间?

2022-9-8 3:29:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索