极致美观的圆形按钮------现在咋变方了-技术交流-aardio资源网

极致美观的圆形按钮------现在咋变方了

mndsoft 6天前 183

大家试试aardio还能生成圆形按钮吗？哈哈，太诡异了，以前测试弄着玩的圆形按钮，现在都变方的了，当前版本：40.48.01

// 极致美观的圆形按钮增强版 - 现代化 UI 设计
import win.ui;
import fonts.fontAwesome;
/*DSG{{*/
var winform = win.form(text="现代化圆形按钮设计";right=1200;bottom=800;bgcolor=0xFF1A1A2E)
winform.add(
btnCard1={cls="plus";text="新建项目";left=80;top=660;right=280;bottom=740;font=LOGFONT(h=-18;weight=700);notify=1;z=26};
btnCard2={cls="plus";text="打开文件";left=310;top=660;right=510;bottom=740;font=LOGFONT(h=-18;weight=700);notify=1;z=27};
btnCard3={cls="plus";text="保存全部";left=540;top=660;right=740;bottom=740;font=LOGFONT(h=-18;weight=700);notify=1;z=28};
btnCard4={cls="plus";text="发布版本";left=770;top=660;right=970;bottom=740;font=LOGFONT(h=-18;weight=700);notify=1;z=29};
btnGradient1={cls="plus";text="火焰";left=80;top=160;right=200;bottom=280;font=LOGFONT(h=-24;weight=700);notify=1;z=4};
btnGradient2={cls="plus";text="海洋";left=230;top=160;right=350;bottom=280;font=LOGFONT(h=-24;weight=700);notify=1;z=5};
btnGradient3={cls="plus";text="森林";left=380;top=160;right=500;bottom=280;font=LOGFONT(h=-24;weight=700);notify=1;z=6};
btnGradient4={cls="plus";text="紫霞";left=530;top=160;right=650;bottom=280;font=LOGFONT(h=-24;weight=700);notify=1;z=7};
btnGradient5={cls="plus";text="极光";left=680;top=160;right=800;bottom=280;font=LOGFONT(h=-24;weight=700);notify=1;z=8};
btnIcon1={cls="plus";text='\uF1E0';left=80;top=350;right=170;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=10};
btnIcon2={cls="plus";text='\uF0C0';left=190;top=350;right=280;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=11};
btnIcon3={cls="plus";text='\uF0A1';left=300;top=350;right=390;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=12};
btnIcon4={cls="plus";text='\uF080';left=410;top=350;right=500;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=13};
btnIcon5={cls="plus";text='\uF06E';left=520;top=350;right=610;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=14};
btnIcon6={cls="plus";text='\uF19C';left=630;top=350;right=720;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=15};
btnIcon7={cls="plus";text='\uF0EB';left=740;top=350;right=830;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=16};
btnIcon8={cls="plus";text='\uF135';left=850;top=350;right=940;bottom=440;font=LOGFONT(h=-32;name='FontAwesome');notify=1;z=17};
btnMini1={cls="plus";text='\uF067';left=860;top=160;right=920;bottom=220;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=31};
btnMini2={cls="plus";text='\uF068';left=940;top=160;right=1000;bottom=220;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=32};
btnMini3={cls="plus";text='\uF00C';left=1020;top=160;right=1080;bottom=220;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=33};
btnMini4={cls="plus";text='\uF00D';left=1100;top=160;right=1160;bottom=220;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=34};
btnMini5={cls="plus";text='\uF013';left=860;top=240;right=920;bottom=300;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=35};
btnMini6={cls="plus";text='\uF002';left=940;top=240;right=1000;bottom=300;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=36};
btnMini7={cls="plus";text='\uF0C9';left=1020;top=240;right=1080;bottom=300;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=37};
btnMini8={cls="plus";text='\uF015';left=1100;top=240;right=1160;bottom=300;font=LOGFONT(h=-20;name='FontAwesome');notify=1;z=38};
btnSocial1={cls="plus";text='\uF09B';left=80;top=510;right=160;bottom=590;font=LOGFONT(h=-28;name='FontAwesome');notify=1;z=19};
btnSocial2={cls="plus";text='\uF099';left=180;top=510;right=260;bottom=590;font=LOGFONT(h=-28;name='FontAwesome');notify=1;z=20};
btnSocial3={cls="plus";text='\uF09A';left=280;top=510;right=360;bottom=590;font=LOGFONT(h=-28;name='FontAwesome');notify=1;z=21};
btnSocial4={cls="plus";text='\uF16D';left=380;top=510;right=460;bottom=590;font=LOGFONT(h=-28;name='FontAwesome');notify=1;z=22};
btnSocial5={cls="plus";text='\uF167';left=480;top=510;right=560;bottom=590;font=LOGFONT(h=-28;name='FontAwesome');notify=1;z=23};
btnSocial6={cls="plus";text='\uF0E1';left=580;top=510;right=660;bottom=590;font=LOGFONT(h=-28;name='FontAwesome');notify=1;z=24};
lblSection1={cls="static";text="渐变效果按钮";left=50;top=120;right=300;bottom=145;font=LOGFONT(h=-16;weight=700);transparent=1;z=3};
lblSection2={cls="static";text="功能图标按钮";left=50;top=310;right=300;bottom=335;font=LOGFONT(h=-16;weight=700);transparent=1;z=9};
lblSection3={cls="static";text="社交媒体按钮";left=50;top=470;right=300;bottom=495;font=LOGFONT(h=-16;weight=700);transparent=1;z=18};
lblSection4={cls="static";text="圆角卡片按钮";left=50;top=620;right=300;bottom=645;font=LOGFONT(h=-16;weight=700);transparent=1;z=25};
lblSection5={cls="static";text="迷你按钮";left=850;top=120;right=1000;bottom=145;font=LOGFONT(h=-16;weight=700);transparent=1;z=30};
lblSubtitle={cls="static";text="Professional UI Components Collection";left=30;top=70;right=1170;bottom=95;center=1;font=LOGFONT(h=-14);transparent=1;z=2};
lblTitle={cls="static";text="现代化按钮设计系统";left=30;top=20;right=1170;bottom=70;center=1;font=LOGFONT(h=-32;weight=700);transparent=1;z=1}
)
/*}}*/

