plus实现splitter窗口分隔条功能

By admin at 2019-12-02 • 0人收藏 • 416人看过

前几天群里有人问spLitter分隔条的用法,用这个控件试了下, 很方便的实现任意分隔.

但是当我想要把分隔条用图片美化一下的时候, 发现并不能很好的实现美化.

大致看了下这个库的写法 , 

plus支持透明图片 , 于是学着把plus来实现同样的功能, 下面是简单的实验过程,


代码在二楼.


以上, 大致实现需要的功能, 美化效果还未测试. 后续在楼下测试


1 个回复 | 最后更新于 2019-12-02
2019-12-02   #1

第一版 splitterex 库完成

用plus模拟的好处: 可以利用plus的skin属性美化界面

GIF.gif

splitterex.aardio 库代码如下:

//分隔条自定义库
import win.ui;
class splitterex{
	ctor( plusCtrl,horz=true ){
		this = plusCtrl;
		this.horz = horz;//是否水平分隔
		this.notify = true;//开启事件回调
		this.onMouseEnter = function(wParam,lParam){
			..win.ui.waitCursor(true,::User32.LoadCursor(null, this.horz ? 0x7F85/*_IDC_SIZENS*/ : 0x7F84/*_IDC_SIZEWE*/));
		}
		this.onMouseLeave = function(wParam,lParam){
    		..win.ui.waitCursor(false);
		}
		
		this.rec = null;
		this.onMouseDrag = function(wParam,lParam){ 
			var Hdc = ::GetDC(this.parent.hwnd);
    		if(this.rec!=null){
    			::DrawFocusRect(Hdc,this.rec);	
    		}
    		var x,y = ..win.getMessagePos(lParam);
    		var px,py = this.getPos();
    		var parentRect = this.parent.getClientRect();
    		if(this.horz){
    			if((py+y)<=0){
    				this.rec = ::RECT(px,0,px+this.width,this.height);	
    			}elseif((py+y)>=(parentRect.bottom-this.height)){
    				this.rec = ::RECT(px,parentRect.bottom-this.height,px+this.width,parentRect.bottom);
    			}else {
    				this.rec = ::RECT(px,py+y,px+this.width,py+y+this.height);
    			}
    		}else {
    			if((px+x)<=0){
    				this.rec = ::RECT(0,py,this.width,py+this.height);	
    			}elseif((px+x)>=(parentRect.right-this.width)){
    				this.rec = ::RECT(parentRect.right-this.width,py,parentRect.right,py+this.height);
    			}else {
    				this.rec = ::RECT(px+x,py,px+x+this.width,py+this.height);
    			}
    		}
    		::DrawFocusRect(Hdc,this.rec);
			::ReleaseDC(this.parent.hwnd,Hdc);
		}
		this.onMouseUp = function(wParam,lParam){
   			if(this.rec!=null){
   				var Hdc = ::GetDC(this.parent.hwnd);
    			::DrawFocusRect(Hdc,this.rec);
				::ReleaseDC(this.parent.hwnd,Hdc);	
    			this.setPos(this.rec.left,this.rec.top);
    			this.rec = null;
    			this.redrawTransparent();
    		}
			
		}
		
		this.adjust = function( cx,cy,wParam ) {	 
			var x,y = this.getPos();
			if(this.onMoveEnd){
				this.onMoveEnd(x,y,cx,cy);
			}
		};
		
		return this;
	};	
}

namespace splitterex;

/**intellisense()
splitterex = Plus分隔条扩展模块
splitterex(.(plus控件名,是否为水平分隔) = Plus分隔条扩展模块 
splitterex() = !splitterexplus.
end intellisense**/

/**intellisense(!splitterexplus)
onMoveEnd = @.onMoveEnd = function( x,y,cx,cy ){
	__/*分隔条移动结束触发此函数,返回此时分隔条的位置信息*/
}
end intellisense**/


使用简单示例如下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
plus={cls="plus";left=135;top=421;right=588;bottom=457;bgcolor=15780518;notify=1;z=1};
plus2={cls="plus";left=360;top=96;right=388;bottom=386;bgcolor=10789024;notify=1;z=2}
)
/*}}*/

var bskin = {
	background={
		active=0xFFF78987;
		default=0xFF8FB2B0;
		disabled=0xE8FF002F;
		hover=0xFF928BB3
	};
}
winform.plus.skin(bskin)
winform.plus2.skin(bskin)

import console
console.open()
import splitterex;

var s1 = splitterex(winform.plus2,false);
var s2 = splitterex(winform.plus,true);
s1.onMoveEnd = function( x,y,cx,cy ){
	console.log("s1",x,y,cx,cy)
}
s2.onMoveEnd = function( x,y,cx,cy ){
	console.log("s2",x,y,cx,cy)
}



winform.show();
win.loopMessage();
return winform;


利用这个库, 把上面顶楼的工程重新修改了下,

主界面mainform.aardio 代码如下:

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程6";right=760;bottom=471)
mainForm.add(
custom={cls="custom";text="自定义控件";left=0;top=0;right=760;bottom=213;bgcolor=15780518;dt=1;z=1};
custom2={cls="custom";text="自定义控件";left=1;top=223;right=761;bottom=472;bgcolor=12639424;db=1;z=2};
plus={cls="plus";left=0;top=212;right=759;bottom=225;bgcolor=128;notify=1;z=3}
)
/*}}*/

mainForm.custom.loadForm("\dlg\1.aardio")
mainForm.custom2.loadForm("\dlg\2.aardio")

var bskin = {
	background={
		active=0xFFF78987;
		default=0xFF8FB2B0;
		disabled=0xE8FF002F;
		hover=0xFF928BB3
	};
}
mainForm.plus.skin(bskin)


import splitterex;
var px = splitterex(mainForm.plus,true);
px.onMoveEnd = function( x,y,cx,cy ){
	mainForm.custom.setPos(,,mainForm.custom.width,y);
	var xx,yy,ccx,ccy = mainForm.custom2.getPos();
	mainForm.custom2.setPos(x,y+cy,ccx,ccy+(yy-y-cy));
}


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

其他代码, 下载后可以看看,


链接:https://pan.baidu.com/s/1oy-oTce_J6gBIbj6psdu5w 

提取码:y0al 



登录后方可回帖

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