用于标记的 Flutter Lasso 选择

Question

我想一次选择多个标记，并通过绘制套索来选择标记，然后选择套索区域旁边的标记，但实际上我不知道该怎么做，而且我没有找到任何包或教程这样做我想知道是否有人可以帮助我，即使只是告诉我逻辑而不是完整的代码。

Example for what I want to do

Answer 1

Flutter 有一个 ClipPath()可以用结构化路径剪辑 child 的小部件(如 Photoshop 路径+图层->创建矢量蒙版，或使用套索工具绘制路径并剪切图像)。您可以让 Container() 包含背景图像，并使用 ClipPath() 对其进行剪辑。

ClipPath(
  clipper: MyClipperPath(), //you can pass in your own args if you want
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: //your image - AssetImage(), NetworkImage() etc.
        fit: BoxFit.fill, //or whatever BoxFit you want
      )
    )
  )
)

然后在你的小部件类之外

class MyClipperPath extends CustomClipper<Path> {
  MyClipperPath();

  @override
  Path getClip(Size size) {
    //size.height and size.width are the width and height of your child: Container() above

    Path path = Path();
    path.moveTo(0,0);
    path.lineTo(size.width,0);
    path.lineTo(size.width/3,size.height/3);
    path.lineTo(0,size.height);
    path.close();
    
    return path;
  }
}

上面的路径是一个类似L的形状。更改 lineTo 值，您将在屏幕上看到剪切路径更新。

Path class有很多创建直线和曲线的方法，包括用于贝塞尔曲线段类型的多种方法，您可以使用这些方法来复制路径或 Photoshop 中的套索工具定义任意形状。

这是我在我的应用程序中使用的 CustomClipper 对象。它在盒子上创建 S 形边缘。

class TabClipper extends CustomClipper<Path> {
  final double radius;
  const TabClipper([this.radius = 0]);
  @override
  Path getClip(Size size) {
    double _radius = radius;
    if(_radius==0) _radius = size.height * 16 / 57;
    final path = Path();
    path.arcToPoint(Offset(_radius,_radius), radius: Radius.circular(_radius*0.95),rotation: 90.0);
    path.lineTo(_radius, size.height - _radius);
    path.arcToPoint(Offset(_radius*2,size.height), radius: Radius.circular(_radius*0.95),rotation: 90.0, clockwise: false);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {return false;}
}