Flutter图形绘制插件gui_shape的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter图形绘制插件gui_shape的使用

Gui Shape Library

gui_shape 是一个用于创建多边形、星星、自定义形状、位图和二维渐变的图形控制库。

该库包含以下内容：

  • 几何类

    • 用于2D（XY）和平面3D（XYZ）的几何坐标
    • 几何角度（弧度和度数）
    • 用于椭圆、圆、n边多边形和n点星的几何坐标计算
    • 从几何坐标生成直线和曲线路径
    • 各种几何运算，如计算斜率、距离、中间点、居中等

  • GUI形状

    • n边多边形裁剪器和边框
    • n点星裁剪器和边框
    • 基于极坐标的裁剪器和边框
    • 自定义形状裁剪器和边框
    • 通用裁剪器和边框

  • 渐变

    • 二维（2D）渐变

  • 图像

    • 位图文件格式生成器

虽然有其他库支持规则形状的多边形（例如 polygon_clipper 包），但此库通过使用椭圆计算几何点，并改进多边形和星形的圆角来适应其矩形容器。

安装

在你的包的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
	gui_shape: ^1.0.5

使用

在你的 Dart 文件中导入库：

import 'package:gui_shape/gui_shape.dart';

示例

N边多边形

示例展示了使用 GuiClipShape 和 GuiShapeBorder 的 n 边多边形，具有直线、圆角、拉伸和旋转属性。多边形的形状由 GuiShapePolygon 定义。

  1. 一个五边形剪切（五边形形状）。
GuiClipShape(
	shape: GuiShapePolygon(sides: 5, startAngle: GeoAngle.zero),
	child: Container(color: Colors.blue,),
)
  1. 一个带有五边形边框的凸起按钮（五边形形状）。
ElevatedButton(
	style: ElevatedButton.styleFrom(
		shape: GuiShapeBorder(
			shape: GuiShapePolygon(sides: 5, startAngle: GeoAngle.zero),
			side: const BorderSide(color: Colors.purple,width: 2.0), 
		),
	),
	onPressed: () {},
	child: const Icon(Icons.person, color: Colors.yellow),
)
  1. 一个五边形剪切（五边形形状），具有圆角并适应容器尺寸。
GuiClipShape(
	shape: GuiShapePolygon(
		sides: 5,
		cornerRadius: 8,
		startAngle: GeoAngle(degree: 0),
		clockwise: true,
		boxFit: BoxFit.fill,
	),
	shadows: [
		GuiShadow(color: Colors.red, elevation: 1.0),
		GuiShadow(color: Colors.grey, elevation: 4.0)
	],
	child: Container(
		color: Colors.blue,
			child: const Center(
				child: Icon(Icons.person, color: Colors.white),
			)
		),
	),
)
  1. 一个带有五边形边框的凸起按钮（五边形形状），具有圆角并适应容器尺寸。
ElevatedButton(
	style: ElevatedButton.styleFrom(
		shape: GuiShapeBorder(
			shape: GuiShapePolygon(
				sides: 5,
				cornerRadius: 8,
				startAngle: GeoAngle(degree: 0),
				clockwise: true,
				boxFit: BoxFit.fill,
			),
			side: const BorderSide(
				color: Colors.purple,
				width: 2.0
			), 
		),
	),
	onPressed: () {},
	child: const Icon(Icons.person, color: Colors.yellow),
)
N点星形

示例展示了使用 GuiClipShape 和 GuiShapeBorder 的 n 点星形，具有直线、圆角、拉伸和旋转属性。多边形的形状由 GuiShapeStar 定义。

  1. 一个五角星剪切。
GuiClipShape(
	shape: GuiShapeStar(sides: 5,startAngle: GeoAngle.zero),
	child: Container(color: Colors.blue)
)
  1. 一个带有五角星边框的凸起按钮，具有圆角并适应容器尺寸。
ElevatedButton(
	style: ElevatedButton.styleFrom(
		shape: GuiShapeBorder(
			shape: GuiShapeStar(sides: 5, startAngle: GeoAngle.zero),
			side: const BorderSide(color: Colors.purple, width: 2.0)
		),
	),
	onPressed: () {},
	child: const Icon(Icons.person, color: Colors.yellow),
)
  1. 一个五角星剪切，具有圆角并适应容器尺寸。
GuiClipShape(
	shape: GuiShapeStar(
		sides: 5,
		cornerRadius: 8,
		startAngle: GeoAngle(degree: 0),
		clockwise: true,
		boxFit: BoxFit.fill,
		indentSideFactor: 0.3,
	),
	shadows: [
		GuiShadow(color: Colors.red, elevation: 1.0),
		GuiShadow(color: Colors.grey, elevation: 4.0)
	],
	child: Container(
		color: Colors.blue,
		child: const Center(
			child: Icon(Icons.person, color: Colors.white),
		)
	),
)
  1. 一个带有五角星边框的凸起按钮，具有圆角并适应容器尺寸。
