Flutter图片裁剪插件new_image_crop的使用

本插件是一个图像编辑器，提供了x轴、y轴、z轴旋转偏移量调整，整体90度旋转，上下翻转、左右翻转等功能。它还支持多指缩放功能。由于该插件完全用Dart编写，因此不依赖任何移动平台包。因此，它可以在所有受Flutter支持的平台上运行，包括移动端、Web端和桌面端等。

初始化配置参数

在创建编辑框之前，可以进行一些初始配置参数设置。

final editorConfig = DataEditorConfig(
	// 编辑区域背景颜色
    bgColor: Colors.black,

	// 配置编辑区域的内边距
    cropRectPadding: const EdgeInsets.all(20.0),

    // 配置视图查找器四个角的长度
    cornerLength: 30,

    // 配置视图查找器四个角的宽度
    cornerWidth: 4,

    // 配置视图查找器四个角的颜色
    cornerColor: Colors.blue,

    // 配置视图查找器四个角的点击响应区域大小
    cornerHitTestSize: const Size(40, 40),

    // 配置视图查找器四条边的颜色
    lineColor: Colors.white,

    // 配置视图查找器四条边的宽度
    lineWidth: 2,

    // 配置视图查找器边框四条边的点击响应宽度
    lineHitTestWidth: 40,

    // 配置视图查找器九宫格虚线每个单元的长度
    dottedLength: 2,

    // 配置视图查找器九宫格虚线的颜色
    dottedColor: Colors.white,

    // 配置视图查找器外部部分的颜色
    editorMaskColorHandler: (context, isTouching) {
      return Colors.black;
    });

使用控制器操作编辑图形

通过控制器来操作编辑图形。

final controller = ImageEditorController();

	// 减少x轴旋转角度
	controller.reduceRotateXAngle();

	// 增加x轴旋转角度
	controller.addRotateXAngle();

	// 减少y轴旋转角度
	controller.reduceRotateYAngle();

	// 增加y轴旋转角度
	controller.addRotateYAngle();

	// 增加z轴旋转角度
	controller.addRotateAngle();

	// 减少z轴旋转角度
	controller.reduceRotateAngle();

	// 增加90度旋转角度
	controller.addRotateAngle90();

	// 减少90度旋转角度
	controller.reduceRotateAngle90();

	// 缩小
	controller.reduceScaleRatio();

	// 放大
	controller.addScaleRatio();

	// 上下翻转
	controller.upsideDown();

	// 左右翻转
	controller.turnAround();

	// 确认裁剪
	controller.tailor();

	// 恢复原始状态
	controller.restore();

创建编辑框

使用以下代码创建一个编辑框：

Expanded(
	child: ImageEditorPlane(
		// 接收图像数据 ByteData
		imageData: imageData,
		controller: controller,
		editorConfig: editorConfig,
		// 监听裁剪结果 Image, ByteData, Size
		onTailorResult: (image, byteData, size) {
			print('裁剪结果');
			_testToShowScreenShotDialog(
				context: context, byteData: byteData);
		},
	),
),

完整示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:new_image_crop/example_demo.dart';
import 'package:new_image_crop/tools/assert_utils.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '照片编辑器演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '照片编辑器演示'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GestureDetector(
                onTap: () async {
                  // 点击编辑
                  ExampleDemo.show(
                      context: context,
                      imageData: await AssertUtils.readImageByByteData(
                          'assets/images/cat.png'));
                },
                child: Container(
                  width: double.maxFinite,
                  alignment: Alignment.center,
                  child: Container(
                    width: 160,
                    height: 60,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.grey.withOpacity(0.8),
                      borderRadius: const BorderRadius.all(Radius.circular(10)),
                    ),
                    child: const Text('点击编辑'),
                  ),
                ))
          ],
        ),
      ),
    );
  }
}