Flutter：如何使用 CustomPaint 绘制心形

作为程序员其实也有浪漫的一幕，今天我们一起借助CustomPaint和CustomPainter绘制心形，本文将带您了解在 Flutter 中使用CustomPaint和CustomPainter绘制心形的端到端示例。闲话少说（比如谈论 Flutter 的历史或它有多华丽），让我们深入研究代码并制作一些东西。

例子

预览

我们将创建 4 个心形。第一个没有边界，但其他的有。

步骤

1.通过扩展CustomPainter类来实现一个画笔：

class MyPainter extends CustomPainter {// The color of the heartfinal Color bodyColor;// The color of the border of the heartfinal Color borderColor;// The thickness of the borderfinal double borderWith;MyPainter(this.bodyColor, this.borderColor, this.borderWith);@overridevoid paint(Canvas canvas, Size size) {// The body of the heartfinal Paint body = Paint();body..color = bodyColor..style = PaintingStyle.fill..strokeWidth = 0;// The border of the heartfinal Paint border = Paint();border..color = borderColor..style = PaintingStyle.stroke..strokeCap = StrokeCap.round..strokeWidth = borderWith;final double width = size.width;final double height = size.height;final Path path = Path();path.moveTo(0.5 * width, height * 0.4);path.cubicTo(0.2 * width, height * 0.1, -0.25 * width, height * 0.6,0.5 * width, height);path.moveTo(0.5 * width, height * 0.4);path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,0.5 * width, height);canvas.drawPath(path, body);canvas.drawPath(path, border);}

2.使用 CustomPaint 小部件和我们之前创建的画家绘制心形：

// Non-border heartCustomPaint(size: const Size(280, 260),painter: MyPainter(Colors.pink, Colors.transparent, 0),),// Hearts with bordersCustomPaint(size: const Size(200, 120),painter: MyPainter(Colors.purple, Colors.black, 10),),CustomPaint(size: const Size(200, 240),painter: MyPainter(Colors.red, Colors.redAccent, 5),),CustomPaint(size: const Size(50, 100),painter: MyPainter(Colors.amber, Colors.indigo, 10),),

最终代码

这是main.dart中的完整代码，它生成了上面屏幕截图中显示的很酷的心形：

// main.dart
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(// Hide the debug bannerdebugShowCheckedModeBanner: false,title: 'breeze',theme: ThemeData(primarySwatch: Colors.indigo,),home: const HomeScreen(),);}
}// Implementing our heart painter
class MyPainter extends CustomPainter {// The color of the heartfinal Color bodyColor;// The color of the border of the heartfinal Color borderColor;// The thickness of the borderfinal double borderWith;MyPainter(this.bodyColor, this.borderColor, this.borderWith);@overridevoid paint(Canvas canvas, Size size) {// The body of the heartfinal Paint body = Paint();body..color = bodyColor..style = PaintingStyle.fill..strokeWidth = 0;// The border of the heartfinal Paint border = Paint();border..color = borderColor..style = PaintingStyle.stroke..strokeCap = StrokeCap.round..strokeWidth = borderWith;final double width = size.width;final double height = size.height;final Path path = Path();path.moveTo(0.5 * width, height * 0.4);path.cubicTo(0.2 * width, height * 0.1, -0.25 * width, height * 0.6,0.5 * width, height);path.moveTo(0.5 * width, height * 0.4);path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,0.5 * width, height);canvas.drawPath(path, body);canvas.drawPath(path, border);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;}
}class HomeScreen extends StatefulWidget {const HomeScreen({Key? key}) : super(key: key);@overrideState<HomeScreen> createState() => _HomeScreenState();
}class _HomeScreenState extends State<HomeScreen> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('KindaCode.com'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.spaceAround,mainAxisSize: MainAxisSize.min,children: [// Non-border heartCustomPaint(size: const Size(280, 260),painter: MyPainter(Colors.pink, Colors.transparent, 0),),// Hearts with bordersCustomPaint(size: const Size(200, 120),painter: MyPainter(Colors.purple, Colors.black, 10),),CustomPaint(size: const Size(200, 240),painter: MyPainter(Colors.red, Colors.redAccent, 5),),CustomPaint(size: const Size(50, 100),painter: MyPainter(Colors.amber, Colors.indigo, 10),),],)),);}
}

参考

您可以在官方文档中找到有关 CustomPaint 小部件和 CustomPainter 类的更多详细信息：

自定义绘制小部件
CustomPainter 类

后记

您已经学会了如何在不使用任何第三方软件包的情况下从头开始绘制自定义心形。此时，您应该对 Flutter 中的绘图有了更好的了解。

Flutter：如何使用 CustomPaint 绘制心形相关推荐

python画出心形图-python如何绘制心形
python绘制心形的方法:利用matplotlib和numpy画心形,代码为[init = np.arange(-np.pi, np.pi, 0.001);plt.fill_between(x, y ...
css 绘制心形图案
CSS3 transform-origin 属性设置旋转元素的基点位置. 注释:该属性必须与 transform 属性一同使用. (1)首先,绘制背景: <!doctype html> & ...
python合成心形_python如何绘制心形
python绘制心形的方法:利用matplotlib和numpy画心形,代码为[init = np.arange(-np.pi, np.pi, 0.001);plt.fill_between(x, y ...
学生用计算机如何弄心形,电脑画图软件内如何绘制心形
电脑画图软件内如何绘制心形随着科技的发展,电脑已经成为人们日常生活中必不可少的工具,当我们在使用电脑中的画图软件时,如果想要画一颗心形的话,应如何操作呢?接下来就由小编来告诉大家. 具体如下: 1. ...
OpenGL绘制心形函数
OpenGL绘制心形函数用的最后一个 r =(float) (r_beishu*(Math.sin(Math.PI*i/180f)*Math.sqrt(Math.abs(Math.cos(Math. ...
python心脏线绘制代码_C++和Java命令行绘制心形图代码分享
C++和Java命令行绘制心形图案心形线心形线,是一个圆上的固定一点在它绕着与其相切且半径相同的另外一个圆周滚动时所形成的轨迹,因其形状像心形而得名. 心脏线亦为蚶线的一种.在曼德博集合正中间的图 ...
Linux下操纵CPU曲线绘制心形
不久之前看了「编程之美」,里面有在windows下操纵CPU绘制正弦曲线的示例程序.思路很简单,但是需要知道几个windows的API函数. 刚开始我想尝试在windows下绘制心形,不过没能做到,原 ...
android绘制心形_Android自定义View系列（一）——打造一个爱心进度条
写作原因:Android进阶过程中有一个绕不开的话题--自定义View.这一块是安卓程序员更好地实现功能自主化必须迈出的一步.下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法.从自定义 ...
matlab绘制心形函数
matlab 7.0 绘制二维.三维心形函数又到周六,下周就要迎来春节小长假了,想想都有些激动.在外漂了一整年,总于可以回家和父母团聚了,还有吃好吃的...,哎呀~想想都流口水呢.不过先不要激动,假 ...

Flutter：如何使用 CustomPaint 绘制心形

例子

预览

步骤

最终代码

参考

后记

Flutter：如何使用 CustomPaint 绘制心形相关推荐

最新文章

热门文章