先看效果

不规则裁剪.gif

canvas与手势组合实现不规则裁剪

功能主要由三个部分组成，分别是canvas的CustomPainter类、GestureDetector的三个手势还有CustomClipper类

CustomPainter

CustomPainter是个抽象类，使用的话需要我们自己创建一个类来继承CustomPainter，子类主要重写两个方法 paint方法和shouldRepaint，我们在paint方法内初始化画笔后，使用canvas的绘制方法来绘制图形，这里我们使用drawPoints方法传入的points数组内五个坐标就是我们要绘制的矩形的四个点，注意数组内第一个点坐标要与最后一个相同，不然会导致第一个点与第四个点无法画线连接。shouldRepaint方法用于判断是否需要重绘，这里我们设置为true，因为手势拖动过程中需要不断重绘。

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter_lfh_scanner/apps/app_theme.dart';

class ClipperPainter extends CustomPainter {
  final List<Offset> movePoints;
  ClipperPainter(this.movePoints);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = AppTheme.mainColor
      ..isAntiAlias = true
      ..strokeWidth = 2.0
      ..strokeJoin = StrokeJoin.bevel;

    List<Offset> points = [
      movePoints[0],
      movePoints[1],
      movePoints[2],
      movePoints[3],
      movePoints[0]
    ];

    //四个点连线组成包围图片的四个边
    canvas.drawPoints(ui.PointMode.polygon, points, paint);
    //四个点的操作圆点
    paint.color = AppTheme.mainColor;
    double radius = 10;
    canvas.drawCircle(movePoints[0], radius, paint);
    canvas.drawCircle(movePoints[1], radius, paint);
    canvas.drawCircle(movePoints[2], radius, paint);
    canvas.drawCircle(movePoints[3], radius, paint);
  }

  @override
  bool shouldRepaint(ClipperPainter oldDelegate) {
    return true;
  }
}

拖动手势

四个点的拖动主要用到三个手势方法 onPanDown、onPanUpdate和onPanEnd。

划分拖动区域

以图片中心点为坐标建立坐标系，将图片划分为四个象限

enum DownPosition {
  leftUp, //第二象限点
  rightUp, //第一象限点
  leftDown, //第四象限点
  rightDown, //第三象限点
}

onPanDown

手指下压触摸到屏幕时确定由哪一象限内的点来响应这次拖动

  onPanDown(DragDownDetails details) {
    RenderBox referenceBox = context.findRenderObject() as RenderBox;
    Offset localPosition = referenceBox.globalToLocal(details.globalPosition);
    localPosition = Offset(localPosition.dx, localPosition.dy - 90.h);
    setState(() {
      double radius = 20.w;

      if (hitPoint(movePoints[0], radius, localPosition)) {
        downPosition = DownPosition.leftUp;
      } else if (hitPoint(movePoints[1], radius, localPosition)) {
        downPosition = DownPosition.rightUp;
      } else if (hitPoint(movePoints[2], radius, localPosition)) {
        downPosition = DownPosition.rightDown;
      } else if (hitPoint(movePoints[3], radius, localPosition)) {
        downPosition = DownPosition.leftDown;
      }
    });
  }

  bool hitPoint(Offset offset, double radius, Offset down) {
    if (down.dx > offset.dx - radius &&
        down.dx < offset.dx + radius &&
        down.dy > offset.dy - radius &&
        down.dy < offset.dy + radius) {
      return true;
    }
    return false;
  }

onPanUpdate

手指移动过程中更新movePoints内对应的点的坐标

  onPanUpdate(DragUpdateDetails details) {
    RenderBox referenceBox = context.findRenderObject() as RenderBox;

    Offset localPosition = referenceBox.globalToLocal(details.globalPosition);

    setState(() {
      if (downPosition == DownPosition.leftUp) {
        movePoints[0] = Offset(localPosition.dx, localPosition.dy - 90.h);
      } else if (downPosition == DownPosition.rightUp) {
        movePoints[1] = Offset(localPosition.dx, localPosition.dy - 90.h);
      } else if (downPosition == DownPosition.rightDown) {
        movePoints[2] = Offset(localPosition.dx, localPosition.dy - 90.h);
      } else if (downPosition == DownPosition.leftDown) {
        movePoints[3] = Offset(localPosition.dx, localPosition.dy - 90.h);
      }
    });
  }

onPanEnd

