掘金logo
掘金官方使用的logo从网页上看到是个svg文件，官方掘金logo，点击去可以看到logo和文字都是些path标签。
svg的原理也是通过路径绘制出来的图形，和Flutter路径绘制原理相似，同样可以绘制出任何平面图形，了解svg相关知识，可以看看张老师的svg解析：【Flutter 绘制番外】svg 文件与绘制 (上)。
为了巩固下Flutter绘制的相关知识，今天我们就用Flutter路径从头开始制作封装一个掘金的logo组件， 掘金的logo看起来很简单，但是其中还是涉及到了很多绘制以及三角函数的知识的。
绘制菱形
首先我们可以看到掘金最上面是一个菱形，通过量角器测得掘金logo的角度大约为100°，那么菱形的上下角度也就为100°。
为了封装的通用性，我们设菱形的边长为side，菱形上方一半的角度为angle= 50°，根据三角函数就可以得到菱形的四个坐标点，通过path路径进行链接。
代码:
double angle = pi / 18* 5;
// 菱形边长
double side = 50;
Paint paint = Paint()
..style = PaintingStyle.fill
..isAntiAlias = true
..strokeJoin= StrokeJoin.miter
..color = Color(0xff1E80FF).withOpacity(0.7);
// 顶部菱形
Path path = Path();
path.moveTo(-side * sin(angle), 0);
path.lineTo(0, -side * cos(angle));
path.lineTo(side * sin(angle), 0);
path.lineTo(0, side * cos(angle));
path.close();
canvas.drawPath(path, paint);
就可以得到以下效果，设置透明度为了下面计算效果可以看的更加直观。
绘制折线
接下来绘制菱形下方的折线，折线我们使用非填充画笔来实现，首先掘金的logo整体关于y轴对称，角度一致，关键要计算折线之间与菱形的距离，首先我们知道菱形四个点的坐标，那么最下面的坐标就是(0, side * cos(angle));, 根据掘金logo的设计，折线的宽度大约为菱形边长的0.7倍，所以这里我们暂设画笔的宽度为double paintWidth = side * 0.7;,y轴折线中心点距离菱形底部的距离为下图红线部分，这个距离大约为菱形边长的1.5倍。
| 左 | 左右连接 |
|---|---|
 |  |
代码：
Path path2 = Path();
// 原点距离下方折线中心y轴距离
double h1 = side * cos(angle) + side * 1.5;
path2.moveTo(-h1 * tan(angle), 0);
path2.lineTo(0, h1);
path2.lineTo(h1 * tan(angle), 0);
canvas.drawPath(path2, paint);
接下来绘制最下面的折线，这里为了让两条折线之间距离一致，我们需要计算出下图c点坐标，下图中b是中点，那么ab=bc，求出ab的长度也就知道c点的坐标了，过a点做bd垂直线交点设为g，那么已知ag等于线宽的1/2，角abg= angle°;，就能得出ab的长度 ab = paintWidth / 2 / sin(angle);，那么也就得到c点坐标=(0, h1+ab);
那么折线之间的距离也就可以算出来了。
代码：
Path path3 = Path();
double h2 = h1 +
(paintWidth / 2 / sin(angle) + side * 1.5);
path3.moveTo(-h2 * tan(angle), 0);
path3.lineTo(0, h2);
path3.lineTo(h2 * tan(angle), 0);
效果：
裁剪
上方大致画出来了效果，接下来需要进行对画布进行裁剪成以下阴影效果，主要就是计算b点和d点的坐标，涉及到两条直线的交点和三角函数。
首先a点的值可以通过两条相交直线求交点公式可以得出，然后过b点做红线的中垂线先计算出ab的值，已知bd = paintWidth / 2,角bad = 180°-100°=80°，那么就可以得出ab = paintWidth / 2 / sin(pi - angle * 2)，然后再分别过a点和b点做垂直三角形，就能得出b点坐标为(a.x - paintWidth / 2 / sin(pi - angle * 2) * sin(angle), a.y + paintWidth / 2 / sin(pi - angle * 2) * cos(angle));
同理d点坐标也可得出。
计算代码：
Point left = toTwoPoint(Point(-side * sin(angle), 0),
Point(0, -side * cos(angle)), Point(-h2 * tan(angle), 0), Point(0, h2));
Point right = toTwoPoint(Point(side * sin(angle), 0),
Point(0, -side * cos(angle)), Point(h2 * tan(angle), 0), Point(0, h2));
Path pathBg = Path();
pathBg.moveTo(0, -side * cos(angle));
pathBg.lineTo(
left.x.toDouble() - paintWidth / 2 / sin(pi - angle * 2) * sin(angle),
left.y.toDouble() + paintWidth / 2 / sin(pi - angle * 2) * cos(angle));
pathBg.lineTo(left.x.toDouble(), h2 + (paintWidth / 2 / sin(pi - angle * 2) / sin(angle)));
pathBg.lineTo(right.x.toDouble(), h2 + (paintWidth / 2 / sin(pi - angle * 2)/ sin(angle)));
pathBg.lineTo(right.x.toDouble() + paintWidth / 2 / sin(pi - angle * 2) * sin(angle),
right.y.toDouble() + paintWidth / 2 * cos(angle));
pathBg.close();
// 通过裁剪画布得到最终效果
canvas.clipPath(pathBg);
效果：
| 原始 | 移到画布中间 |
|---|---|
 |  |
