异形按钮的实现方法(例如:斜角按钮,星形按钮)
By
admin
at 2019-10-24 • 0人收藏 • 3582人看过
2019-10-26更新:
作者jacen在新版里增加了win.region.png库, 另外在updateWindow()函数里增加了第三个参数来保存之前生成的region区域, 这样利用这个库, 代码就可以更简洁了
import win.region.png; regHandle = win.region.png("\res\斜角.png"); //自绘plus背景 var drawRegn = function(form){ //新增的第三个参数,保留region不被清除 regHandle.updateWindow(form.hwnd,true,true); } drawRegn(mainForm.plus); drawRegn(mainForm.plus2); drawRegn(mainForm.plus3); var Bskin = { background = { hover = "\res\斜角.png"; focus = "\res\斜角2.png"; active = "\res\斜角3.png"; default = "\res\斜角2.png"; } } mainForm.plus.skin(Bskin) mainForm.plus2.skin(Bskin) mainForm.plus3.skin(Bskin)
注意: 使用上面代码和库请升级到最新版aardio.
原来的实现方法和原理如下:
html里有很多类似的 斜角按钮 应用,
在aardio里, 可以很方便的使用这种样式,利用 win.region.bitmap 库即可.
原理:
利用win.region.bitmap()生成异形区域, 然后利用SetWindowRgn() 设置窗体或者控件应用这个region.
操作:
首先,生成一个想要应用的斜角样式的二进制黑白的bmp格式图片,例如下面的
然后就可以使用你想要的按钮图片作为斜角样式了.
当然也可以使用skin来定义皮肤的颜色而不使用图片
代码如下:
import win.ui; /*DSG{{*/ mainForm = win.form(text="aardio工程41";right=959;bottom=591;bgcolor=16777215) mainForm.add( button={cls="button";text="Button";left=182;top=332;right=483;bottom=469;bgcolor=32768;clip=1;clipch=1;color=128;flat=1;font=LOGFONT(h=-47);ownerDraw=1;z=4}; plus={cls="plus";text="斜角按钮效果";left=51;top=49;right=352;bottom=186;background="\res\斜角.png";bgcolor=-5197169;clipch=1;font=LOGFONT(h=-16;name='FontAwesome';charset=0);notify=1;repeat="center";z=1}; plus2={cls="plus";text="斜角按钮效果";left=287;top=49;right=588;bottom=186;background="\res\斜角.png";bgcolor=-5197169;clipch=1;font=LOGFONT(h=-16;name='FontAwesome';charset=0);notify=1;repeat="center";z=2}; plus3={cls="plus";text="斜角按钮效果";left=523;top=49;right=824;bottom=186;background="\res\斜角.png";bgcolor=-5197169;clipch=1;font=LOGFONT(h=-16;name='FontAwesome';charset=0);notify=1;repeat="center";z=3} ) /*}}*/ import console console.open() import win.region.bitmap; //自绘plus背景 var drawRegn = function(form){ form.onDrawBackground = function(...){ regHandle = win.region.bitmap("\res\斜角.bmp",,,0); regHandle.updateWindow(form.hwnd,true); } } //调用重绘 drawRegn(mainForm.plus); drawRegn(mainForm.plus2); drawRegn(mainForm.plus3); //皮肤 var Bskin = { //可以是颜色填充 background={ active=0xFF6F6987; default=0xFF8FB2B0; hover=0xFF928BB3 }; color={ hover=0xFFFF9A00 } /* //也可以是图片 background = { hover = "\res\斜角.png"; focus = "\res\斜角2.png"; active = "\res\斜角3.png"; default = "\res\斜角2.png"; } */ } //应用皮肤 mainForm.plus.skin(Bskin) mainForm.plus2.skin(Bskin) mainForm.plus3.skin(Bskin) //测试普通button控件 mainForm.button.onDrawItem = function(drawItem){ regHandle = win.region.bitmap("\res\斜角.bmp",,,0); regHandle.updateWindow(mainForm.button.hwnd,true); return -1; } mainForm.button.oncommand = function(id,event){ console.log("hahah") } mainForm.show(); return win.loopMessage();
百度下载链接:https://pan.baidu.com/s/1QJ_Z-zC6UPKSAxuts36yxw
提取码:112j
win.region.bitmap 以前只用这个做异形窗体, 没想到可以用到所有的控件上
理论上可以任意外型 , 拼图都可以做 .
延伸:
我们直到plus控件可以实现tabs高级选项卡, 所以,你懂的,
10 个回复 | 最后更新于 2019-11-29
回复#5 @dsp2138 :
import win.ui.tabs; var tbs = win.ui.tabs(mainForm.plus,mainForm.plus2); tbs.skin({ background = { hover = "\res\g1.png"; default = "\res\g2.png"; } checked={ background = { focus = "\res\g3.png"; default = "\res\g3.png"; } } }) tbs.add({ text="标题文本3"; }) tbs.add({ text="标题文本4"; }) tbs.add({ text="标题文本5"; })
群里 撒旦微笑 提供了纯色背景和按钮方案, 利用楼上所说的边框.
import win.ui; /*DSG{{*/ var winform = win.form(text="aardio form";right=759;bottom=469;bgcolor=13195370) winform.add( custom={cls="custom";text="自定义控件";left=0;top=64;right=760;bottom=470;bgcolor=16777215;z=4}; edit={cls="plus";text="编辑";left=134;top=29;right=219;bottom=64;forecolor=13592698;z=2}; help={cls="plus";text="帮助";left=227;top=29;right=312;bottom=64;forecolor=13592698;z=3}; main={cls="plus";text="首页";left=41;top=29;right=126;bottom=64;forecolor=13592698;z=1} ) /*}}*/ import win.ui.tabs; var tabs = win.ui.tabs(winform.main,winform.edit,winform.help); var tabsTheme = { //默认状态字体颜色 color = { hover = 0xFFFFFFFF; focus = 0xFFEBEBEB; active =0xFFEBEBEB; default = 0xFFFFFFFF; }; //默认状态边框 border = { default = { top=4; color=0xFF6A58C9;//此处颜色与页面背景颜色相同 } }; //默认状态前景色 foreground={ default = 0xFF7A68CF; }; //选中状态配置 checked = { //选中颜色 color = { default = 0xFF6A58C9; }; //选中前景色 foreground={ default = 0xFFFFFFFF; } //选中边框色 border = { default = { top=4; color=0xFFFFFFFF;//此处边框与tabs选项卡背景相同 } } } }; tabs.skin(tabsTheme) tabs.selIndex = 1;//设置默认选中的索引 winform.show() win.loopMessage();
登录后方可回帖
回复#1 @jacen :
感谢jacen提供tabs的方法,非常好用![](/static/editor/dialogs/emotion/images/pp/i_f02.png)