手指抬起时确定最终范围，比如左上角点向右下移动时，最终不能超出右上角点的Y轴范围和左下角点的X轴范围

  onPanEnd(DragEndDetails details) {
    setState(() {
      if (downPosition == DownPosition.leftUp) {
        if (movePoints[0].dx > movePoints[1].dx ||
            movePoints[0].dx > movePoints[2].dx) {
          movePoints[0] = ui.Offset(
              movePoints[1].dx > movePoints[2].dx
                  ? movePoints[2].dx
                  : movePoints[1].dx,
              movePoints[0].dy);
        }
        if (movePoints[0].dy > movePoints[3].dy ||
            movePoints[0].dy > movePoints[2].dy) {
          movePoints[0] = ui.Offset(
            movePoints[0].dx,
            movePoints[3].dy > movePoints[2].dy
                ? movePoints[2].dy
                : movePoints[3].dy,
          );
        }
      } else if (downPosition == DownPosition.rightUp) {
        if (movePoints[1].dx < movePoints[0].dx ||
            movePoints[1].dx < movePoints[3].dx) {
          movePoints[1] = ui.Offset(
              movePoints[0].dx > movePoints[3].dx
                  ? movePoints[0].dx
                  : movePoints[3].dx,
              movePoints[1].dy);
        }
        if (movePoints[1].dy > movePoints[2].dy ||
            movePoints[1].dy > movePoints[3].dy) {
          movePoints[1] = ui.Offset(
            movePoints[1].dx,
            movePoints[2].dy > movePoints[3].dy
                ? movePoints[3].dy
                : movePoints[2].dy,
          );
        }
      } else if (downPosition == DownPosition.rightDown) {
        if (movePoints[2].dx < movePoints[0].dx ||
            movePoints[2].dx < movePoints[3].dx) {
          movePoints[2] = ui.Offset(
              movePoints[0].dx > movePoints[3].dx
                  ? movePoints[0].dx
                  : movePoints[3].dx,
              movePoints[2].dy);
        }
        if (movePoints[2].dy < movePoints[0].dy ||
            movePoints[2].dy < movePoints[1].dy) {
          movePoints[2] = ui.Offset(
            movePoints[2].dx,
            movePoints[0].dy > movePoints[1].dy
                ? movePoints[0].dy
                : movePoints[1].dy,
          );
        }
      } else if (downPosition == DownPosition.leftDown) {
        if (movePoints[3].dx > movePoints[1].dx ||
            movePoints[3].dx > movePoints[2].dx) {
          movePoints[3] = ui.Offset(
              movePoints[1].dx > movePoints[2].dx
                  ? movePoints[2].dx
                  : movePoints[1].dx,
              movePoints[3].dy);
        }
        if (movePoints[3].dy < movePoints[0].dy ||
            movePoints[3].dy < movePoints[1].dy) {
          movePoints[3] = ui.Offset(
            movePoints[3].dx,
            movePoints[0].dy > movePoints[1].dy
                ? movePoints[0].dy
                : movePoints[1].dy,
          );
        }
      }
    });
  }

裁剪类

CustomClipper网上有很多使用介绍，不再赘述，我们只需将movepoints传入

import 'package:flutter/material.dart';

class IrregularClipper extends CustomClipper<Path> {
  final List<Offset> clipPoints;
  IrregularClipper(this.clipPoints);

  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(clipPoints[0].dx, clipPoints[0].dy);
    path.lineTo(clipPoints[1].dx, clipPoints[1].dy);
    path.lineTo(clipPoints[2].dx, clipPoints[2].dy);
    path.lineTo(clipPoints[3].dx, clipPoints[3].dy);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

结合使用

movePoints初始化需要有四个点，可以自己设置

  DownPosition? downPosition;

  List<Offset> movePoints = <Offset>[
    Offset(30.w, 30.h),
    Offset(ScreenUtil().screenWidth - 30.w, 30.h),
    Offset(ScreenUtil().screenWidth - 30.w, ScreenUtil().screenHeight - 235.h),
    Offset(30.w, ScreenUtil().screenHeight - 235.h),
  ];

Stack内将手势、CustomClipper和CustomPainter进行结合

    Stack(children: [
        Container(
          alignment: Alignment.center,
          margin: EdgeInsets.only(
              top: 30.h, left: 30.w, right: 30.w, bottom: 120.h),
          child: ClipPath(
            clipper: IrregularClipper(movePoints),
            child: Image.file(
              File(widget.imgPath),
            ),
          ),
        ),
        GestureDetector(
          onPanDown: onPanDown,
          onPanUpdate: onPanUpdate,
          onPanEnd: onPanEnd,
        ),
        CustomPaint(
          painter: ClipperPainter(
            movePoints,
          ),
        ),
      ]