ElevatedButton(
	style: ElevatedButton.styleFrom(
		shape: GuiShapeBorder(
			shape: GuiShapeStar(
				sides: 5,
				cornerRadius: 8,
				startAngle: GeoAngle(degree: 0),
				clockwise: true,
				boxFit: BoxFit.fill,
				indentSideFactor: 0.3,
			),
			side: const BorderSide(
				color: Colors.purple,
				width: 2.0
			), 
		),
	),
	onPressed: () {},
	child: const Icon(Icons.person, color: Colors.yellow),
)
极坐标形状

示例展示了使用 GuiShapePolar 的极坐标形状，它基于一个函数绘制360度（默认）。极坐标图形的形状由 GuiShapePolar 定义，可以与 GuiClipShape 一起使用以剪切区域，或与 GuiShapeBorder 一起使用以创建轮廓。

  1. 用户定义的基于极坐标的剪切。
GuiClipShape(
	shape: GuiShapePolar(
		formula: (GeoAngle angle) {
			return 0.7 * cos(3 * angle.radian).abs() + 0.3;
		}
	),
	child: Container(color: Colors.blue)
)
  1. 用户定义的基于极坐标的凸起按钮。
ElevatedButton(
	style: ElevatedButton.styleFrom(
		shape: GuiShapePolar(
			formula: (GeoAngle angle) {
				return 0.7 * cos(3 * angle.radian).abs() + 0.3;
			}
		),
	),
	onPressed: () {},
	child: const Icon(Icons.person, color: Colors.yellow),
)
  1. 四叶草极坐标剪切区域。
GuiClipShape(
	shape: GuiShapePolar(
		formula: (GeoAngle angle) {
			return 0.7 * cos(2 * angle.radian).abs() + 0.3;
		},
		sampling: 60,
		polarBeginAngle: GeoAngle.zero.radian,		// 默认
		polarEndAngle: GeoAngle.angle360.radian,	// 默认 
		cornerRadius: 0,
		startAngle: GeoAngle(degree: 45),
		clockwise: true,
		boxFit: BoxFit.none,
	),
	shadows: const [
		GuiShadow(color: Colors.red, elevation: 1.0),
		GuiShadow(color: Colors.grey, elevation: 4.0)
	],
	child: Container(
		color: Colors.blue,
		child: const Center(
			child: Icon(Icons.person, color: Colors.white),
		)
	),
)
  1. 四叶草极坐标凸起按钮。
ElevatedButton(
	style: ElevatedButton.styleFrom(
		shape: GuiShapeBorder(
			shape: GuiShapePolar(
				formula: (GeoAngle angle) {
					return 0.7 * cos(2 * angle.radian).abs() + 0.3;
				},
				sampling: 60,
				cornerRadius: 0,
				startAngle: GeoAngle.zero,
				clockwise: true,
				boxFit: BoxFit.fill,
			),
			side: const BorderSide(
				color: Colors.purple,
				width: 2.0
			),
		),
	),
	onPressed: () {},
	child: const Icon(Icons.person, color: Colors.yellow),
)
自定义多边形

示例展示了使用 GuiClipShape 和 GuiShapeBorder 的自定义多边形，具有直线、圆角、拉伸和旋转属性。多边形的形状由 GuiShapeCustom 定义。每个点由 GeoCoordinate2D 定义。

  1. 具有圆角并适应容器尺寸的自定义形状剪切。
GuiClipShape(
	shape: GuiShapeCustom(
		points: [
			GeoCoordinate2D( x1, y1 ),
			GeoCoordinate2D( x2, y2 ),
			GeoCoordinate2D( x3, y3 ),
			GeoCoordinate2D( x4, y4 ),
			GeoCoordinate2D( x5, y5 ),
		],
		cornerRadius: 8,
		rotate: GeoAngle.zero,
		boxFit: BoxFit.fill,
	),
	shadows: [
		GuiShadow(color: Colors.red, elevation: 1.0),
		GuiShadow(color: Colors.grey, elevation: 4.0)
	],
	child: Container(
		color: Colors.blue,
		child: const Center(
			child: Icon(Icons.person, color: Colors.white),
		)
	),
)
  1. 具有圆角并适应容器尺寸的自定义形状边框。
ElevatedButton(
	style: ElevatedButton.styleFrom(
		shape: GuiShapeBorder(
			shape: GuiShapeCustom(
				points: [
					GeoCoordinate2D( x1, y1 ),
					GeoCoordinate2D( x2, y2 ),
					GeoCoordinate2D( x3, y3 ),
					GeoCoordinate2D( x4, y4 ),
					GeoCoordinate2D( x5, y5 ),
				],
				cornerRadius: 8,
				rotate: GeoAngle.zero,
				boxFit: BoxFit.fill,
			),
			side: const BorderSide(
				color: Colors.purple,
				width: 2.0
			), 
		),
	),
	onPressed: () {},
	child: const Icon(Icons.person, color: Colors.yellow),
)
二维自定义渐变

