第一种方法：
直接在 itemList 中给各元素赋值，不需要依赖 onDrawElement 处理。
import win.ui;
import fonts.fontAwesome
import godking.customPlus;
import color;
import win.clip;
/*DSG{{*/
var winform = win.form(text="经典双色配色示例";right=783;bottom=567)
winform.add(
plus={cls="plus";left=8;top=8;right=752;bottom=560;bgcolor=0xC0DCC0;db=1;dl=1;dr=1;dt=1;notify=1;z=1};
scrollbar={cls="scrollbar";left=752;top=8;right=776;bottom=560;db=1;dr=1;dt=1;edge=1;z=2}
)
/*}}*/
var itemModel = {
// 1. 主颜色
{
name="mainColor";
type="rect";
rectf={x=3; y=3; width=-3; height=-3};
};
// 2. 辅颜色
{
name="subColor";
type="rect";
rectf={x=3; y=103; width=-3; height=-3};
};
// 3. 主颜色名称
{
name="mainColorName";
type="text";
rectf={x=20; y=10; width=120; height=40};
align=0;
valign=1;
smooth=true;
};
// 4. 主颜色代码
{
name="mainColorCode";
type="text";
rectf={x=20; y=50; width=-8; height=24};
align=0;
valign=1;
smooth=true;
};
// 5. 辅颜色名称
{
name="subColorName";
type="text";
rectf={x=20; y=116; width=100; height=24};
align=0;
valign=1;
smooth=true;
};
// 6. 辅颜色代码
{
name="subColorCode";
type="text";
rectf={x=20; y=136; width=136; height=24};
align=0;
valign=1;
};
// 7. 复制按钮背景
{
name="btnCopyBg";
type="rect";
rectf={x=-70; y=-36; width=-12; height=24};
round=4;
width=1;
color=0xAA107C10;
fillcolor=0xFFFFFFFF;
hoveredfillcolor=0xFF7C00FC;
hover=true;
cursor=32649;
click=true;
};
// 8. 复制按钮文字
{
name="btnCopyText";
type="text";
rectf={x=-70; y=-36; width=-12; height=24};
font={name='FontAwesome'; h=12; color=0xFF000000};
hoveredfont={name='FontAwesome'; h=12; color=0xFFFFFFFF};
hover=true;
cursor=32649;
align=1;
valign=1;
};
// 外层圆角处理
{
type="rect";
rectf={x=1; y=1; width=-1; height=-1};
width=6;
color=0xFFFFFFFF;
};
{
type="rect";
rectf={x=1; y=1; width=-1; height=-1};
width=6;
round=10;
color=0xFFFFFFFF;
};
// 当前复制项边框
{
type="rect";
name="activeborder";
rectf={x=6; y=6; width=-6; height=-6};
width=3;
round=4;
color=0;
};
{
type="rect";
name="activeborder1";
rectf={x=8; y=8; width=-8; height=-8};
width=1;
round=3;
color=0;
};
};
var colors = {
{"#002FA7";"克莱因蓝";"#FFCF14";"靓丽黄"};
{"#FF7400";"爱马仕橙";"#2B3C3D";"沉稳灰"};
{"#990033";"勃艮第红";"#DDCDB7";"象牙白"};
{"#01847F";"马尔斯绿";"#FFAA93";"杏色"};
{"#81D8CF";"蒂芙尼蓝";"#67AA66";"抹茶色"};
{"#FFE677";"蜂蜜黄";"#FF6067";"热狗红"};
{"#0081FF";"治愈蓝";"#FEF99D";"高明黄"};
{"#FFDBDD";"温柔粉";"#652C97";"浪漫紫"};
{"#00FD00";"荧光绿";"#0947EE";"普信蓝"};
{"#00324D";"普鲁斯蓝";"#B89076";"睿智金"};
{"#0D7E9C";"孔雀蓝";"#D5BA9F";"浅驼色"};
{"#7FA91F";"牛油果绿";"#A8ABB0";"浅灰色"};
{"#185A56";"深灰绿";"#FD742D";"橘橙色"};
{"#9D73BD";"青紫色";"#7BA6D1";"飘蓝色"};
{"#66D3C0";"蒂芙尼蓝";"#FDDE83";"淡黄色"};
{"#2A4D6E";"深蓝灰";"#F7C45C";"活力浅黄"};
{"#FF6B6B";"珊瑚红";"#4ECDC4";"薄荷青"};
{"#3A405A";"深蓝紫";"#A8DADC";"浅天蓝"}
};
var itemLists={};
for(i=1,#colors,1){
var cl = colors[i];
var mainColor = color.argbReverse(color.parse(cl[1]));
var subColor=color.argbReverse(color.parse(cl[3]));
var subColorCode = {text="0x"++string.format("%X",subColor),font={name='Tahoma'; h=14; color=mainColor}};
var mainColorCode = {text="0x"++string.format("%X",mainColor),font={name='Tahoma'; h=16; color=subColor}};
var tt = {
mainColor=mainColor;
mainColorName={text=cl[2];font={name='Tahoma'; h=16; color=subColor}};
subColor=subColor;
subColorName={text=cl[4];font={name='Tahoma'; h=16; color=mainColor}};
subColorCode = subColorCode;
mainColorCode = mainColorCode;
copyCode = mainColorCode.text++'\r\n'++subColorCode.text;
btnCopyText = '\uF0C5 复制';
};
table.push(itemLists,tt);
}
var p = godking.customPlus(winform.plus/*plus*/,itemModel,itemLists,{
itemWidth=170, /*项目宽度*/
itemHeight=180, /*项目高度*/
autoSizeWidth=true, /*自动根据项目列数及plus宽度调整项目宽度*/
autoSizeHeight=false, /*自动根据项目行数及plus高度调整项目高度*/
colnum=0, /*项目列数，为0则根据项目宽度和plus宽度自动计算*/
rownum=0, /*项目行数，为0则根据项目高度和plus高度自动计算*/
padLeft=5, /*plus左边空白距离*/
padTop=5, /*plus顶边空白距离*/
padRight=5, /*plus右边空白距离*/
padBottom=5 /*plus底边空白距离*/
})
p.onClick = function(itemIndex/*项目索引*/,elemIndex/*元素索引*/,elemID/*元素id*/,elemName/*元素name*/,pageIndex/*当前页项目索引*/,x/*鼠标X坐标*/,y/*鼠标Y坐标*/,disabled/*项目是否禁用*/,itemRect/*项目区域*/,elemRect/*元素区域*/){
/*鼠标左键单击非隐藏项目时触发该事件。当项目禁用或没有可点击元素时，默认不触发该事件。可设 allClickEvent=true 启用触发。*/
if elemName=="btnCopyBg" {
if p.itemList[itemIndex].btnCopyText=='\uF0C5 复制' {
for(i=1,#p.itemList,1){
p.itemList[i].btnCopyText='\uF0C5 复制';
p.itemList[i].activeborder={color=0};
p.itemList[i].activeborder1={color=0};
}
p.itemList[itemIndex].btnCopyText="已复制";
p.itemList[itemIndex].activeborder={color=0xDD000000};
p.itemList[itemIndex].activeborder1={color=0xFFFFFFFF};
win.clip.write(p.itemList[itemIndex].copyCode);
p.update();
} else {
p.itemList[itemIndex].btnCopyText='\uF0C5 复制';
p.itemList[itemIndex].activeborder={color=0};
p.itemList[itemIndex].activeborder1={color=0};
win.clip.write("");
p.update(itemIndex);
}
}
}
p.bindScrollbar(winform.scrollbar);
winform.show();
win.loopMessage();第二种方法：
使用一个 “假” 的 itemList 表，元素的实际内容在 onDrawElement 事件中动态计算返回。
import win.ui;
import fonts.fontAwesome
import godking.customPlus;
import color;
import win.clip;
/*DSG{{*/
var winform = win.form(text="经典双色配色[来自网络,有些颜色代码不一定准确]";right=783;bottom=567)
winform.add(
plus={cls="plus";left=8;top=8;right=752;bottom=560;bgcolor=0xC0DCC0;db=1;dl=1;dr=1;dt=1;notify=1;z=1};
scrollbar={cls="scrollbar";left=752;top=8;right=776;bottom=560;db=1;dr=1;dt=1;edge=1;z=2}
)
/*}}*/
var itemModel = {
// 1. 主颜色
{
name="mainColor";
type="rect";
rectf={x=3; y=3; width=-3; height=-3};
};
// 2. 辅颜色
{
name="subColor";
type="rect";
rectf={x=3; y=103; width=-3; height=-3};
};
// 3. 主颜色名称
{
name="mainColorName";
type="text";
rectf={x=20; y=10; width=120; height=40};
align=0;
valign=1;
smooth=true;
};
// 4. 主颜色代码
{
name="mainColorCode";
type="text";
rectf={x=20; y=50; width=-8; height=24};
align=0;
valign=1;
smooth=true;
};
// 5. 辅颜色名称
{
name="subColorName";
type="text";
rectf={x=20; y=116; width=100; height=24};
align=0;
valign=1;
smooth=true;
};
// 6. 辅颜色代码
{
name="subColorCode";
type="text";
rectf={x=20; y=136; width=136; height=24};
align=0;
valign=1;
};
// 7. 复制按钮背景
{
name="btnCopyBg";
type="rect";
rectf={x=-68; y=-36; width=-8; height=24};
round=4;
width=1;
color=0xAA107C10;
fillcolor=0xFFFFFFFF;
hoveredfillcolor=0xFF7C00FC;
hover=true;
cursor=32649;
click=true;
};
// 8. 复制按钮文字
{
name="btnCopyText";
type="text";
rectf={x=-68; y=-36; width=-8; height=24};
font={name='FontAwesome'; h=12; color=0xFF000000};
align=1;
valign=1;
};
//外层圆角处理
{
type="rect";
rectf={x=1; y=1; width=-1; height=-1};
width=6;
color=0xFFFFFFFF;
};
{
type="rect";
rectf={x=1; y=1; width=-1; height=-1};
width=6;
round=10;
color=0xFFFFFFFF;
};
};
var colors = {
{"#002FA7";"克莱因蓝";"#FFCF14";"靓丽黄"};
{"#FF7400";"爱马仕橙";"#2B3C3D";"沉稳灰"};
{"#990033";"勃艮第红";"#DDCDB7";"象牙白"};
{"#01847F";"马尔斯绿";"#FFAA93";"杏色"};
{"#81D8CF";"蒂芙尼蓝";"#67AA66";"抹茶色"};
{"#FFE677";"蜂蜜黄";"#FF6067";"热狗红"};
{"#0081FF";"治愈蓝";"#FEF99D";"高明黄"};
{"#FFDBDD";"温柔粉";"#652C97";"浪漫紫"};
{"#00FD00";"荧光绿";"#0947EE";"普信蓝"};
{"#00324D";"普鲁斯蓝";"#B89076";"睿智金"};
{"#0D7E9C";"孔雀蓝";"#D5BA9F";"浅驼色"};
{"#7FA91F";"牛油果绿";"#A8ABB0";"浅灰色"};
{"#185A56";"深灰绿";"#FD742D";"橘橙色"};
{"#9D73BD";"青紫色";"#7BA6D1";"飘蓝色"};
{"#66D3C0";"蒂芙尼蓝";"#FDDE83";"淡黄色"};
{"#2A4D6E";"深蓝灰";"#F7C45C";"活力浅黄"};
{"#FF6B6B";"珊瑚红";"#4ECDC4";"薄荷青"};
{"#3A405A";"深蓝紫";"#A8DADC";"浅天蓝"}
};
// 此处用 colors 表代替 itemlist 表，一是可以设置正确的项目数量，二是可以给 onDrawElement 提供原始数据用于计算
var p = godking.customPlus(winform.plus/*plus*/,itemModel,colors,{
itemWidth=150, /*项目宽度*/
itemHeight=180, /*项目高度*/
autoSizeWidth=true, /*自动根据项目列数及plus宽度调整项目宽度*/
autoSizeHeight=false, /*自动根据项目行数及plus高度调整项目高度*/
colnum=0, /*项目列数，为0则根据项目宽度和plus宽度自动计算*/
rownum=0, /*项目行数，为0则根据项目高度和plus高度自动计算*/
padLeft=5, /*plus左边空白距离*/
padTop=5, /*plus顶边空白距离*/
padRight=5, /*plus右边空白距离*/
padBottom=5 /*plus底边空白距离*/
})
p.onClick = function(itemIndex/*项目索引*/,elemIndex/*元素索引*/,elemID/*元素id*/,elemName/*元素name*/,pageIndex/*当前页项目索引*/,x/*鼠标X坐标*/,y/*鼠标Y坐标*/,disabled/*项目是否禁用*/,itemRect/*项目区域*/,elemRect/*元素区域*/){
/*鼠标左键单击非隐藏项目时触发该事件。当项目禁用或没有可点击元素时，默认不触发该事件。可设 allClickEvent=true 启用触发。*/
// 因为元素值都是动态计算返回的，此处无法直接使用，所以需要重复计算，不合理，建议使用第一种方法。
// 仅提供一种思路，具体问题需要择优解决。
}
p.onDrawElement = function(itemIndex/*项目索引*/,eleIndex/*元素索引*/,eleName/*元素name*/,eleValue/*元素值*/){
/*当绘制某个元素前，触发该事件。如果eleValue是个表，则直接修改eleValue成员会改变itemList中该元素的值。
也可以通过 return 返回两个值：1、要显示的该元素的新值。2、是否自动替换itemList中该元素的值。*/
// 此处为了省事，对所有元素都进行了计算，并不合理。
// 合理的方法是，根据元素名称进行计算，用到哪个元素，计算哪个元素。
// 此处只是提供一种实现方法，仅供参考。对于固定的元素值，建议使用第一种方法。
var cl = p.itemList[itemIndex];
var mainColor = color.argbReverse(color.parse(cl[1]));
var subColor=color.argbReverse(color.parse(cl[3]));
var subColorCode = {text="0x"++string.format("%X",subColor),font={name='Tahoma'; h=14; color=mainColor}};
var mainColorCode = {text="0x"++string.format("%X",mainColor),font={name='Tahoma'; h=16; color=subColor}};
var tt = {
mainColor=mainColor;
mainColorName={text=cl[2];font={name='Tahoma'; h=16; color=subColor}};
subColor=subColor;
subColorName={text=cl[4];font={name='Tahoma'; h=16; color=mainColor}};
subColorCode = subColorCode;
mainColorCode = mainColorCode;
btnCopyText = '\uF0C5 复制';
};
return tt[eleName];
}
p.bindScrollbar(winform.scrollbar);
winform.show();
win.loopMessage();
最新回复 (0)