Flutter 绘制瓷砖线 Tiled Lines
前言
前几天发现了一个使用 <canvas>
绘制图形的教程 generative artistry
感觉很有意思,尝试用 Flutter 实现。本文实现第一篇教程的图形 Tiled Lines 效果如下。
创建画布
首先使用一个 Container
控件创建一个 320*320
大小的绘制区域,添加 CustomPaint
画布和一个继承 CustomPainter
的画笔 TiledLinesPainter
。关于 CustomPaint
和 CustomPainter
的知识可以查阅这篇文章 使用 Flutter 绘制图表(一)柱状图 📊。
1 | import 'package:flutter/material.dart'; |
绘制线条
创建好画布后在 TiledLinesPainter
的 paint
方法里进行绘制。添加一个 _drawLine
方法用来绘制线条,绘制线条需要起始点和终止点,通过参数将数值传入。
1 | class TiledLinesPainter extends CustomPainter { |
加入随机性
使用 Random().nextBool()
方法创建一个随机的布尔值,在绘制线条之前改变起始点和终止点的坐标,这样 _drawLine
方法就有了绘制不同方向的线条的能力。
1 | void _drawLine( |
绘制更多的线条
可以绘制更多的线条喽!给 TiledLinesPainter
添加一个 step
属性,表示在画布上每隔多长距离绘制一条线。使用 step
将画布分割为多个小的方格,在每个小的方格里面绘制线条。
1 | class TiledLinesPainter extends CustomPainter { |
绘制边框和阴影
最后给画布添加边框和阴影效果,大功告成!👏 感谢阅读。
1 | import 'dart:math'; |