Flutter多边形绘制插件polygon的使用

polygon 插件简介

polygon 是一个用于在Flutter中轻松创建多边形的插件。它允许用户创建规则凸多边形、规则星形多边形，以及为任何小部件应用多边形边框或剪辑。此外，该插件还提供了一个专门的 ShapeBorder 称为 PolygonBorder，使得用户可以方便地为多边形添加颜色、边框、图片等样式，或者通过 Clip.shape 剪辑内容。

主要功能

• 创建规则凸多边形。
• 创建规则星形多边形。
• 创建多边形边框。
• 使用多边形形状剪辑任何小部件。

使用方法

创建一个多边形

通过设置顶点（在一个[(-1,-1);(1,1)]矩形内），你可以轻松地创建各种多边形。

const polygon = Polygon([
  Offset(0.25, -1),
  Offset(0, -0.25),
  Offset(0.5, 0),
  Offset(-0.25, 1),
  Offset(0, 0.25),
  Offset(-0.5, 0),
]);

然后你可以通过调用 computePath 方法从这个多边形创建一个路径。例如，在 CustomPainter 中使用：

class PolygonPainter extends CustomPainter {
  PolygonPainter(this.polygon);

  final Polygon polygon;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPath(
      polygon.computePath(rect: Offset.zero & size),
      Paint()..color = Colors.yellow.shade800,
    );
  }

  @override
  bool shouldRepaint(PolygonPainter oldDelegate) {
    return oldDelegate.polygon != polygon;
  }
}

computePath 方法接受多个参数，比如可以给多边形的所有角应用圆角半径。

使用 PolygonBorder

除了直接绘制多边形外，polygon 还提供了 PolygonBorder，这是一个专门的 ShapeBorder，可以很方便地将颜色、边框或图片应用于多边形，也可以通过 Clip.shape 来剪辑内容。

DecoratedBox(
  decoration: ShapeDecoration(
    shape: PolygonBorder(
      polygon: polygon,
      turn: 0.125,
      radius: 20.0,
      borderAlign: BorderAlign.outside,
      side: BorderSide(
        width: 4,
        color: Colors.red,
      ),
    ),
    color: Colors.pink,
  ),
  child: const SizedBox(
    height: 400,
    width: 400,
  ),
),

专业化的多边形

polygon 插件还带有两种专业化的多边形：

• RegularConvexPolygon：可以创建三角形、四边形、五边形等。
• RegularStarPolygon：可以创建各种星形。

完整示例代码

下面是一个完整的示例代码，展示了如何使用 polygon 插件来创建一个多边形并将其显示在一个页面上。

import 'package:flutter/material.dart';
import 'package:polygon/polygon.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Polygon Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Polygon Example'),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            border: Border.all(color: Colors.black),
          ),
          child: CustomPaint(
            painter: PolygonPainter(createSamplePolygon()),
          ),
        ),
      ),
    );
  }

  // 创建一个简单的六边形作为示例
  Polygon createSamplePolygon() {
    return RegularConvexPolygon(sides: 6);
  }
}

class PolygonPainter extends CustomPainter {
  final Polygon polygon;

  PolygonPainter(this.polygon);

  @override
  void paint(Canvas canvas, Size size) {
    Path path = polygon.computePath(rect: Offset.zero & size);
    canvas.drawPath(
      path,
      Paint()
        ..color = Colors.blue
        ..style = PaintingStyle.stroke
        ..strokeWidth = 4,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

在这个例子中，我们首先定义了一个名为 MyApp 的应用程序入口点，并设置了主页面 HomePage。在 HomePage 中，我们创建了一个中心对齐的容器，其中包含一个自定义绘制的六边形。最后，我们通过 CustomPaint 和 PolygonPainter 来实现多边形的绘制。

希望这段代码能帮助你理解如何在Flutter项目中使用 polygon 插件。如果你有任何问题或需要进一步的帮助，请随时提问！