Flutter 绘制风车实现示例详解

目录
  • 前言展示
  • 1. 风车 1 的绘制
  • 2. 风车 2 的绘制
  • 3. 旋转动画的处理
  • 4. 旋转动画的圈数

前言展示

最近源码看得比较多,本文来画点东西调节下心情,本绘制已收录于 FlutterUnit 的绘制集录,本文源码可参见【windmill.dart】 。绘制内容非常简单,如下所示,两个样式的小风车:通过这两个小例子,可以学到:

路径的使用

画板的旋转变换

动画曲线与 Tween 的使用

风车1 风车2

1. 风车 1 的绘制

第一个风车非常简单,由四个 半圆 组成,每个部分直接的关系是旋转 90° 。如下所示, 通过 Path#addArc 添加一个半圆形的圆弧路径。这样就完成了一个单体:

@override
void paint(Canvas canvas, Size size) {
  canvas.translate(size.width / 2, size.height / 2);
  double d = size.width * 0.4;
  Path path = Path()
    ..addArc(
      Rect.fromCenter(center: Offset(d / 2, 0), width: d, height: d),
      0,
      pi,
    );
  Paint paint = Paint()..color = const Color(0xffFBBD19);
  canvas.drawPath(path, paint);
}
复制代码

接下来只需要在此基础上,将画板旋转 90° 换个颜色再画一次这个路径即可。你可以想象一下,你在一张纸上画了如下的黄色块,然后把纸沿中心旋转 90°,只要再绘制和刚才同样的图形即可:

canvas.rotate(pi / 2);
canvas.drawPath(path, paint..color = const Color(0xff30A04C));
复制代码

以此类推,画一个转 90° ,画 4 此即可。如下所示,可以通过 colors 列表通过循环遍历绘制。这样一个简单的小风车就跃然纸上了,从这里可以看出,只要更改单体的路径,即可完成不同样式的小风车。

List<Color> colors = const [
  Color(0xffE74437), Color(0xffFBBD19),
  Color(0xff3482F0), Color(0xff30A04C)
];
Paint paint = Paint();
for (Color color in colors) {
  canvas.drawPath(path, paint..color=color);
  canvas.rotate(pi / 2);
}
复制代码

2. 风车 2 的绘制

风车 2 的绘制是有一定难度的,首先期望绘制是具有 矢量性 的,它会随着 画板 的大小自适应尺寸。也就是说,我们绘制时使用的尺寸都要以画布的尺寸为基准。

其次,难点在于数据信息,这方面可以通过 PhotoShop 等软件来量取尺寸,获取关键点坐标,然后进行按照比例来进行路径操作。好在这里只需要获取一个单体坐标信息,其他三个旋转遍历即可。

每个单体中由两块区域组成,分别通过路径的点操作即可。在实际开发中,如果设计给了一些比较规整的图形,需要绘制的话,也可以采用类似的方法,或者让设计帮你量好关键点的坐标,你按比例换算即可。

@override
void paint(Canvas canvas, Size size) {
  List<Color> colors = const [     Color(0xffE74437),  Color(0xffFBBD19),     Color(0xff3482F0),  Color(0xff30A04C)  ];
  canvas.translate(size.width / 2, size.height / 2);
  double d = size.width * 0.4;
  canvas.rotate(rotate.value*2*pi);
     Paint paint = Paint();
     for (Color color in colors) {
     Path path1 = Path()
     ..moveTo(0, -d * 46/203)
     ..lineTo(0, -d * 203/203)
     ..lineTo(102/203 * d, -102/203 * d)
     ..lineTo(12/203 * d, -12/203 * d)..close();
     canvas.drawPath(path1, paint..color=color);

     Path path2 = Path()
     ..moveTo(12/203 * d, -12/203 * d)
     ..lineTo(102/203 * d, -102/203 * d)
     ..lineTo(102/203 * d, 0 )
     ..lineTo(46/203 * d, 0 )..close();
     canvas.drawPath(path2, paint..color=color.withOpacity(0.2));
     canvas.rotate(pi / 2);
     }
}
复制代码

3. 旋转动画的处理

Flutter 中的动画非常简单,首先创建 AnimationController 作为动画的 "驱动器";然后如需曲线变换,可以使用 CurveTween 控制数值运动的速度,比如这里使用 Curves.easeIn 先慢后快:

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {

  late final AnimationController _ctrl = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 2),
  );
  late Animation<double> rotate;

  @override
  void initState() {
    rotate = CurveTween(curve: Curves.easeIn).animate(_ctrl);
    super.initState();
  }
复制代码

最后将 Animation<double> 对象传入 WindmillPainter 画板中,作为画板绘制的驱动力,在绘制前根据数值对画布进行旋转即可:

4. 旋转动画的圈数

可能有人发现,这点一下就转一圈,如何转多圈呢?其实这就是一个数学问题:转一圈是 360°,想转 n 圈,本质上就是在规定时间内旋转 n*360°。 这通过 Tween 是很容易实现的:

