精易论坛

标题: JUI 自绘按钮，一个字体文件顶N个图标jpg文件 [打印本页]

作者: XcantloadX 时间: 2022-7-3 12:45
标题: JUI 自绘按钮，一个字体文件顶N个图标jpg文件
本帖最后由 XcantloadX 于 2022-7-3 12:47 编辑

先上动图

以上示例没有使用任何图片素材，只用了一个自定义字体
可以用来替换简单的图标，比如关闭、收藏图标等等，相比图形按钮的好处是只要符号不变，颜色、背景、大小随便换，不需要重新制作字体
当然复杂的图片素材还得用图形按钮
下载：

JUI_自绘按钮.zip (2.86 MB, 下载次数: 117)

教程
1.基础使用
你可以用现成的字体，以 fontawesome 为例，你可以在 https://fontawesome.com/download 下载，下载的时候选右边的“Free For Desktop”
解压后有三个文件：Font Awesome 6 Brands-Regular-400.otf（品牌图标）、Font Awesome 6 Free-Regular-400.otf（普通图标-常规）、Font Awesome 6 Free-Solid-900.otf（普通图标-填充）
以点赞图标为例，打开搜索页面，输入“like”，找到并打开你想要的图标

复制右上角的 Unicode 码
然后这样写

窗口程序集名	保留	保留	备注
窗口程序集_窗口1
变量名	类型	数组	备注
按钮_点赞	JUI_按钮

子程序名	返回值类型	公开	备注
_窗口1_创建完毕

JUI_初始化 ()
按钮_点赞.创建自按钮 (按钮1)
按钮_点赞.样式_背景颜色 ( #JUI_默认背景色, , , 真)
按钮_点赞.字体 (“C:\Users\47477\Downloads\fontawesome-free-6.1.1-desktop\otfs\Font Awesome 6 Free-Regular-400.otf”, 20)
按钮_点赞.标题W (JUI_Unicode码转宽字符 (“f164”) ＋ { 0, 0 })

效果图：

2.自定义图标
打开 icomoon（https://icomoon.io/app/#/select）
同样地你可以在它自带的图标里搜索，想要的图片点一下选中即可
部分的图标是收费的

里面没有我想要的图片怎么办呢？
你可以在阿里巴巴矢量图片库（https://www.iconfont.cn/）里搜索
以网易云音乐 logo 为例，搜索“netease”（搜中文搜出来的结果还没有英文多）
下载 svg 文件

导入图标

导入之后记得选中！

生成字体，点了之后会有 download 按钮出现，再点一下

复制 unicode 码

窗口程序集名	保留	保留	备注
窗口程序集_窗口1
变量名	类型	数组	备注
btn	JUI_按钮

子程序名	返回值类型	公开	备注
_窗口1_创建完毕

JUI_初始化 ()
btn.创建自按钮 (按钮1)
btn.字体 (取运行目录 () ＋ “/netease.ttf”, 40)
btn.标题W (JUI_Unicode码转宽字符 (“e900”) ＋ { 0, 0 })
btn.样式_背景颜色 ( #JUI_默认背景色, , , 真)
btn.样式_前景颜色 ( #红色, , #JUI_样式_所有 )

效果如图：