import console;
console.open();

// 设置标题样式
winform.lblTitle.color = 0xFFFFFFFF;
winform.lblSubtitle.color = 0xFFAAAAAA;
winform.lblSection1.color = 0xFFFFFFFF;
winform.lblSection2.color = 0xFFFFFFFF;
winform.lblSection3.color = 0xFFFFFFFF;
winform.lblSection4.color = 0xFFFFFFFF;
winform.lblSection5.color = 0xFFFFFFFF;

console.log("========================================");
console.log("   现代化圆形按钮设计系统");
console.log("========================================");
console.log("设计理念：");
console.log("  1. 渐变色彩 - 视觉冲击力");
console.log("  2. 微动效果 - 悬停反馈");
console.log("  3. 阴影效果 - 立体层次感");
console.log("  4. 图标语义 - 功能直观化");
console.log("========================================");

// ========== 渐变效果圆形按钮（模拟渐变） ==========

// 火焰渐变 (红→橙)
winform.btnGradient1.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFFF4757;  // 火焰红
        hover = 0xFFFF6348;    // 亮橙红
        active = 0xFFEE5A24;   // 深橙
    };
    color = {
        default = 0xFFFFFFFF;
        hover = 0xFFFFFFFF;
        active = 0xFFFFFFFF;
    }
)

// 海洋渐变 (蓝→青)
winform.btnGradient2.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF1E90FF;  // 海洋蓝
        hover = 0xFF5F9EFF;    // 天蓝
        active = 0xFF0070DD;   // 深蓝
    };
    color = {
        default = 0xFFFFFFFF;
        hover = 0xFFFFFFFF;
        active = 0xFFFFFFFF;
    }
)

// 森林渐变 (绿)
winform.btnGradient3.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF26DE81;  // 翠绿
        hover = 0xFF4ECDC4;    // 青绿
        active = 0xFF20BF6B;   // 深绿
    };
    color = {
        default = 0xFFFFFFFF;
        hover = 0xFFFFFFFF;
        active = 0xFFFFFFFF;
    }
)

