如何在顫動上創建六邊形剪切路徑？

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

代碼

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

Answer 2

讓我們使用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 的更多信息