如何使用 CustomClipper 在左侧制作多个尖边？答案

【问题标题】：How to make multiple pointed edge at the left side using CustomClipper?如何使用 CustomClipper 在左侧制作多个尖边？
【发布时间】：2020-08-10 16:53:39
【问题描述】：

我正在尝试在左侧制作多个尖边。

class CustomClipPath extends CustomClipper<Path> {

@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width, 0.0);

var curYPos = 0.0;
var curXPos = size.width;
var increment = size.height / 30;
while (curYPos < size.height) {
  curYPos += increment;
  curXPos = curXPos == size.width ? size.width - 8 : size.width;
  path.lineTo(curXPos, curYPos);
}
path.lineTo(0, size.height);

return path;
 }

@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

但是，我在右侧得到了多个尖边，而不是左侧的多个尖边，如下图所示： Text

【问题讨论】：

标签： flutter clip-path

【解决方案1】：

这是一个使用孩子左侧的剪刀。


class CustomClipPath extends CustomClipper<Path> {

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

    var curYPos = 0.0;
    var curXPos = 0.0;
    var increment = size.height / 30;
    while (curYPos < size.height) {
      curYPos += increment;
      curXPos = curXPos == 0.0 ? 8.0 : 0.0;
      path.lineTo(curXPos, curYPos);
    }
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

【讨论】：

【解决方案2】：

试试这个

class CustomClipPath extends CustomClipper<Path> {

@override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width, 0.0);

var curYPos = 0.0;
var curXPos = 0.0;
path.lineTo(0.0, 0.0);  
var increment = size.height / 30;
while (curYPos < size.height) {
  curYPos += increment;
  curXPos = curXPos == 0 ?  8 : 0;
  path.lineTo(curXPos, curYPos);
}
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.0);
return path;
}

@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

【讨论】：