基于Flutter實現(xiàn)多邊形和多角星組件
前言
開發(fā)中,免不了會用到多邊形、多角星等圖案,比較常用的多邊形比如雷達圖、多角星比如評價星級的五角星等,本篇文章就使用Flutter繪制封裝一個這樣的組件。
組件功能
- 正多邊形
- 正多角星
- 支持同時繪制多邊形和多角星
- 角的飽滿度調(diào)整
1、原理
五角星為例:
可以看到,在一個五角星中,一共有10
個點,有5
個點平均分布在大圓上面,有5
個點平均分布在小圓上面,相當(dāng)于對360度進行了10
等分,那么我們只需要將這10
個點找到,用線連起來即可。
2、找點
既然知道了點的分布規(guī)律,我們只需要拿到圓的半徑通過三角函數(shù)就能得到每個點的坐標,通過path路徑進行連接即可。
// 大圓半徑 double r = bigR ?? size.width / 2 / 2; // 小圓半徑 double r2 = smallR ?? size.width / 2 / 2 - 12; Path path = Path(); // 設(shè)置起點 path.moveTo(r * cos(pi / count), r * sin(pi / count)); // 將圓等分 count = 角的個數(shù) /// 繪制角 for (int i = 2; i <= count * 2; i++) { if (i.isEven) { path.lineTo(r2 * cos(pi / count * i), r2 * sin(pi / count * i)); } else { path.lineTo(r * cos(pi / count * i), r * sin(pi / count * i)); } } // 閉合 path.close(); canvas.drawPath(path, paint2); // 繪制輔助線 path.reset(); for (int i = 1; i <= count * 2; i++) { if (i.isEven) { path.reset(); path.lineTo(r2 * cos(pi / count * i), r2 * sin(pi / count * i)); canvas.drawPath(path, paint2..color = Colors.redAccent); } else { path.reset(); path.lineTo(r * cos(pi / count * i), r * sin(pi / count * i)); canvas.drawPath(path, paint2..color = Colors.blue); } }
默認效果是這樣的,
畫布默認0度是X軸右移方向,如果需要將一個角朝著正上,這里需要將畫布進行旋轉(zhuǎn)一定角度,將0度改為Y軸向上方面,然后再偏移一定角度即可。
//旋轉(zhuǎn)角度讓尖角朝上 canvas.rotate(pi / 2 * 3 + pi / count);
角的點找到了,那么多邊形就直接連接大圓上的角就行了,就很簡單。
角的飽滿度通過修改小圓半徑即可。
最終效果圖:
源碼:
enum Type { angle, // 角 side, // 邊 all, // 都有 } /// 角 邊 型 class Polygonal extends StatelessWidget { final double size; // 組件大小 final double? bigR; // 大圓半徑 final double? smallR; // 小圓半徑 final int count; // 幾邊形 final Type type; // 五角星or五邊形 final bool isFill; // 是否填充 final Color color; // 顏色 const Polygonal( {Key? key, this.size = 80, this.bigR, this.smallR, this.count = 3, this.type = Type.angle, this.isFill = false, this.color = Colors.black87}) : super(key: key); @override Widget build(BuildContext context) { return CustomPaint( size: Size(size, size), painter: _PolygonalPainter(bigR, smallR, color: color, count: count, type: type, isFill: isFill), ); } } class _PolygonalPainter extends CustomPainter { final double? bigR; final double? smallR; final int count; // 幾邊形 final Type type; // 五角星or五邊形 final bool isFill; // 是否填充 final Color color; // 顏色 _PolygonalPainter(this.bigR, this.smallR, {required this.count, required this.type, required this.isFill, required this.color}); @override void paint(Canvas canvas, Size size) { canvas.clipRect(Offset.zero & size); canvas.translate(size.width / 2, size.height / 2); Paint paint2 = Paint() ..color = color ..strokeJoin = StrokeJoin.round ..style = isFill ? PaintingStyle.fill : PaintingStyle.stroke ..strokeWidth = 2; double r = bigR ?? size.width / 2 / 2; double r2 = smallR ?? size.width / 2 / 2 - 12; // 將圓等分 Path path = Path(); canvas.rotate(pi / count + pi / 2 * 3); path.moveTo(r * cos(pi / count), r * sin(pi / count)); /// 繪制角 if (type == Type.angle || type == Type.all) { for (int i = 2; i <= count * 2; i++) { if (i.isEven) { path.lineTo(r2 * cos(pi / count * i), r2 * sin(pi / count * i)); } else { path.lineTo(r * cos(pi / count * i), r * sin(pi / count * i)); } } path.close(); canvas.drawPath(path, paint2); } /// 繪制邊 if (type == Type.side || type == Type.all) { path.reset(); path.moveTo(r * cos(pi / count), r * sin(pi / count)); for (int i = 2; i <= count * 2; i++) { if (i.isOdd) { path.lineTo(r * cos(pi / count * i), r * sin(pi / count * i)); } } path.close(); canvas.drawPath(path, paint2); } } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } }
小結(jié):
圓其實可以理解為一個無限邊的正多邊形,這也印證了世上沒有完美的圓。因為邊是無限的,通過本篇我們利用圓的輔助繪制了多邊形以及多角星,希望對大家有所幫助 ~
以上就是基于Flutter實現(xiàn)多邊形和多角星組件的詳細內(nèi)容,更多關(guān)于Flutter多邊形組件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android之獲取手機內(nèi)部及sdcard存儲空間的方法
今天小編就為大家分享一篇Android之獲取手機內(nèi)部及sdcard存儲空間的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Android編程開發(fā)實現(xiàn)帶進度條和百分比的多線程下載
這篇文章主要介紹了Android編程開發(fā)實現(xiàn)帶進度條和百分比的多線程下載,總結(jié)了前面關(guān)于Java多線程下載的技巧,實例分析了Android實現(xiàn)帶百分比和進度條的多線程下載技巧,需要的朋友可以參考下2015-12-12不允許錯過的Anndroid技術(shù)經(jīng)驗60條
不允許錯過的Anndroid技術(shù)經(jīng)驗60條,與大家分享,希望可以提高大家Android開發(fā)水平,感興趣的朋友可以參考一下2016-02-02