我如何塑造一个形象,因为我的愿望在Flutter

ghhkc1vu  于 2023-02-09  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我想在上面给一个图像的方式下边界
我已经使用ClipRect进行了相同的

ClipRRect(
                                  borderRadius: const BorderRadius.only(
                                      bottomLeft: Radius.circular(50),
                                      bottomRight: Radius.circular(50)),
                                  // Image border
                                  child: SizedBox.fromSize(
                                    size: Size.fromRadius(48), // Image radius
                                    child: Image.network(data['displayPic'],
                                        fit: BoxFit.cover),
                                  ),
                                )),
rdlzhqv9

rdlzhqv91#

你可以创建CustomClipper,我将分享一个示例代码,这将实现你想要的方式塑造图像,你可以根据你的需要改变半径。

class ClipPathClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double radius = 50;
    var path = Path();

    path.lineTo(0.0, size.height - 30);

    var firstControlPoint = Offset(size.width / 4, size.height);
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint = Offset(size.width - (size.width / 4), size.height);
    var secondPoint = Offset(size.width, size.height - 30);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width, 0.0);
    path.lineTo(size.width - radius, 0);

    path.close();

    return path;
  }

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

现在像这样使用这个ClipPathClass,

ClipPath(
  clipper: ClipPathClass(),
child: //Your Image Container here
)

相关问题