如何在颤振上创建六边形剪辑路径？

Question

我正在尝试使用六边形头像，但在使用带有颤振的剪辑路径时遇到问题。

六边形的 CSS 代码是这样的：

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

如何在颤振上做到这一点？

Answer 1

让我们使用ClipPath 来获得这个形状，并按照您的方式遵循css。 50% 0% 的意思是 (x, y) 和 lineTo(x,y) 和 moveTo 的意思一样。

class HexagonClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    path
      ..moveTo(size.width / 2, 0) // moving to topCenter 1st, then draw the path
      ..lineTo(size.width, size.height * .25)
      ..lineTo(size.width, size.height * .75)
      ..lineTo(size.width * .5, size.height)
      ..lineTo(0, size.height * .75)
      ..lineTo(0, size.height * .25)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

并使用喜欢

  ClipPath(
            clipper: HexagonClipper(),
            child: Container(
              width: 100, /// controll the size and color
              height: 110,
              color: Colors.amber,
            ),
          )

结果

了解更多关于ClipPath

Answer 2

代码

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hexagon', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Hexagon'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: const EdgeInsets.all(50.0), child: ClipPath( child: Container( color: Colors.amber, ), clipper: _MyClipper(), ), ), ); } } class _MyClipper extends CustomClipper<Path> { @override Path getClip(Size size) { final path = Path(); path.lineTo(0, 0); path.lineTo(size.width, 0); path.lineTo(size.width, size.height * 0.8); path.lineTo(size.width * 0.8, size.height); path.lineTo(size.width * 0.2, size.height); path.lineTo(0, size.height * 0.8); path.lineTo(0, 0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => false; }

或者你可以使用一个名为

的包

flutter_custom_clippers: ^2.0.0