异形按钮的实现方法(例如:斜角按钮,星形按钮)

By admin at 2019-10-24 • 0人收藏 • 860人看过

GIF.gif


2019-10-26更新:

校长在新版里增加了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格式图片,例如下面的

斜角.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高级选项卡, 所以,你懂的,


13 个回复 | 最后更新于 2019-11-29
2019-10-26   #1

很好的思路,最新版aardio针对这个改进了一下,可以用png直接指定 win.ui.tabs的绘图区域,以上面的工程为例, main.aardio修改如下:

import win.ui;
/*DSG{{*/
mainForm = win.form(text="斜角按钮示例";right=1220;bottom=579;bgcolor=0)
mainForm.add(
plus={cls="plus";text="斜角按钮效果";left=51;top=49;right=352;bottom=186;background="\res\斜角.png";bgcolor=-5197169;clipch=1;dl=1;dt=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;dl=1;dt=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;dl=1;dt=1;font=LOGFONT(h=-16;name='FontAwesome';charset=0);notify=1;repeat="center";z=3}
)
/*}}*/

import win.ui.tabs;
var tbs = win.ui.tabs(mainForm.plus,mainForm.plus2,mainForm.plus3);

tbs.skin({
    background = { 
        hover = "\res\斜角.png";
        focus = "\res\斜角2.png";
        active = "\res\斜角3.png";
        default = "\res\斜角2.png";
    }
}) 
tbs.add({
    text="标题文本2";
})

import win.region.png;
var region = win.region.png("\res\斜角2.png");
tbs.updateItemRegion( region );

mainForm.show();
win.loopMessage();


2019-10-26   #2

回复#1 @jacen :

感谢校长提供tabs的方法,非常好用

image.png

2019-11-25   #3

高级选项卡中怎么实现这种效果?
QQ图片20191125154254.png
也就是checked状态时比没有选中的选项高出几个像素。
skin中可以设置border,但这么写没有作用

checked={

background={default=0xFFEBE8F5;};

color={default=0xFF6B58C9;};

border={top = 2;color=0xFF1E9FFF;};

}

---------

这么写

border = {   

        checked = {left=5;color=0xFFFF0000;margin=15;}   

    }; 

好像不支持
对于skin具体的用法,请指教,谢谢老师

2019-11-25   #4

回复#3 @dsp2138 :

高出来说明原来的图像区域就是那么高, 矮的只是上半部分是透明的, 你按照这个思路去试试

2019-11-25   #5

嗯,想法很棒,逆向思维
试了,但实现不了。
因为skin里boder只支持default和hover属性,不支持checked和active,所以默认情况下是无法矮半截或者高半截了。
实在不行只能用图片了。

2019-11-25   #6

回复#5 @dsp2138 :

说的就是图片........

2019-11-25   #7

回复#5 @dsp2138 :

GIF.gif


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";
})


2019-11-25   #8

群里 撒旦微笑 提供了纯色背景和按钮方案, 利用楼上所说的边框.

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();


2019-11-26   #9

谢谢啊,还是用法的问题!

2019-11-29   #10

回复#5 @dsp2138 :

border跟其他所有样式都支持check,
不过plus控件其实已经支持你这种需求,前景图像可以设置内边距( 不是margin,是 paddingTop .... 这几个属性 )

所以上面的代码可以简化:

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;paddingTop=5;z=2};
help={cls="plus";text="帮助";left=227;top=29;right=312;bottom=64;forecolor=13592698;paddingTop=5;z=3};
)
/*}}*/

import win.ui.tabs;
var tabs = win.ui.tabs(winform.edit, winform.help);

var tabsTheme = { 
    color = { 
        default = 0xFFFFFFFF;
    }; 
    background={
        default = 0x00FFFFFF;
    } 
    foreground={
        default = 0xFF7A68CF;
    }; 
    checked = { 
        color = {
            default = 0xFF6A58C9;
        }; 
        background={
            default = 0xFFFFFFFF;
        }
        foreground={
            default = 0xFFFFFFFF;
        } 
    }
};
tabs.skin(tabsTheme)
tabs.selIndex = 1;

winform.show()
win.loopMessage();

因为内边距只影响前景图像,背景图像总是铺满,所以只要限制前景输出位置,并切换背景就可以实现你要的效果

2019-11-29   #11

回复#10 @jacen :

没想到还有这个思路, 又学到了

2019-11-29   #12

谢谢校长,看下plus控件的教程,没找到所有的属性列表,这下涨姿势了

2019-11-29   #13

这个是设计时属性,仅限于在窗体设计器中使用。

plus控件的入门教程里详细解释了这个属性的用法,
里面还有截图,再截一次图:


foreground.jpg

另外在【库函数文档  / 窗口控件 】 有所有这些属性的完整列表和文档,你到入门教程里当然是找不到的,入门教程只是挑重点和基础的讲 - 不是属性手册。


虽然aardio已经将这些东西尽可能的做到了傻瓜化,但需求千变万化,还是要靠灵活发挥。

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...