比如这里转 3 圈,最核心的是通过 Tween 指定一个 补间 ,然后这个 rotate 在动画进行时就会从 0 运动到 3*2*pi。绘制时画板旋转 rotate.value 即可。

canvas.rotate(rotate.value);
复制代码

本案例已加入 FlutterUnit 的绘制集录,可在下版本更新后体验,感谢支持 FlutterUnit

- -

这就是一个非常简单的绘制与动画结合的小例子,希望可以对刚接触的绘制的朋友有所帮助。不仅是 Flutter 其他的框架只要有画板,只要能有动画驱动,都可以完成类似的绘制。

以上就是Flutter 绘制风车实现示例详解的详细内容,更多关于Flutter 绘制风车的资料请关注我们其它相关文章!

(0)

相关推荐

  • 详解利用Flutter中的Canvas绘制有趣的图形

    目录 简介 等边三角形构建重复之美 绘制彩虹 绘制五角星 总结 简介 上一篇我们介绍了使用 Flutter 的 Canvas 绘制基本图形的示例,简单的示例没什么好玩的,今天这一篇我们来点有趣的,我们会完成如下图形的绘制: 发现数学重复之美:使用等边三角形组合成彩虹伞面. 绘制彩虹. 绘制评分用的五角星. 通过这一篇,我们可以知道自定义形状绘制的基本原理,然后可以在这个基础上绘制你自己想要绘制的图形. 等边三角形构建重复之美 首先我们来绘制等边三角形,其实上一篇我们也有绘制等边三角形,只是那是将

  • Flutter学习之构建、布局及绘制三部曲

    前言 学习Fullter也有些时间了,写过不少demo,对一些常用的widget使用也比较熟练,但是总觉得对Flutter的框架没有一个大致的了解,碰到有些细节的地方又没有文档可以查询,例如在写UI时总不知道为什么container添加了child就变小了:widget中key的作用,虽然官方有解释但是凭空来讲的话有点难理解.所以觉得深入一点的了解Flutter框架还是很有必要的. 构建 初次构建 flutter的入口main方法直接调用了runApp(Widget app)方法,app参数就是

  • Flutter利用Canvas绘制精美表盘效果详解

    目录 前言 初始化 面板 刻度 刻度线 刻度值 指针 时针 分针 秒针 动起来 前言 趁着周末空闲时间使用 Flutter 的 Canvas制作了一个精美表盘. 最终实现的效果还不错,如下: 前面说到使用 Canvas 实现该表盘效果,而在 Flutter 中使用 Canvas 更多的则是继承 CustomPainter 类实现 paint 方法,然后在 CustomPaint 中使用自定义实现的 CustomPainter. 比如这里创建的 DialPainter 使用如下: @overrid

  • Android Flutter绘制有趣的 loading加载动画

    目录 前言 效果1:圆环内滚动的球 效果2:双轨运动 效果3:钟摆运动 总结 前言 在网络速度较慢的场景,一个有趣的加载会提高用户的耐心和对 App 的好感,有些 loading 动效甚至会让用户有想弄清楚整个动效过程到底是怎么样的冲动.然而,大部分的 App的 loading 就是下面这种千篇一律的效果 —— 俗称“转圈”. 本篇我们利用Flutter 的 PathMetric来玩几个有趣的 loading 效果. 效果1:圆环内滚动的球 如上图所示,一个红色的小球在蓝色的圆环内滚动,而且在往

  • Android Flutter绘制扇形图详解

    目录 简介 CustomPaint介绍 CustomPainter介绍 paint介绍 shouldRepaint介绍 示例 使用CustomPaint 自定义Painter 绘制 触摸事件处理 动画实现 简介 在开发过程中通常会遇到一些不规则的UI,比如不规则的线条,多边形,统计图表等等,用那些通用组件通过组合的方式无法进行实现,这就需要我们自己进行绘制.可以通过使用CuntomPaint组件并结合画笔CustomPainter去进行手动绘制各种图形. CustomPaint介绍 Custom

  • 详解Flutter如何绘制曲线,折线图及波浪动效

    目录 正弦曲线绘制 波浪动效 曲线绘制 折线图 其他说明 总结 简介 上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状,可以看到有了图形的平面绘制数学计算方法,我们可以画出所需的形状.本篇我们来介绍线条类图形的绘制,并且结合 Animation 实现了常见的波浪动效.通过本篇,你可以了解到: 正弦曲线的绘制 利用两条正弦曲线加上 Animation 实现波浪动效 曲线的一般绘制方法 折线图绘制 下面是最终实现的效果图,接下来我们一项

  • Flutter 绘制风车实现示例详解

    目录 前言展示 1. 风车 1 的绘制 2. 风车 2 的绘制 3. 旋转动画的处理 4. 旋转动画的圈数 前言展示 最近源码看得比较多,本文来画点东西调节下心情,本绘制已收录于 FlutterUnit 的绘制集录,本文源码可参见[windmill.dart] .绘制内容非常简单,如下所示,两个样式的小风车:通过这两个小例子,可以学到: 路径的使用 画板的旋转变换 动画曲线与 Tween 的使用 风车1 风车2 1. 风车 1 的绘制 第一个风车非常简单,由四个 半圆 组成,每个部分直接的关系是

  • Flutter CustomPaint自定义绘画示例详解

    目录 正文 CustomPaint 介绍 绘制点 PointMode3种模式 绘制线 和路径 绘制五子棋 总结 正文 CustomPaint是Flutter中用于自由绘制的一个widget,它与android原生的绘制规则基本一致,以当前Canves(画布)的左上角为原点进行绘制.在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 Cu

  • Python+Seaborn绘制分布图的示例详解

    目录 前言 示例 1 示例 2 示例 3 示例 4 示例 5 例子 6 例子 7 示例 8 示例 9 示例10 前言 在本文中,我们将介绍10个示例,以掌握如何使用用于Python的Seaborn库创建图表. 任何数据产品的第一步都应该是理解原始数据.对于成功和高效的产品,这一步骤占据了整个工作流程的很大一部分. 有几种方法用于理解和探索数据.其中之一是创建数据可视化.它们帮助我们探索和解释数据. 通过创建适当和设计良好的可视化,我们可以发现数据中的底层结构和关系. 分布区在数据分析中起着至关重

  • 封装flutter状态管理工具示例详解

    目录 引言 RxBinder 代码实现 Demo 完美运行 引言 关于 Flutter 状态管理,公司项目使用的是Bloc方案.Bloc 其实本质上是 provider 的封装扩展库,整体通过 InheritedWidget .Notifier 外加 Stream中转实现状态变更通知. 关于 Bloc 实现原理,有兴趣的同学可以观看这篇文章 Bloc原理解析 RxBinder 撇开Bloc内部实现策略,小轰尝试基于数据驱动模型,自定义一套状态管理工具.构思如下: 主要成员如下: RxBinder

  • flutter text组件使用示例详解

    目录 正文 Text组件 Text组件构造器上的主要属性 正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import

  • Canvas中绘制Geojson数据示例详解

    目录 需求分析 数据处理 将经度和纬度单独拆分出来 计算缩放比例 计算偏移度 将 Coordinates 进行缩放 使用 Canvas 进行绘制 需求分析 在做地图开发的时候遇到一个需求,是在 canvas 中绘制 Geojson 数据 数据格式为 EPSG:4326 的 Polygon: 三维数组 每一项都是由经纬度组成的 第一个点和最后一个点相同,表示 Polygon 是闭合的 [ [ [109.54420471485196, 35.76192112844663], [109.5442361

  • Flutter Drawer抽屉菜单示例详解

    本文实例为大家分享了Flutter Drawer抽屉菜单示例代码,供大家参考,具体内容如下 一.Flutter Drawer组件简介 1.源码查看 const Drawer({     Key? key,     this.elevation = 16.0, //阴影效果大小     this.child, //内容元素     this.semanticLabel, //关闭/打开抽屉时的通知信息   })  二.抽屉菜单示例 1.菜单项,使用 ListTile 实现 Expanded(  

  • JS前端使用canvas动态绘制函数曲线示例详解

    目录 前言 第一步:绘制坐标系 1.如何确定 x 轴和 y 轴的边界值 2.不是传入多少网格数就是多少网格 3.如何让坐标原点位于画布中心 4.刻度总是会有浮点数 第二步:画函数曲线 第三步:绘制辅助线和交点坐标 第四步:平移 第五步:缩放 第六步:动态绘制曲线 第七步:模糊到高清 前言 不说废话,我们直入主题.先来看看读了这篇文章你将得到什么,就是下面这个东西啦(是不是很清晰很顺滑): 那具体要做什么呢,我们来简单拆解一下步骤: 绘制坐标系 绘制多条函数曲线 绘制辅助线和坐标点 支持平移.缩放

  • Android开发Kotlin实现圆弧计步器示例详解

    目录 效果图 定义控件的样式 自定义StepView 绘制文本坐标 Android获取中线到基线距离 效果图 定义控件的样式 看完效果后,我们先定义控件的样式 <!-- 自定义View的名字 StepView --> <!-- name 属性名称 format 格式 string 文字 color 颜色 dimension 字体大小 integer 数字 reference 资源或者颜色 --> <declare-styleable name="StepView&q

  • flutter中使用流式布局示例详解

    目录 简介 Flow和FlowDelegate Flow的应用 总结 简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整.这时候就会用到flow layout,也就是流式布局. 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow.事实上,在flutter中,Flow通常是和FlowDelegate一起使用的,FlowDelegate用来设置Flow子组件的大小和位置,通过使用FlowDelegate.paintChildre可

随机推荐