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

Question

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

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

Answer 1

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


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;
}

Answer 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;
}

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

How to make multiple pointed edge at the left side using CustomClipper?

clip-path

flutter