Flutter高级图像绘制插件image_painter_extended的使用

这是一个允许用户在图像上进行绘制的Flutter包。它是painter2包的一个扩展，具有缩放和绘制功能。

特性

该组件支持以下功能：

• 更改前景色和背景色
• 设置背景图像
• 更改绘制路径的粗细
• 导出你的绘画为PNG格式
• 撤销/重做绘制路径
• 清除整个绘图
• 缩放和平移图像

安装

在你的Flutter项目的pubspec.yaml文件中添加依赖：

dependencies:
  image_painter_extended: any

然后导入它：

import 'package:image_painter_extended/image_painter_extended.dart';

使用

为了使用这个插件，首先创建一个控制器并可选地创建一个键：

GlobalKey<ImagePainterState> painterKey = GlobalKey<ImagePainterState>();
PainterController controller = PainterController();
controller.thickness = 5.0; // 设置画笔的粗细，默认为1.0
controller.backgroundColor = Colors.green; // 背景颜色在设置了背景图像时会被忽略
controller.backgroundImage = Image.network(...); // 设置背景图像。你可以像平常一样加载图像：从资源文件、网络或内存中加载。

该控制器将处理所有绘制空间的属性。键用于刷新小部件的状态，如果你决定以编程方式平移和缩放图像。

然后，为了显示绘制区域，创建一个内联的ImagePainter小部件，并给它一个之前创建的控制器的引用：

ImagePainter(controller, key: painterKey)

通过导出绘画为PNG格式，你会得到一个表示最终文件字节的Uint8List对象：

await controller.getPNGBytes();

你还可以使用getPathBytes()函数获取路径而不包含图像。

库本身不处理保存最终图像。

完整示例

下面是一个完整的示例代码，展示了如何使用image_painter_extended插件。

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_painter_extended/image_painter_extended.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  [@override](/user/override)
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  Image bg = Image.asset("lib/assets/img.jpg", fit: BoxFit.cover);
  GlobalKey<ImagePainterState> painterKey = GlobalKey<ImagePainterState>();

  double scale = 1;
  double translateX = 0;
  double translateY = 0;
  String savepath = "";

  bool buttonCOntrol = false;
  bool isDrawmode = true;
  PainterController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = _newController();
  }

  PainterController _newController() {
    PainterController controller = new PainterController();
    controller.backgroundImage = bg;
    controller.thickness = 5.0;
    controller.backgroundColor = Colors.transparent;
    return controller;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Container(
          child: Center(
              child: AspectRatio(
                  aspectRatio: 1.0,
                  child: ImagePainter(
                    _controller,
                    key: painterKey,
                  ))),
        ),
        Text(savepath),
        Expanded(
            child: SingleChildScrollView(
                child: Column(children: [
          Text("如何控制"),
          howTOControl(),
          Text("绘制选项"),
          basicOptions(),
          !buttonCOntrol ? Text("模式") : Container(),
          !buttonCOntrol ? switchOption() : Container(),
          buttonCOntrol ? Text("控制按钮") : Container(),
          buttonCOntrol ? optionsBUtton() : Container(),
        ]))),
      ],
    ));
  }

  Widget howTOControl() {
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text("按钮模式"),
        FlutterSwitch(
          value: buttonCOntrol,
          onToggle: (val) {
            setState(() {
              buttonCOntrol = val;
              isDrawmode = true;
            });
            _controller.drawMode = true;
            translateX = 0;
            translateY = 0;
            scale = 1;
            transformMatrix();
          },
        ),
      ],
    );
  }

  Widget switchOption() {
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text("变换模式"),
        FlutterSwitch(
          value: isDrawmode,
          inactiveColor: Colors.green,
          onToggle: (val) {
            setState(() {
              isDrawmode = val;
            });
            _controller.drawMode = val;
            painterKey.currentState.setState(() {});
          },
        ),
        Text("绘制模式"),
      ],
    );
  }

  Widget basicOptions() {
    return Wrap(
      spacing: 10,
      children: [
        ElevatedButton(
            onPressed: () {
              _controller.undo();
            },
            child: Text("撤销")),
        ElevatedButton(
            onPressed: () {
              _controller.redo();
            },
            child: Text("重做")),
        ElevatedButton(
            onPressed: () async {
              final String path = (await getApplicationDocumentsDirectory()).path;
              setState(() {
                savepath = "Saved to " + path;
              });

              print(path);
              // 仅保存路径
              Uint8List img = await _controller.getPathBytes();
              File('$path/image1.png').writeAsBytes(img);
            },
            child: Text("保存路径")),
        ElevatedButton(
            onPressed: () async {
              final String path = (await getApplicationDocumentsDirectory()).path;
              setState(() {
                savepath = "Saved to " + path;
              });

              translateX = 0;
              translateY = 0;
              scale = 1;
              transformMatrix();
              await Future.delayed(Duration(milliseconds: 100), () {});

              print(path);
              // 保存完整图像
              Uint8List pngBytes = await _controller.getPNGBytes();
              File('$path/image2.png').writeAsBytes(pngBytes);
            },
            child: Text("保存图像")),
        ElevatedButton(
            onPressed: () {
              _controller.clear();
            },
            child: Text("清除")),
      ],
    );
  }

  Widget optionsBUtton() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                onPressed: () {
                  if (scale < 2.5) {
                    scale += 0.5;
                    transformMatrix();
                  }
                },
                child: Text("+")),
            ElevatedButton(
                onPressed: () {
                  if (scale > 1) {
                    scale -= 0.5;
                    transformMatrix();
                  }
                },
                child: Text("-")),
            ElevatedButton(
                onPressed: () {
                  translateX = 0;
                  translateY = 0;
                  scale = 1;
                  transformMatrix();
                },
                child: Text("重置变换"))
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
                onPressed: () {
                  translateY += 2;
                  transformMatrix();
                },
                child: Text("向上")),
            ElevatedButton(
                onPressed: () {
                  translateY -= 2;
                  transformMatrix();
                },
                child: Text("向下")),
            ElevatedButton(
                onPressed: () {
                  translateX -= 2;
                  transformMatrix();
                },
                child: Text("向左")),
            ElevatedButton(
                onPressed: () {
                  translateX += 2;
                  transformMatrix();
                },
                child: Text("向右"))
          ],
        ),
      ],
    );
  }

  void transformMatrix() {
    _controller.interactionController.value = Matrix4(
      scale,
      0,
      0,
      0,
      0,
      scale,
      0,
      0,
      0,
      0,
      1,
      0,
      translateX,
      translateY,
      0,
      1,
    );
    painterKey.currentState.setState(() {});
  }
}