新法师帝国,比比贴网,黄苓滋养睡眠眼膜
今天。。。是一个非常重要的日子-女神节。作为一名程序员，如何向心仪的人低调而又不失逼格的表达祝福，关系到我们后半生的幸福，祝福的到位，普通朋友加个字变成女朋友，女朋友变成老婆，如果已经是老婆了，那么这个月的零花钱又能多好几百，想想都激动。
回到现实，作为程序员，我们当然要独一无二，要与众不同，要突破天际，要能体现我们的身份，逼格满满，因此我们要给女神开发一个天上地下、唯吾独尊的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代码如下：
@override
widget 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的微信交流群和“技术人运营自己（吹nb）”交流群，欢迎您的加入，让我们一起学习，一起进步，开始我们的故事。
添加微信请备注：flutter（进flutter交流群）、吹nb（进吹nb群）、2（都进）。我希望您备注“2”，生活不止眼前的苟且，还有诗和《远方》。
微信：mqd_zzy
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论