当前位置: 首页 > 后端技术 > Node.js

【Flutter工具】fmaker:自动生成放大切图-自动替换App图标

时间:2023-04-04 00:07:47 Node.js

在《浅谈Flutter的优缺点》一文中指出Flutter存在切图难、资源管理难的缺陷,所以使用node.js来写a一个小工具,可以帮助你快速生成低倍率图片,并为iOS和Android生成各自平台的图标。预先全局安装flutternode.js环境npm包管理工具fmaker函数。fmaker是flutter的辅助图片处理工具。它还可以用于为iOS或Android项目生成图标,并通过放大生成图像。fmaker可以自动识别项目下的/assets/fmaker中的多个itemDoubleimage,根据flutterformat递归的将multi-foldimage转成2.0x,3.0x,4.0x等文件夹,然后保存压缩后的低倍imagetoassets以确保flutter可以自动识别低倍率图像。比如将example@3x.png放在文件夹下,会生成三重双重图。你为什么要这样做?因为高分辨率图片在缩小时会产生不必要的锐化效果,偶尔会卡顿;当放大小图像时,它会变得非常模糊。Flutter提供了自动显示正确分辨率图像的功能。但是使用这个功能非常困难。如果你的设计使用sketch来切图,只能切image.png、image@2x.png、image@3x.png等图片,而flutter要求的图片目录格式是image.png、2.0x/image。png,3.0x/image.png,这种格式很难用sketch导出(导出名称每次都需要改),非常难用。生成App图标如果/assets/fmaker文件夹下有ios_icon.png和android_icon.png文件,fmaker会自动识别这两个文件,直接生成图标到工程中,不需要额外复制粘贴。注意:iOS图标不能包含alpha通道,但Android图标可以。共同点就是图标必须是方形的,fmaker会帮你在log中查看图标大小和输出错误。安装gitclonehttps://github.com/mjl0602/flutter-assets-maker.gitcdflutter-assets-makernpminstallnpminstall-gfmaker如果看到“没有对应的指令,fmaker已经安装”的日志,安装已经成功了。使用假定您的项目名为yourFlutterProject。需要准备图标文件ios_icon.png和ios_android.png,放在yourFlutterProject/assets/fmaker下,其他多图也可以放,比如example@3x.png。Tips:如果找不到兼容的文件想试一试,可以使用fmakerinit来使用我的测试镜像。cdyourFlutterProjectfmakerinit#如果暂时找不到图片,可以用我的图片测试fmakerbuild,然后Android和iOS的App图标都已经更换了,可以启动工程查看。请注意,该工具理论上仅支持png。该工具会生成两张相同的图片,一张是放大倍数最高的图片,另一张是源图片,这在一定程度上增加了项目体积。建议不要引用fmaker文件夹中的源图,因为不能自动切换。Fmaker的重复图片不会增加产品体积,只要不导入源图片即可。Example//TODO是免费的,如果整个例子有bug,欢迎提issue,PR更好。仓库地址:https://github.com/mjl0602/fl...未经作者授权,本文禁止转载