Flutter笔记-完全基于Flutter绘图技术绘制Dart语言吉祥物(Dash)-下

**Flutter笔记-**完全基于Flutter绘图技术绘制一个精美的Dart吉祥物Dash(下)

作者李俊才 (jcLee95)blog.csdn.net/qq_28550263
邮箱 : 291148484@163.com
本文地址blog.csdn.net/qq_28550263...

另见:

上上篇文章:《完全基于Flutter绘图技术绘制一个精美的Dart语言吉祥物Dash(上)》

上一篇文章:《完全基于Flutter绘图技术绘制一个精美的Dart语言吉祥物Dash(中)》

【介绍】:本文完全基于Flutter绘图技术绘制一个精美的Dash图标(下)。

目 录

什么也不用多说了,今天我是来炫技的。完全基于Flutter绘图技术绘制一个精美的Dart吉祥物Dash

(上一篇博文中):

1. 上代码
第一部分:基本页面框架
第二部分:Dash 绘制器

(接续上一篇博文)

ini 复制代码
    var path150 = Path();
    path150.moveTo(696.04, 618.43);
    path150.quadraticBezierTo(706.75, 622.64, 713.05, 630.73);
    path150.quadraticBezierTo(724.82, 645.85, 736.52, 660.91);
    path150.arcTo(Rect.fromLTRB(734.73, 660.3, 739.19, 664.7), 29.8, 180.0, false);
    path150.lineTo(728.95, 728.25);
    path150.arcTo(Rect.fromLTRB(727.3000000000001, 728.13, 729.12, 729.93), -1.8, 180.0, false);
    path150.lineTo(705.20, 733.43);
    path150.quadraticBezierTo(704.74, 731.47, 705.43, 730.23);
    path150.quadraticBezierTo(710.20, 721.68, 715.10, 713.74);
    path150.arcTo(Rect.fromLTRB(711.58, 706.81, 719.64, 714.77), -35.6, -180.0, false);
    path150.lineTo(710.56, 687.25);
    path150.cubicTo(715.32, 685.70, 717.93, 683.03, 722.02, 680.42);
    path150.quadraticBezierTo(722.47, 680.13, 722.96, 680.36);
    path150.lineTo(728.74, 683.12);
    path150.arcTo(Rect.fromLTRB(728.78, 681.38, 730.0799999999999, 682.68), 0.0, -180.0, false);
    path150.lineTo(724.96, 678.46);
    path150.quadraticBezierTo(724.44, 678.04, 724.99, 677.65);
    path150.quadraticBezierTo(726.67, 676.46, 727.02, 674.31);
    path150.quadraticBezierTo(727.12, 673.65, 726.52, 673.38);
    path150.lineTo(723.27, 671.89);
    path150.quadraticBezierTo(722.76, 671.65, 722.23, 671.84);
    path150.lineTo(716.84, 673.78);
    path150.arcTo(Rect.fromLTRB(714.71, 675.22, 718.3299999999999, 678.8399999999999), 0.0, -180.0, false);
    path150.lineTo(719.52, 678.84);
    path150.arcTo(Rect.fromLTRB(719.0500000000001, 679.1800000000001, 720.09, 680.2), 41.7, 180.0, false);
    path150.lineTo(712.85, 684.81);
    path150.arcTo(Rect.fromLTRB(711.05, 683.28, 712.47, 684.7), 0.0, 180.0, false);
    path150.lineTo(714.95, 675.80);
    path150.arcTo(Rect.fromLTRB(714.0600000000001, 674.34, 715.92, 676.14), 50.2, -180.0, false);
    path150.lineTo(714.64, 673.79);
    path150.arcTo(Rect.fromLTRB(714.0300000000001, 671.96, 715.87, 673.78), 64.0, 180.0, false);
    path150.lineTo(719.50, 669.16);
    path150.arcTo(Rect.fromLTRB(717.99, 666.97, 719.5899999999999, 668.5699999999999), 0.0, -180.0, false);
    path150.lineTo(709.58, 670.30);
    path150.arcTo(Rect.fromLTRB(708.73, 670.79, 710.01, 672.0699999999999), 0.0, -180.0, false);
    path150.lineTo(710.65, 672.38);
    path150.quadraticBezierTo(711.16, 672.76, 710.65, 673.14);
    path150.lineTo(708.19, 674.98);
    path150.quadraticBezierTo(706.00, 671.80, 707.52, 668.37);
    path150.quadraticBezierTo(709.32, 668.95, 709.53, 667.50);
    path150.quadraticBezierTo(709.81, 665.65, 710.17, 664.49);
    path150.arcTo(Rect.fromLTRB(710.4799999999999, 664.2199999999999, 711.14, 664.88), 0.0, 180.0, false);
    path150.quadraticBezierTo(711.00, 666.02, 712.30, 666.18);
    path150.quadraticBezierTo(713.21, 666.29, 714.09, 665.48);
    path150.quadraticBezierTo(715.64, 664.04, 716.73, 662.09);
    path150.quadraticBezierTo(717.00, 661.60, 716.45, 661.48);
    path150.quadraticBezierTo(714.15, 660.95, 712.05, 662.03);
    path150.arcTo(Rect.fromLTRB(710.8900000000001, 660.5500000000001, 712.01, 661.65), 12.3, 180.0, false);
    path150.quadraticBezierTo(715.32, 658.09, 718.97, 661.10);
    path150.quadraticBezierTo(719.47, 661.51, 719.19, 662.08);
    path150.lineTo(717.32, 666.06);
    path150.arcTo(Rect.fromLTRB(717.4200000000001, 666.33, 718.78, 667.6899999999999), 0.0, -180.0, false);
    path150.cubicTo(720.62, 666.38, 723.03, 665.36, 724.32, 662.90);
    path150.quadraticBezierTo(726.71, 658.33, 726.35, 653.90);
    path150.arcTo(Rect.fromLTRB(720.94, 651.12, 724.76, 654.92), 59.1, -180.0, false);
    path150.quadraticBezierTo(721.43, 655.22, 721.13, 658.02);
    path150.quadraticBezierTo(721.05, 658.77, 720.45, 658.32);
    path150.lineTo(718.96, 657.21);
    path150.quadraticBezierTo(718.62, 656.96, 718.21, 657.06);
    path150.lineTo(712.56, 658.49);
    path150.arcTo(Rect.fromLTRB(711.08, 657.26, 712.4, 658.5799999999999), 0.0, 180.0, false);
    path150.quadraticBezierTo(711.58, 656.26, 713.18, 656.27);
    path150.quadraticBezierTo(713.75, 656.27, 714.15, 655.86);
    path150.lineTo(714.80, 655.19);
    path150.arcTo(Rect.fromLTRB(713.86, 653.9, 714.84, 654.86), 16.1, -180.0, false);
    path150.quadraticBezierTo(712.80, 654.70, 711.55, 653.83);
    path150.arcTo(Rect.fromLTRB(709.8199999999999, 653.27, 711.28, 654.73), 0.0, -180.0, false);
    path150.lineTo(709.48, 655.45);
    path150.arcTo(Rect.fromLTRB(707.9499999999999, 654.89, 709.15, 656.07), 42.9, 180.0, false);
    path150.quadraticBezierTo(706.62, 653.23, 703.57, 656.30);
    path150.quadraticBezierTo(700.52, 643.33, 697.64, 630.98);
    path150.quadraticBezierTo(695.87, 623.41, 696.04, 618.43);
    path150.close();
    path150.moveTo(712.01, 668.37);
    path150.lineTo(713.32, 668.08);
    path150.quadraticBezierTo(713.78, 667.98, 713.67, 667.53);
    path150.quadraticBezierTo(713.54, 666.98, 712.75, 666.97);
    path150.quadraticBezierTo(711.78, 666.96, 711.42, 667.35);
    path150.arcTo(Rect.fromLTRB(711.39, 667.75, 712.63, 668.99), 0.0, -180.0, false);
    path150.close();

    canvas.drawPath(path150, paint150);

    final paint151 = Paint()
      ..color = const Color(0xFFd32735)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;

 

