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

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