如何为裁剪的图像添加边框？

Question

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

Answer 1

你可以这样解决:

在 CustomClipper<Path>

Path

CustomPainter

Example :

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 对象并使用 Stroke 绘画样式，strokeWidth 是自定义边框的宽度

CODE

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 的方法，您将使用 clipper 创建图像，然后使用相同的 Path

创建 CustomPaint

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

如何为裁剪的图像添加边框？

How to add a border to a clipped image?

flutter

clip-path