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

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

GIF.gif


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格式图片,例如下面的

斜角.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
2019-10-26   #1

回复#1 @jacen :

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

image.png

2019-11-25   #2

高级选项卡中怎么实现这种效果?
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   #3

回复#3 @dsp2138 :

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

2019-11-25   #4

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

2019-11-25   #5

回复#5 @dsp2138 :

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

2019-11-25   #6

回复#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   #7

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

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   #8

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

2019-11-29   #9

回复#10 @jacen :

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

2019-11-29   #10

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

登录后方可回帖

登 录
信息栏
公告:
个人博客
专注分享
谢谢合作!

本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
打赏本站
Loading...