// 紫霞渐变 (紫→粉)
winform.btnGradient4.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFA29BFE;  // 薰衣草紫
        hover = 0xFFB19CD9;    // 浅紫
        active = 0xFF6C5CE7;   // 深紫
    };
    color = {
        default = 0xFFFFFFFF;
        hover = 0xFFFFFFFF;
        active = 0xFFFFFFFF;
    }
)

// 极光渐变 (青→紫)
winform.btnGradient5.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF00D2FF;  // 极光青
        hover = 0xFF3ADBFF;    // 亮青
        active = 0xFF00A8CC;   // 深青
    };
    color = {
        default = 0xFFFFFFFF;
        hover = 0xFFFFFFFF;
        active = 0xFFFFFFFF;
    }
)

// ========== 功能图标按钮（扁平化设计）==========

// 工具按钮 - 橙色
winform.btnIcon1.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFFA8231;
        hover = 0xFFFFAB5E;
        active = 0xFFE67E22;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 团队按钮 - 绿色
winform.btnIcon2.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF26DE81;
        hover = 0xFF4ECCA3;
        active = 0xFF20BF6B;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 警告按钮 - 红色
winform.btnIcon3.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFFF4757;
        hover = 0xFFFF6B81;
        active = 0xFFEE5A24;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 图表按钮 - 蓝色
winform.btnIcon4.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF5F27CD;
        hover = 0xFF8854D0;
        active = 0xFF341F97;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 查看按钮 - 青色
winform.btnIcon5.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF00D2FF;
        hover = 0xFF3ADBFF;
        active = 0xFF00A8CC;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 金融按钮 - 金色
winform.btnIcon6.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFFFC312;
        hover = 0xFFFFDC5E;
        active = 0xFFF79F1F;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 闪电按钮 - 黄色
winform.btnIcon7.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFFFC312;
        hover = 0xFFFFD93D;
        active = 0xFFEE9913;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 火箭按钮 - 粉色
winform.btnIcon8.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFFC5C65;
        hover = 0xFFFF7979;
        active = 0xFFEB3B5A;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// ========== 社交媒体按钮（品牌色） ==========

// GitHub - 黑色
winform.btnSocial1.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF2F3542;
        hover = 0xFF57606F;
        active = 0xFF1E272E;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// Twitter - 蓝色
winform.btnSocial2.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF1DA1F2;
        hover = 0xFF4AB3F4;
        active = 0xFF0C85D0;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// Facebook - 深蓝
winform.btnSocial3.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF4267B2;
        hover = 0xFF5578C2;
        active = 0xFF365899;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// Instagram - 渐变粉
winform.btnSocial4.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFE1306C;
        hover = 0xFFE95389;
        active = 0xFFC13584;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// YouTube - 红色
winform.btnSocial5.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFFFF0000;
        hover = 0xFFFF3333;
        active = 0xFFCC0000;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// LinkedIn - 蓝色
