Question

我可以使用ClipPath裁剪图像，但是如何为裁剪后的图像添加边框，如下所示？

Answer 1

您可以这样解决：

在CustomPainter中创建与Path相同的CustomClipper<Path>

示例：

Path path = Path();
path.lineTo(0.0, 0.0);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height * 0.8);
path.lineTo(0.0, size.height);
path.close();

创建一个Paint对象并使用描边绘画样式，而strokeWidth是自定义边框的宽度

代码

Paint paint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth=10.0
  ..color = Colors.black;

最后在canvas

中绘制此路径

canvas.drawPath(path, paint);

还需要确保此CustomPaint是容器的子容器

ClipPath(
          clipper: traingleclipper(),
          child: Container(
            color: Colors.white,
            child: CustomPaint(
              painter: ClipperBorderPainter(),
            ),
          ),
        )

在我的示例中，这是结果：

还有另一种使用Stack的方式，您将使用裁剪器创建图像，然后使用相同的CustomPaint创建Path

Stack(
          children: <Widget>[
            ClipPath(
              clipper: CustomClip(),
                child: Image.network(
              "http://www.delonghi.com/Global/recipes/multifry/pizza_fresca.jpg",
              width: double.infinity,
              height: 400.0,
                  fit: BoxFit.cover,
            )),
            CustomPaint(
              painter: BorderPainter(),
              child: Container(
                height: 400.0,
              ),
            ),
          ],
        ),

Full Example

如何在裁剪后的图像上添加边框？

1 个答案: