flutter--绘制六边形封装

绘制六边形带边框并且可以加载网络或者本地图片裁剪后的六边形图片。三个步骤，1、是绘制六边形变宽。2、绘制了六边形裁剪填充。3、通过stack利用六边形Size差值组合到一起。

一、绘制六边形变框的代码
class HexagonClipperBorder extends StatelessWidget {

  Size size;
  HexagonClipperBorder(this.size);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return hexagonViewItem();
  }

  // 六边形裁剪
  Widget hexagonViewItem() {
    return CustomPaint(
        painter: HexagonPainter(size),
        key: GlobalKey(),
    );
  }

}

// 绘制六边形
class HexagonPainter extends CustomPainter {
  final Size itemSize;
  HexagonPainter(this.itemSize);

  @override
  void paint(Canvas canvas, Size size) {
    drawLine(canvas, itemSize);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }

  void drawLine(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = ColorsUtil.hexColor(0xD4E5F8)
      ..strokeWidth = 2.0
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke;
    final path = Path()..moveTo(itemSize.width * 0.5, 0.0);
    path.lineTo(itemSize.width ,itemSize.height * 0.2);
    path.lineTo(itemSize.width, itemSize.height * 0.8);
    path.lineTo(itemSize.width * 0.5, itemSize.height);
    path.lineTo(0, itemSize.height * 0.8);
    path.lineTo(0, itemSize.height * 0.2);
    path.lineTo(itemSize.width * 0.5, 0.0);

    path.close();
    canvas.drawPath(path, paint);
  }
}

 

二、绘制裁剪六边形（可填充图片--网络或者本地图片均可）

/**
 * 裁剪六边形
*/

class HexagonClipperPic extends StatelessWidget {

  Size size;
  BoxDecoration decoration;
  Widget child;
  HexagonClipperPic(this.size,this.decoration,this.child);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return hexagonViewItem();
  }

  // 六边形裁剪
  Widget hexagonViewItem() {
    return Container(
      width: size.width,
      height: size.height,
      child: ClipPath(
        clipper: HexagonClipperTops(size),
        child: Container(
          decoration: decoration,
          child: child,
        ),
      ),
    );
  }

}

// 裁剪六边形
class HexagonClipperTops extends CustomClipper<Path> {
  final Size itemSize;
  HexagonClipperTops(this.itemSize);

  @override
  Path getClip(Size size) {
    final path = Path()..moveTo(itemSize.width * 0.5, 0.0);
    path.lineTo(itemSize.width ,itemSize.height * 0.2);
    path.lineTo(itemSize.width, itemSize.height * 0.8);
    path.lineTo(itemSize.width * 0.5, itemSize.height);
    path.lineTo(0, itemSize.height * 0.8);
    path.lineTo(0, itemSize.height * 0.2);
    path.lineTo(itemSize.width * 0.5, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

三、封装组合

class HexagonClipperBorderPic extends StatelessWidget {
  Size size;
  HexagonClipperBorderPic(this.size);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: size.width,
      height: size.height,
      child: Stack(
        children: [
          HexagonClipperBorder(size),
          Positioned(
            left: 1.w,top: 1.w,
            child: HexagonClipperPic(
              Size(size.width-3, size.height-3),
              BoxDecoration(
                color: Colors.white,
              ),
              Image.asset(A.assets_images_eqp_sharing_info_bg,fit: BoxFit.fill),
            ),)
        ],
      ),
    );
  }
}

四、使用

Stack(
  alignment: Alignment.topCenter,
  children: [
    HexagonClipperBorderPic(Size(93.w, 93.w)),
    Container(
      width: 93.w,
      height: 115.w,
    ),
    Positioned(
      bottom: 0,
      child: Image.asset(A.assets_images_knowledge_no1,
          width: 25.w, fit: BoxFit.contain),
    ),
  ],
),

五、最终效果