(由于掘金字数过分限制,掘金版本不得已省略了大量内容)

大量代码和相关内容请在下面地址浏览:

jclee95.blog.csdn.net/article/det...

最后效果如下

后记:我难道会一条一条写吗?

本来是想做一个图标模块解决,Flutter字体图标不能实现多彩色缺陷的(事实上Flutter字体图标是依据canvas绘制的,但是目前section.json文件的颜色信息是不能被Flutter支持的!并且很多在Web中可以使用的字体图标不经过处理是不能再Flutter中使用的!!!)。因此我自己写了一个小工具转换的,本来是想用于转换我做好的彩色图标的。

但是目前很多简单的图片效果反而很难看,有一些曲线的指令不是很好处理。但是突然发现,涉及的绘图指令越多的、复杂图形,由于丢失部分反而不打紧,更加与原先画质接近。

于是做了这个dash图标,类似地,我还绘制了一些其它地图片,比如复杂的------

上面这张图一共用了数万行代码,如果是人工一定做不到的。相比于使用图像,Flutter绘图的意义在于实现了另外一个展示图形的机制,并且可以配合变换和动画实现静态图片实现不了的复杂效果。

我想,如果有兴趣的、并且在这方面有经验的大神,可以一起研究和探讨这个课题,并制作和相关相关轮子。

相关推荐
火柴就是我1 天前
flutter 之真手势冲突处理
android·flutter
Speed1231 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间1 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭1 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone1 天前
从flutter源码看其渲染机制
android·flutter
ALLIN2 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei2 天前
Flutter 国际化
flutter
Dabei2 天前
Flutter MQTT 通信文档
flutter
Dabei2 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉2 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter