【开源】 DWIN 屏素材设计工具

二哲科技

自己做了一个 DWIN 屏素材设计工具，不用再苦逼用PS设计屏幕界面了。
工具目前分两大块：界面编辑器（专门做按钮、文字框这些 UI 组件）和组件编辑器（画矢量图形、拼基础元素）。下面挨个说说。


一、界面编辑器

打开界面编辑器，左边是一大排预设图标，电源、房子、齿轮、箭头、WiFi、锁、放大镜……常用的基本都有。你想用哪个，直接拖到中间画布上就行。
拖上去之后，右边会自动弹出属性面板，位置、大小、文字内容、颜色、圆角、边框、阴影，全部可以手动微调。不用记坐标，不用写代码，鼠标点点就搞定。
画布顶部还能调分辨率（默认 800×480）、背景色、背景图，缩放也可以拉，方便精修细节。


二、按钮样式预设

除了自己从零调样式，左边还整了一个"按钮样式"面板，里面塞了十几套现成的皮肤：
实心湖蓝、胶囊绿、描边蓝、阴影橙
霓虹青、深色灰、浅色白、危险红
渐变紫、全息渐变、赛博紫、电光蓝……
看上哪个，直接拖到画布上的按钮，样式就自动套上去了。已经做好的按钮也可以在右边属性栏一键换肤。做不同风格的界面时，这个功能能省大量时间。


三、文字区域预设

光有按钮不够，界面上还得有文字区域。工具里专门准备了一页"文字区域"预设，包括：
绿色矩形、描边矩形、虚线框、圆角卡片
标题条、毛玻璃、警示框、成功框
扫描框、HUD 面板、数据条、警示红框
能量环、模块卡……
这些本质上都是各种样式的矩形框，专门用来放标题、状态文字、提示信息。拖到画布上，改改文字内容就能用，比自己画框再调样式快多了。


四、自定义导入

预设再多，也总有不够用的时候。所以工具支持自定义导入：
可以导入 SVG 图标，导入后会在"按钮图标"页里跟官方预设放在一起，随便拖用。
可以导入 背景图片，在顶部工具栏一键设置成画布背景。
这样一来，公司 LOGO、自定义图标、客户提供的素材，都能无缝塞进来用，不用在外部工具里先拼好再导入了。


五、组件编辑器

有时候界面里还需要一些基础几何图形，比如进度条的底框、指示图标、装饰元素之类的。工具里带了一个组件编辑器，支持直接画：
矩形、圆、三角、五角星
文字、图片
每种图形都有独立的属性面板，位置、大小、圆角、填充颜色、描边颜色和粗细，全部可调。右边还有图层管理，可以上下调整层级，也能一键复制、删除、置顶、置底。
画完之后直接导出 PNG，拿到 DWIN 屏项目里就能用。


六、总结
我自己已经用它做了几个项目了，效率提升很明显，而且产品界面效果比之前用PS弄的好多了。大家可以试试看。有建议或者 bug 也可以留言，我继续完善。


双击index.html就可以打开了项目了