winform.btnSocial6.skin(
    border = {default = {radius=-1}};
    foreground = {
        default = 0xFF0077B5;
        hover = 0xFF0095D5;
        active = 0xFF005885;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// ========== 圆角卡片按钮 ==========

// 新建项目 - 绿色卡片
winform.btnCard1.skin(
    border = {default = {radius=20}};
    foreground = {
        default = 0xFF26DE81;
        hover = 0xFF4ECCA3;
        active = 0xFF20BF6B;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 打开文件 - 蓝色卡片
winform.btnCard2.skin(
    border = {default = {radius=20}};
    foreground = {
        default = 0xFF1E90FF;
        hover = 0xFF5F9EFF;
        active = 0xFF0070DD;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 保存全部 - 橙色卡片
winform.btnCard3.skin(
    border = {default = {radius=20}};
    foreground = {
        default = 0xFFFA8231;
        hover = 0xFFFFAB5E;
        active = 0xFFE67E22;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// 发布版本 - 紫色卡片
winform.btnCard4.skin(
    border = {default = {radius=20}};
    foreground = {
        default = 0xFF5F27CD;
        hover = 0xFF8854D0;
        active = 0xFF341F97;
    };
    color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
)

// ========== 迷你按钮（Material Design 风格）==========

var miniButtons = {
    {winform.btnMini1, 0xFF4CAF50, 0xFF66BB6A, 0xFF388E3C, "加号"},
    {winform.btnMini2, 0xFFFF5722, 0xFFFF7043, 0xFFE64A19, "减号"},
    {winform.btnMini3, 0xFF2196F3, 0xFF42A5F5, 0xFF1976D2, "对勾"},
    {winform.btnMini4, 0xFFF44336, 0xFFEF5350, 0xFFD32F2F, "叉号"},
    {winform.btnMini5, 0xFF9E9E9E, 0xFFBDBDBD, 0xFF757575, "设置"},
    {winform.btnMini6, 0xFFFFEB3B, 0xFFFFEE58, 0xFFFBC02D, "搜索"},
    {winform.btnMini7, 0xFF00BCD4, 0xFF26C6DA, 0xFF0097A7, "菜单"},
    {winform.btnMini8, 0xFF673AB7, 0xFF9575CD, 0xFF512DA8, "主页"}
};

for(i=1; #miniButtons; 1) {
    var btn = miniButtons[i][1];
    var colorDefault = miniButtons[i][2];
    var colorHover = miniButtons[i][3];
    var colorActive = miniButtons[i][4];
    
    btn.skin(
        border = {default = {radius=-1}};
        foreground = {
            default = colorDefault;
            hover = colorHover;
            active = colorActive;
        };
        color = {default = 0xFFFFFFFF; hover = 0xFFFFFFFF; active = 0xFFFFFFFF;}
    )
}

// ========== 按钮点击事件 ==========

// 渐变按钮事件
winform.btnGradient1.oncommand = function(){
    console.log("🔥 点击：火焰按钮");
    win.msgbox("火焰渐变效果\n色彩：红 → 橙", "火焰");
}

winform.btnGradient2.oncommand = function(){
    console.log("🌊 点击：海洋按钮");
    win.msgbox("海洋渐变效果\n色彩：蓝 → 青", "海洋");
}

winform.btnGradient3.oncommand = function(){
    console.log("🌲 点击：森林按钮");
    win.msgbox("森林渐变效果\n色彩：翠绿主题", "森林");
}

winform.btnGradient4.oncommand = function(){
    console.log("🌸 点击：紫霞按钮");
    win.msgbox("紫霞渐变效果\n色彩：紫 → 粉", "紫霞");
}

winform.btnGradient5.oncommand = function(){
    console.log("✨ 点击：极光按钮");
    win.msgbox("极光渐变效果\n色彩：青 → 紫", "极光");
}

// 功能图标事件
winform.btnIcon1.oncommand = function(){
    console.log("🔧 工具图标");
}

winform.btnIcon2.oncommand = function(){
    console.log("👥 团队协作");
}

winform.btnIcon3.oncommand = function(){
    console.log("⚠️ 警告提示");
}

winform.btnIcon4.oncommand = function(){
    console.log("📊 数据图表");
}

winform.btnIcon5.oncommand = function(){
    console.log("👁️ 查看详情");
}

winform.btnIcon6.oncommand = function(){
    console.log("💰 金融数据");
}

winform.btnIcon7.oncommand = function(){
    console.log("⚡ 快速操作");
}

winform.btnIcon8.oncommand = function(){
    console.log("🚀 火箭发射");
}

// 社交媒体事件
var socialNames = {"GitHub", "Twitter", "Facebook", "Instagram", "YouTube", "LinkedIn"};
for(i=1; 6; 1) {
    winform["btnSocial" ++ i].oncommand = function(id){
        return function(){
            console.log("📱 社交媒体：" ++ socialNames[id]);
            win.msgbox("跳转到 " ++ socialNames[id], socialNames[id]);
        }
    }
}

// 卡片按钮事件
winform.btnCard1.oncommand = function(){
    console.log("📁 新建项目");
    win.msgbox("创建新的项目文件", "新建项目");
}

winform.btnCard2.oncommand = function(){
    console.log("📂 打开文件");
    win.msgbox("打开现有文件", "打开文件");
}

winform.btnCard3.oncommand = function(){
    console.log("💾 保存全部");
    win.msgbox("保存所有打开的文件", "保存全部");
}

winform.btnCard4.oncommand = function(){
    console.log("🚀 发布版本");
    win.msgbox("发布新版本到生产环境", "发布版本");
}

// 迷你按钮事件
var miniNames = {"增加", "减少", "确认", "取消", "设置", "搜索", "菜单", "主页"};
for(i=1; 8; 1) {
    winform["btnMini" ++ i].oncommand = function(id){
        return function(){
            console.log("⚡ 迷你按钮：" ++ miniNames[id]);
        }
    }
}

console.log("\n✅ 系统初始化完成！");
console.log("📊 按钮统计：");
console.log("   - 渐变按钮：5 个");
console.log("   - 功能按钮：8 个");
console.log("   - 社交按钮：6 个");
console.log("   - 卡片按钮：4 个");
console.log("   - 迷你按钮：8 个");
console.log("   总计：31 个精美按钮");
console.log("\n🎨 设计特点：");
console.log("   ✓ 现代化扁平设计");
console.log("   ✓ 悬停动画效果");
console.log("   ✓ 品牌色彩系统");
console.log("   ✓ 图标语义化");
console.log("========================================");

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

最新回复 (8)

近我者赤 5天前

0 2楼

更新前是圆的,更新后变方的了
近我者赤 5天前

0 3楼

把"border = {default = {radius=-1}};"中的default去掉改为border = {radius=-1};就行了

近我者赤 5天前

0 4楼

增加个旋转效果(学习自风行者):

//按钮旋转
var rotate = function(plus) {
        plus.onDrawContent = function(graphics, rc, color) {
            if (owner.animationState) graphics.rotateRect(rc, owner.animationState);
        }

        plus.onAnimation = function(state, beginning, change, timestamp) {
            var duration = 900;
            if (timestamp < duration) {
                var x = timestamp / duration;
                return beginning + change * (-x * x + 2 * x);
            }
        }

        plus.onMouseEnter = function(wParam, lParam) {
            owner.startAnimation(1, 0, 360)
        }

        plus.onMouseLeave = function(wParam, lParam) {
            owner.stopAnimation()
        }
    }
btns={winform.btnCard1,winform.btnCard2,winform.btnCard3,winform.btnCard4,winform.btnGradient1,winform.btnGradient2,winform.btnGradient3,winform.btnGradient4,winform.btnGradient5,winform.btnIcon1,winform.btnIcon2,winform.btnIcon3,winform.btnIcon4,winform.btnIcon5,winform.btnIcon6,winform.btnIcon7,winform.btnIcon8,winform.btnMini1,winform.btnMini2,winform.btnMini3,winform.btnMini4,winform.btnMini5,winform.btnMini6,winform.btnMini7,winform.btnMini8,winform.btnSocial1,winform.btnSocial2,winform.btnSocial3,winform.btnSocial4,winform.btnSocial5,winform.btnSocial6}

for(i=1;#btns;1){
	rotate(btns[i]);//按钮旋转
}

mndsoft 5天前

0 5楼

近我者赤把"border = {default = {radius=-1}};"中的default去掉改为border = {radius=-1};就行了
直接：border = {radius=-1}; 即可
nlysh007 5天前

0 6楼

.skin({radius=-1})
breezee 5天前

0 7楼

此楼层已删除
breezee 5天前

1 8楼
上面给每个按钮添加旋转效果有点费劲，可以这样写：
```
for(name,ctrl in winform.eachControl("plus") ){
	rotate(ctrl);//按钮旋转
}
```
近我者赤 4天前

0 9楼

breezee 上面给每个按钮添加旋转效果有点费劲，可以这样写：for(name,ctrl in winform.eachControl("plus&qu ...

发新帖

mndsoft

主题数
23

帖子数
99

精华数
0

注册排名
109

极致美观的圆形按钮------现在咋变方了

mndsoft

作者最近主题：