女神节 | 程序员如何低调而又不失逼格
今天。。。是一个非常重要的日子-女神节。作为一名程序员,如何向心仪的人低调而又不失逼格的表达祝福,关系到我们后半生的幸福,祝福的到位,普通朋友加个字变成女朋友,女朋友变成老婆,如果已经是老婆了,那么这个月的零花钱又能多好几百,想想都激动。
回到现实,作为程序员,我们当然要独一无二,要与众不同,要突破天际,要能体现我们的身份,逼格满满,因此我们要给女神开发一个天上地下、唯吾独尊的App绝对是你不二的选择。
废话不多说,No 图 No 说话:
先来分析一波:
首先上面的效果是一直在绘制路径,当绘制完花和叶子时在对其着色,因此这里比较难是如何获取路径的点坐标,只要有点的坐标了一个个的画出来也就实现了上面的效果。
那么现在的重点就是如何获取点坐标,一种方法是人工一个一个的写,然后调整,这种方法工作量太大了,作为程序员怎么能用这种方法呢?怎么才可以让程序生成这些坐标呢?
想想我们在监听手势(鼠标)时是不是可以获取到当前点的坐标,移动的时候也可以获取到一个移动的路径坐标,因此我们只需要在屏幕上先加载想要的图片,然后按照图片上的路径移动,是不是就可以获取到我们想要的路径了啊。
对于任何语言来说都可以按照上面的思路来实现,下面以目前非常火热的Flutter来实现这个功能。
好,首先来加载一张图片,然后监听其手势(鼠标)移动事件,代码如下:
Container(width: 400,height: 700,child: GestureDetector(onLongPressStart: (LongPressStartDetails details) {print('${details.localPosition},');},onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {print('${details.localPosition},');},onLongPressEnd: (LongPressEndDetails details) {print('${details.localPosition},');},child: Image.asset('images/123.png',fit: BoxFit.fill,),),
)
这里要注意2点:
- 图片显示的大小最好和最终的画布一样大小,这样得到的坐标不需要在转换。
- 图片的宽高比和画布的宽高比要一样。
我们把路径输出到控制台,后台只需将这些坐标拷贝到应用程序即可,将这些坐标定义为数组,如下:
static final List<Offset> flowerPoints = [Offset(182.0, 136.3),Offset(182.7, 135.3),Offset(183.0, 135.3),Offset(183.3, 135.3),...
)
点到路径获取到,下面就是绘制了,先绘制红色的花骨朵,在Flutter中绘制路径需要继承CustomPainter类,重写paint
方法,绘制路径及填充颜色代码如下:
@override
void paint(Canvas canvas, Size size) {//将花变为红色if (flowerPaths.length >= RoseData.flowerPoints.length) {var path = Path();for (int i = 0; i < flowerPaths.length; i++) {if (i == 0) {path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy);} else {path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy);}}_paint.style = PaintingStyle.fill;_paint.color = _flowerColor;canvas.drawPath(path, _paint);}//绘制线_paint.style = PaintingStyle.stroke;_paint.color = _strokeColor;canvas.drawPoints(PointMode.polygon, flowerPaths, _paint);
}
这里要注意只有当当花骨朵所有的路径都绘制完之后才填充颜色,而且要先填充颜色,然后绘制路线,不然路线会被填充颜色覆盖。
要想有绘制路径的效果,需要将点依次增加,增加动画控制器,控制绘制路径,代码如下:
AnimationController _controller;
Animation<num> _animation;@override
void initState() {_controller = AnimationController(duration: Duration(seconds: 10), vsync: this)..addListener(() {setState(() {_flowerPaths = RoseData.flowerPoints.sublist(0, _animation.value.floor());});});_animation = Tween(begin: 0.0,end: RoseData.flowerPoints.length).animate(_controller);
}
构建UI代码如下:
@overrideWidget build(BuildContext context) {Container(width: 400,height: 700,child: CustomPaint(painter: RosePaint(_flowerPaths),),)}
RosePaint是自定义的CustomPaint。效果如下:
在最终的填充上发现有一部分没有填充上,图中蓝色点为最后一个点,所以需要在增加2个点,绿色和黄色位置的点,把未填充区域填充上。
填充点代码如下:
static final List<Offset> flowerPoints = [Offset(182.0, 136.3),Offset(182.7, 135.3),...Offset(179.3, 301.7),Offset(237.7, 144.7),
];
在绘制线的时候需要将这2个点去掉:
if (flowerPaths.length >= RoseData.flowerPoints.length) {var path = Path();for (int i = 0; i < flowerPaths.length; i++) {if (i == 0) {path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy);} else {path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy);}}_paint.style = PaintingStyle.fill;_paint.color = _flowerColor;canvas.drawPath(path, _paint);
}
//绘制线
_paint.style = PaintingStyle.stroke;
_paint.color = _strokeColor;
//去掉最后2个点,最后2个点为了绘制红色
var points = flowerPaths.sublist(0, max(0, flowerPaths.length - 2));
canvas.drawPoints(PointMode.polygon, points, _paint);
花骨朵就好了,其他的叶子和部位也是一样的画法,这里就不在介绍了,由于代码比较多,就不全贴在这里了,如果需要可以加我微信。
交流
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
女神节 | 程序员如何低调而又不失逼格相关推荐
- 女神节 | 程序员小姐姐把这份巧克力,送给你
说起程序员, 很多人会第一时间想到 "短发.格子衬衣.运动鞋"的男生形象. 在大多数人的观念中, 编程这种需要理性思维的工作 还是更适合男生来做. 但这都是人们的偏见而已, 在男女 ...
- 史上最强女游戏程序员
也许你听说过John Carmack 和Tim Sweeney等大牛的名字,而向来游戏工业都是阳盛阴衰,适逢国际妇女节,今天我为大家介绍游戏业界一位史上最强女游戏程序员:Corrinne Yu. 简历 ...
- java女程序员工作_女生适合做java程序员吗 女java程序员好找工作
女生适合做java程序员吗 女java程序员好找工作?随着IT行业的飞速发展,程序员越来越受到重视,一些性格比较强势的女生,就也想加入到Java程序员的行列,因为他们感觉女生做这样的事情不会比男生差, ...
- 中文女和程序员的爱情奇遇[转]
摘要:"我所认为最深沉的爱,莫过于分开以后,我将自己,活成了你的样子".--写给所有热爱互联网和相信爱情的人. 菜菜是个开朗乐观的90后小文艺少女,随和开放.饭饭是个睿智严谨的80 ...
- 一杯苦咖啡 | 公司来了个漂亮女实习程序员
原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,转载请保留出处. 我知道,大假期的,很多人都放飞了自我.技术文章太烧脑,在假期容易看过就忘了.所以奉上小故事一枚,感叹一下岁月的蹉跎.温馨提 ...
- 一杯苦咖啡 公司来了个漂亮女实习程序员
我知道,大假期的,很多人都放飞了自我.技术文章太烧脑,在假期容易看过就忘了.所以奉上小故事一枚,感叹一下岁月的蹉跎. 温馨提示:本行文来源于网上,纯属胡扯,如果想带入角色:可以带入我朋友的故事.如有雷 ...
- 中文女与程序员的爱情
程序员写的版本:Ourlife 托管在Github号..一共39次提交.. Markdown+Git 中文女写的版本:时光太窄 指缝太宽 写在起点女生网上.. 简介: 时光太窄,指缝太宽.青春年少的时 ...
- 中文女和程序员的爱情奇遇(转自博客园)
摘要:"我所认为最深沉的爱,莫过于分开以后,我将自己,活成了你的样子".--写给所有热爱互联网和相信爱情的人. 菜菜是个开朗乐观的90后小文艺少女,随和开放.饭饭是个睿智严谨的80 ...
- 度娘弱爆了:看看 Google 日本女优程序员
最近微博上逐渐开始流传另一位神奇程序员妹子.这位笑得很甜的妹子之所以神奇并受人"仰慕",一方面因为她在Google当实习程序员的身份,而另一方面更关键的是,她竟然还是一位兼职女优, ...
最新文章
- inet_pton和inet_ntop函数
- 工作9年开发面试华为要薪1W,华为员工:我司没有这么低工资的岗.....
- R语言ggplot2可视化:可视化堆叠的直方图、在bin中的每个分组部分添加数值标签、使用position_stack函数设置
- Python基础入门:常用的os操作
- react如何获取option的下标和值_react中option标签如何确定selected?
- IIS 5.0 和 6.0 的 ASP.NET 应用程序生命周期概述
- http get 消息的作用是什么?_http基础知识
- 使用gitlab初次上传代码
- 借助neo4j-admin导入csv文件构建实体与联系
- 腾讯云linux配置服务器配置,centos7+腾讯云服务器搭建wordpress
- c++文件内容与输入内容进行比较_使用位运算对数据或文件内容进行加密
- C语言显示系统时间的几个办法
- 未来五年最具前景的一门编程语言是什么?
- 使用C#向ACCESS中插入数据
- Atitit 技术成果有哪些 1. 技术成果	1 2. 技术成果分类	2 2.1. 职务技术成果和非职务技术成果	2 2.2. 专利技术成果和非专利技术成果	2 3. 范例代码项目 与代码片段	2
- DatagramPacket.getData()与DatagramPacket.getLength()的误区
- 根据两点经纬度坐标计算距离
- Flutter 未检测到iOS模拟器以及Android Studio无法获取iOS模拟器的问题
- TM中拒收自定义表情的设置方法(转)
- Pattern Recognition And Machine Learning读书会前言
热门文章
- deep leaning
- 存储过程中的in out in out 三种类型的参数
- TansorFlow和Keras的入门教程
- 使用Visual Studio Code 第一次开发C# 运行Hello World!
- PCB回流焊温度曲线设定优化
- labview的认识基础材料
- python实现基于TNDADATASET的人体行为识别
- 计算机重启一直显示正在准备,电脑一直显示正在准备windows怎么办 为什么我的电脑重启后一直显示正在准备windows - 云骑士一键重装系统...
- win10输入法在sublime中光标不跟随。
- JAVA I/0 流学习(一)