BS版图形系统 - Ribbon Gallery

关注

原创最新推荐文章于 2026-03-01 00:10:01 发布 372 阅读 AI 写同款· GEO 优化 ›

wxRibbonGallery类介绍及使用方法总结：本文详细介绍了wxRibbonGallery类的使用方法，并通过一个简单的示例帮助开发者更好地理解该类。无论您是初学者还是有一定经验的开发者，都可以通过本文掌握wxRibbonGallery的相关技术，为您的应用程序提供更好的用户体验。此外，wxRibbonGallery还支持多种不同的布局方式和样式，开发者可以根据自己的需求进行选择，详见官方文档。用于设置当前选中的项，参数为要设置的项的索引号，0表示第一项，-1表示没有任何项被选中。用于获取当前选中的项的索引号，如果没有任何项被选中，则返回-1。阅读详情

BS版图形系统 - Ribbon Gallery

今天尝试做一个Ribbon Gallery效果
直接参考PPT效果
在这里插入图片描述

当然，感觉在网页里，占用空间少一些好，所以把各图标间距整小一点。

图标准备

在这里插入图片描述

实现

export class TRibbonGallery extends TPanel {
    rightPanel: TPanel;
    btnUp: TButton;
    btnMid: TButton;
    btnDown: TButton;
    btnItems: TButton[]
    showAllFlag: boolean;
    constructor(parent: TContainer | null) {
        super(parent);
        this.rightPanel = new TPanel(this);
        this.rightPanel.Width = 13;
        this.rightPanel.Align = NAlign.Right;
        this.btnUp = new TButton(this.rightPanel);
        this.btnUp.ApplyXml(`BoundRect="0, 0, 15, 20" iconOffset="2" Transparent="true" Icon="Icon/Up.png" Tag="0"`);
        this.btnMid = new TButton(this.rightPanel);
        this.btnMid.ApplyXml(`BoundRect="0, 20, 15, 20" iconOffset="2" Transparent="true" Icon="Icon/Down.png" Tag="1" `);
        this.btnDown = new TButton(this.rightPanel);
        this.btnDown.ApplyXml(`BoundRect="0, 40, 15, 20" iconOffset="2" Transparent="true" Icon="Icon/Down1.png" Tag="2" `);
        this.btnUp.AddEvent(NControlEvent.OnClick, this.onBtnClick, this);
        this.btnMid.AddEvent(NControlEvent.OnClick, this.onBtnClick, this);
        this.btnDown.AddEvent(NControlEvent.OnClick, this.onBtnClick, this);
        this.btnItems = [];
        this.showAllFlag = false;
    }

    private _btnRowIndex: number = 0;
    get btnRowIndex(): number { return this._btnRowIndex; }
    set btnRowIndex(value: number) {
        value = DrGraph.HelperObject.RANGE_CAST(value, 0, this.btnRowCount - 1);
        this._btnRowIndex = value;

        let btnWidth = 60;
        let count = Math.floor((this.Width - this.rightPanel.Width) / btnWidth);
        let left = 0;
        this.btnItems.forEach((btn, idx) => {
            if (Math.floor(idx / count) == this._btnRowIndex) {
                btn.Left = left;
                btn.Top = 0;
                left += btnWidth;
            } else
                btn.Left = 10000;
        })
    }

    get btnRowCount() {
        let btnWidth = 50;
        let count = Math.floor((this.Width - this.rightPanel.Width) / btnWidth);
        let result = Math.ceil(this.btnItems.length / count);
        return result;
    }

    draw(): boolean {
        let ctx: CanvasRenderingContext2D = this.paintBox!.ctx!;
        super.doDraw(ctx);
        ctx = this.prepareGDI()!;
        this.rightPanel.draw();

        let btnWidth = 50;
        let count = Math.floor((this.Width - this.rightPanel.Width) / btnWidth);
        let left = 0;
        this.btnItems.forEach((btn, idx) => { btn.doDraw(ctx); })
        return true;
    }
}

资源配置

基于通用性，各项可以由xml进行配置，以便后续使用方便。

<?xml version='1.0' encoding='gb2312' ?>
<xml desc="UI Control Config by DrGraph">
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani01.png" Caption="出现" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani02.png" Caption="淡出" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani03.png" Caption="飞入" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani04.png" Caption="浮出" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani05.png" Caption="劈裂" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani06.png" Caption="擦除" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani07.png" Caption="形状" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani08.png" Caption="轮子" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani09.png" Caption="随机线条" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani10.png" Caption="翻转靠近" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani11.png" Caption="缩放" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani12.png" Caption="旋转" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani13.png" Caption="弹跳" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani14.png" Caption="脉冲" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani15.png" Caption="彩色脉冲" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani16.png" Caption="跷跷板" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani17.png" Caption="陀螺旋" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani18.png" Caption="缩放" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani19.png" Caption="不饱和" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani20.png" Caption="加深" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani21.png" Caption="变淡" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani22.png" Caption="透明" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani23.png" Caption="对象颜色" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani24.png" Caption="补色" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani25.png" Caption="线条颜色" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani26.png" Caption="填充颜色" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani27.png" Caption="画笔颜色" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani28.png" Caption="字体颜色" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani29.png" Caption="下划线" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani30.png" Caption="加粗闪烁" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani31.png" Caption="加粗展示" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani32.png" Caption="波浪形" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani33.png" Caption="消失" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani34.png" Caption="淡出" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani35.png" Caption="飞出" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani36.png" Caption="浮出" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani37.png" Caption="劈裂" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani38.png" Caption="擦除" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani39.png" Caption="形状" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani40.png" Caption="轮子" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani41.png" Caption="随机线条" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani42.png" Caption="收缩旋转" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani43.png" Caption="缩放" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani44.png" Caption="旋转" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani45.png" Caption="弹跳" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani46.png" Caption="直线" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani47.png" Caption="弧形" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani48.png" Caption="转弯" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani49.png" Caption="形状" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani50.png" Caption="循环" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani51.png" Caption="自定义" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
	<TButton Transparent="true" Width="40" Height="50" Icon="Icon/32x32/ani52.png" Caption="跑马灯" glyphPos="Top" Font.Size="13" iconTextDistance="15"/>
</xml>

初步效果

在这里插入图片描述

上下箭头按钮处理

添加事件

        this.btnUp.AddEvent(NControlEvent.OnClick, this.onBtnClick, this);
        this.btnMid.AddEvent(NControlEvent.OnClick, this.onBtnClick, this);
        this.btnDown.AddEvent(NControlEvent.OnClick, this.onBtnClick, this);

事件响应

    onBtnClick(event: TMessage) {
        let tag = event.sender.Tag;
        if (2 == tag)
            this.showAllFlag = !this.showAllFlag;
        if (0 == tag)
            this.btnRowIndex = this.btnRowIndex - 1;
        if (1 == tag)
            this.btnRowIndex = this.btnRowIndex + 1;
    }