上面我们是通过菱形边长去求的各个坐标点，现在我们为了使用方便需求是已知组件宽高，求菱形的边长，这样组件使用起来才会比较方便精准的控制组件大小，这里就是一些的繁琐的倒推计算，假设我们的高度是我们设定的height，那么宽度其实是也就确定了，因为角度一旦确立，宽度自然也就确定了，所以这里我们向外暴露两个属性，一个组件高度，一个菱形角度即可。
完整源码：
/// 掘金logo组件
class JueJinLogo extends StatelessWidget {
final double height; // 组件高度
final double angle; // 菱形上下角度1/2
const JueJinLogo({Key? key, this.height = 140, this.angle = pi / 18 * 5})
: super(key: key);
@override
Widget build(BuildContext context) {
double m = 0.7;// 折线线宽相对菱形边长倍数
double n = 1.5;// 折线之间线宽相对菱形边长倍数
var a = (2 * cos(angle) + m * 0.5 / sin(angle) + 3);
double side = height / (a + m * 0.5 / sin(pi - angle * 2) / sin(angle));
double paintWidth = m * side;
double h2 = side * cos(angle) +
side * n +
(paintWidth / 2 / sin(angle) + side * n);
Point right = PointUtil.toTwoPoint(Point(side * sin(angle), 0),
Point(0, -side * cos(angle)), Point(h2 * tan(angle), 0), Point(0, h2));
double width = (right.x.toDouble() +
paintWidth / 2 / sin(pi - angle * 2) * sin(angle)) *
2;
return CustomPaint(
size: Size(width, height),
painter: _JueJinLogoPaint(side, angle),
);
}
}
class _JueJinLogoPaint extends CustomPainter {
double side;
double angle;
_JueJinLogoPaint(this.side, this.angle);
@override
void paint(Canvas canvas, Size size) {
canvas.translate(size.width / 2, size.height / 2);
double paintWidth = side * 0.7;
Paint paint = Paint()
..strokeWidth = paintWidth
..style = PaintingStyle.fill
..isAntiAlias = true
..strokeJoin = StrokeJoin.miter
..color = Color(0xff1E80FF);
canvas.save();
Path path = Path();
path.moveTo(-side * sin(angle), 0);
path.lineTo(0, -side * cos(angle));
path.lineTo(side * sin(angle), 0);
path.lineTo(0, side * cos(angle));
path.close();
Path path2 = Path();
double h1 = side * cos(angle) + side * 1.5;
path2.moveTo(-h1 * tan(angle), 0);
path2.lineTo(0, h1);
path2.lineTo(h1 * tan(angle), 0);
Path path3 = Path();
double h2 = h1 + (paintWidth / 2 / sin(angle) + side * 1.5);
path3.moveTo(-h2 * tan(angle), 0);
path3.lineTo(0, h2);
path3.lineTo(h2 * tan(angle), 0);
// 平移组件到画布中心
canvas.translate(
0,
side * cos(angle) -
(h2 + (paintWidth / 2 / sin(angle)) + side * cos(angle)) / 2);
Point left = PointUtil.toTwoPoint(Point(-side * sin(angle), 0),
Point(0, -side * cos(angle)), Point(-h2 * tan(angle), 0), Point(0, h2));
Point right = PointUtil.toTwoPoint(Point(side * sin(angle), 0),
Point(0, -side * cos(angle)), Point(h2 * tan(angle), 0), Point(0, h2));
Path pathBg = Path();
pathBg.moveTo(0, -side * cos(angle));
pathBg.lineTo(
left.x.toDouble() - paintWidth / 2 / sin(pi - angle * 2) * sin(angle),
left.y.toDouble() + paintWidth / 2 / sin(pi - angle * 2) * cos(angle));
pathBg.lineTo(left.x.toDouble(),
h2 + (paintWidth / 2 / sin(pi - angle * 2) / sin(angle)));
pathBg.lineTo(right.x.toDouble(),
h2 + (paintWidth / 2 / sin(pi - angle * 2) / sin(angle)));
pathBg.lineTo(right.x.toDouble() + paintWidth / 2 * sin(angle),
right.y.toDouble() + paintWidth / 2 * cos(angle));
pathBg.close();
// 裁剪画布
canvas.clipPath(pathBg);
// 绘制菱形以及折线
canvas.drawPath(path, paint);
canvas.drawPath(path2, paint..style = PaintingStyle.stroke);
canvas.drawPath(path3, paint..style = PaintingStyle.stroke);
canvas.restore();
}
@override
bool shouldRepaint(covariant _JueJinLogoPaint oldDelegate) {
return false;
}
}
class PointUtil {
/// 两点求直线方程
static double towPointKb(Point<double> p1, Point<double> p2,
{bool isK = true}) {
/// 求得两点斜率
double k = 0;
double b = 0;
// 防止除数 = 0 出现的计算错误 a e x轴重合
if (p1.x == p2.x) {
k = (p1.y - p2.y) / (p1.x - p2.x - 1);
} else {
k = (p1.y - p2.y) / (p1.x - p2.x);
}
b = p1.y - k * p1.x;
if (isK)
return k;
else
return b;
}
static Point<double> toTwoPoint(
Point<double> a, Point<double> b, Point<double> m, Point<double> n) {
double k1 = towPointKb(a, b);
double b1 = towPointKb(a, b, isK: false);
double k2 = towPointKb(m, n);
double b2 = towPointKb(m, n, isK: false);
return Point((b2 - b1) / (k1 - k2), (b2 - b1) / (k1 - k2) * k1 + b1);
}
}
使用
使用也是非常的方便，直接设置组件高度即可。
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: JueJinLogo(
height: 200,
),
);
}
效果：
因为这里暴露了角度，所以也可以自定义角度.
当然这里还可以暴露一些颜色、渐变色等一些属性，就不一一展示了。掌握原理即可。
总结
通过制作掘金logo这个组件，又巩固了Flutter绘制的的相关知识和一些基础的三角函数计算知识，同时对封装组件所需注意的事项也有了加深的理解，那这篇文章就到这里，希望对你在Flutter绘制以及封装组件方面有所帮助，如有帮助，欢迎点赞，如有疑问，欢迎指正~
作者：老李code
链接：https://juejin.cn/post/7165139559875870750
最后
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。
如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。
全套视频资料：
一、面试合集
二、源码解析合集
三、开源框架合集
欢迎大家一键三连支持，若需要文中资料，直接点击文末CSDN官方认证微信卡片免费领取↓↓↓
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
