代码之家 › 专栏 › 技术社区 › Figen Güngör

如何向剪裁图像添加边框?

clip-path flutter

Figen Güngör · 技术社区 · 7 年前

我可以用clipPath剪辑图像,但如何向该剪辑图像添加边框,如下所示?

1 回复 | 直到 7 年前

Raouf Rahiche AbdulMomen Ø¹Ø¨Ø¯Ø§ÙÙØ¤ÙÙ 7 年前

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

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