likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 22

**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 绘制器

（接续上一篇博文）

    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绘图技术绘制Dart语言吉祥物（Dash）-下

后记：我难道会一条一条写吗？

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

但是目前很多简单的图片效果反而很难看，有一些曲线的指令不是很好处理。但是突然发现，涉及的绘图指令越多的、复杂图形，由于丢失部分反而不打紧，更加与原先画质接近。 于是做了这个dash图标，类似地，我还绘制了一些其它地图片，比如复杂的——

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

上面这张图一共用了数万行代码，如果是人工一定做不到的。相比于使用图像，Flutter绘图的意义在于实现了另外一个展示图形的机制，并且可以配合变换和动画实现静态图片实现不了的复杂效果。 我想，如果有兴趣的、并且在这方面有经验的大神，可以一起研究和探讨这个课题，并制作和相关相关轮子。

转载自:https://juejin.cn/post/7294556533933113396
评论
请登录