示例展示了使用 GuiNormalizeGradient 的自定义渐变。映射中提供了颜色列表和停止位置。每种颜色都用其停止位置表示。规范化渐变会自动计算范围为0.0（0%）到1.0（100%）之间的停止位置。操作 createImage() 创建指定尺寸的渐变位图图像。

  1. 一个简单的100x200渐变图像，左上角为白色，右上角为红色，左下角为蓝色，右下角为绿色。
GuiNormalizeGradient({
	0.0: <GuiGradientColor>[
			GuiGradientColor(Colors.white,0.0), 
			GuiGradientColor(Colors.red, 1.0) 
		],
	1.0: <GuiGradientColor>[
			GuiGradientColor(Colors.blue,0.0), 
			GuiGradientColor(Colors.green, 1.0) 
		],
})
.createImage(100, 200)
  1. 一个200x200红白相间的棋盘渐变图像。
GuiNormalizeGradient({
	0.0: <GuiGradientColor>[
		GuiGradientColor(Colors.white,0.0), 
		GuiGradientColor(Colors.red, 0.25), 
		GuiGradientColor(Colors.white, 0.5), 
		GuiGradientColor(Colors.red, 0.75), 
		GuiGradientColor(Colors.white, 1.0) 
	],
	0.25: <GuiGradientColor>[
		GuiGradientColor(Colors.red,0.0),
		GuiGradientColor(Colors.white, 0.25),
		GuiGradientColor(Colors.red, 0.5),
		GuiGradientColor(Colors.white, 0.75),
		GuiGradientColor(Colors.red, 1.0)
	],
	0.5: <GuiGradientColor>[
		GuiGradientColor(Colors.white,0.0),
		GuiGradientColor(Colors.red, 0.25),
		GuiGradientColor(Colors.white, 0.5),
		GuiGradientColor(Colors.red, 0.75),
		GuiGradientColor(Colors.white, 1.0)
	],
	0.75: <GuiGradientColor>[
		GuiGradientColor(Colors.red,0.0), 
		GuiGradientColor(Colors.white, 0.25), 
		GuiGradientColor(Colors.red, 0.5), 
		GuiGradientColor(Colors.white, 0.75), 
		GuiGradientColor(Colors.red, 1.0) 
	],
	1.0: <GuiGradientColor>[
		GuiGradientColor(Colors.white,0.0), 
		GuiGradientColor(Colors.red, 0.25), 
		GuiGradientColor(Colors.white, 0.5), 
		GuiGradientColor(Colors.red, 0.75), 
		GuiGradientColor(Colors.white, 1.0) 
	],
}).createImage(200, 200)

更多关于Flutter图形绘制插件gui_shape的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图形绘制插件gui_shape的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，gui_shape 并不是一个官方或者广泛认可的图形绘制插件。不过，为了展示如何在Flutter中进行图形绘制，通常会使用Flutter自带的 Canvas API 或者一些第三方库如 flutter_canvas。然而，由于 gui_shape 并非一个已知库，我将提供一个使用Flutter内置功能进行图形绘制的示例。

假设你想绘制一些基本的形状，比如圆形、矩形和线条，你可以创建一个自定义的 CustomPaint 组件，并在其中使用 Canvas API。以下是一个简单的示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Shape Drawing'),
        ),
        body: Center(
          child: CustomPaint(
            size: Size(300, 300),
            painter: ShapePainter(),
          ),
        ),
      ),
    );
  }
}

class ShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    // Draw a circle
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      50.0,
      paint,
    );

    paint.color = Colors.red;

    // Draw a rectangle
    Rect rect = Rect.fromLTWH(50, 50, 100, 100);
    canvas.drawRect(rect, paint);

    paint.color = Colors.green;
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 4.0;

    // Draw a line
    canvas.drawLine(Offset(50, 200), Offset(250, 200), paint);
  }

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

在这个示例中，我们创建了一个 MyApp 应用，其中包含一个 Scaffold，Scaffold 的主体是一个 Center 组件，Center 组件中是一个 CustomPaint。CustomPaint 的 painter 属性设置为 ShapePainter，这是一个自定义的 CustomPainter 类。

在 ShapePainter 类中，我们重写了 paint 方法，使用 Canvas API 绘制了一个圆形、一个矩形和一条直线。我们使用了 Paint 类来设置颜色、样式和线条宽度。

  • drawCircle 方法用于绘制圆形。
  • drawRect 方法用于绘制矩形。
  • drawLine 方法用于绘制直线。

这个示例展示了如何使用Flutter的内置功能进行基本的图形绘制。如果你确实有一个名为 gui_shape 的插件，并且需要具体的使用示例，你可能需要查阅该插件的官方文档或源代码，因为非标准库的使用通常依赖于其特定的API和用法。

回到顶部