美文网首页程序员
flutter实战-一个手绘草稿板的原型开发

flutter实战-一个手绘草稿板的原型开发

作者: juice_1d28 | 来源:发表于2019-10-10 16:33 被阅读0次

作为flutter的小白用户,想入门这个技能,又不想看一堆堆的资料,那怎么办呢?跟着我走呗,因为我就是这样入门的:

没有目标的学习都是浪费时间

没有目标,茫茫书海,不知道从哪里着手,所以就给自己定一个目标吧,我就是要用flutter做一款手绘、涂鸦的草稿板,

那么她应该有如下基本功能:

一个绘图界面

可以修改画笔大小

可以修改画笔颜色

可以放大缩小、旋转和移动

可以出错回退、前进

可以画面清除

先上张完成情况的demo图吧:

以上罗列的是草稿板的基本功能,后期可能还有拓展功能,比如登录,分享,历史查看等等就作为下一期目标吧。

首先是绘图功能

通过针对性的查找相关资料,原来flutter绘图涉及到几个组件的应用:

Canvas,负责绘图

GestureDetector,负责屏幕上的动作

provider,负责组件状态管理

这部分的难点就是如何将屏幕上的各种手势转换为绘图中的点线,一开始不懂状态管理,要实现绘图过程中的redo,换颜色,

换笔头大小都非常的吃累,静心学了下provider模块,一切都变得简单了。

其次是变换,即放大缩小平移旋转等

涉及到这块的实现时遇到了如下组件:

Transform,Matrix4,负责空间的变换

Animation,负责变换过程中的动画

这部分的难点在于如何在同一个屏幕来区别到底是用户要执行放大旋转等变换操作还是要进行绘画操作,为了实现这块内容,

花费了不少时间研究了GestureDetector的各种事件,Listener原始指针事件。

在一个就是颜色选取组件的实现

这组件涉及到如下内容:

dialog,对话框

HSVColor,色彩转换组件

这一块的实现目前还不够完善,难点还是处理手势、位移、数学计算等

总结

这篇文章从大的方面讲述了我学习flutter的思路,感觉很凑效,一个多月的时间,不断向目标靠近,遇到问题,针对性的网上

找参考找答案,整个过程中你会不断的遇到新的问题,新的知识,然后就有了对flutter开发框架的大体轮廓和解决新问题的思路,

总之就是一个从小白到“专家”的一个成长过程,当然我还在路上……

期望

https://github.com/juice411/my_sketch

相关文章

网友评论

    本文标题:flutter实战-一个手绘草稿板的原型开发

    本文链接:https://www.haomeiwen.com/subject/uvqapctx.html