BS版图形系统 - Ribbon Gallery

于 2020-09-13 08:43:58 发布
阅读量269 收藏
点赞数
分类专栏： 原理示教 DrGraph 文章标签： typescript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drgraph/article/details/108556279
版权

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;
    }

在这里插入图片描述

下一步工作

  • 处理扩展按钮
  • 分组
DrGraph
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ribbon Gallery Icon上面实现右键菜单
03-13
Ribbon的代码例子很少，很多东西都要自己专研。这个示例代码实现了Ribbon界面中Gallery图标上面点击右键，显示菜单的示例代码。其中很多细节还是挺搞的。
canvas-ribbon.js:A ribbon background drawn on canvas.(随机不规则三角彩条背景插件)
05-07
canvas-ribbon.js (English version is down below.) 随机不规则三角彩条背景插件。 此项目在 基础上进行了许多改进，使得使用更加方便，且适用于更多场景。 预览效果： 观看在我的主页上的应用效果：...
Ribbon界面介绍
风轻云淡 勇往直前
03-25 6102
http://hi.baidu.com/hoping/item/b257e10e99ed7312cd34ea1d Ribbons Ribbon是现代化的方式帮助用户高效和直接的查找、理解和使用工具命令——通过最少的点击，减少从“尝试-错误”（trainl-and-error）方式中恢复操作，寻找新的操作的需要，并且不再需要区查看软件帮助。   Ribbon是一种命令工具
细品RibbonX(26)：库(Gallery)控件详解
狂奔之林的博客
03-02 2391
细品RibbonX(26)：库(Gallery)控件详解资料整理来自于论坛完整版下载地址：http://download.csdn.net/download/nodeman/10264659 Loading ... 下面介绍如何使用库，Office 2007用户界面中最酷的新功能之一。库被设计作为图形化显示用户选项的一种方式，例如样式库，能够通过查看该样式图形化的呈现使用户选择一种样式。可以使用库...
BS版图形系统 - 画线
drgraph的博客
09-01 648
BS版图形系统 - 画线 一晃两个月过去了，儿子也考了个喜欢的大学，重新，又稳定了下来。 我也重操旧业，编点小程序。时不时发个小博客，自娱自乐一下。 今天处理图元 - 线。 话不多说，直接上代码。 export class TLine extends TTwoPointMeta { beginArrow: TArrow = new TArrow; endArrow: TArrow = new TArrow; Initial() { this.setClassType(
qtn-ribbon.zip
12-01
- **跨平台兼容**：如同Qt一样，Qtn-Ribbon支持多种操作系统，确保应用在不同环境下的界面一致性。 - **丰富的API**：Qtn-Ribbon提供了丰富的API接口，方便开发者创建和管理Ribbon元素，如QtnRibbonTab、...
SpringCloud-Ribbon[入门案例]
02-24
包括feign提供的声明式服务调用也是基于该Ribbon实现的。ribbon默认提供很多种负载均衡算法，例如轮询、随机等等。甚至包含自定义的负载均衡算法。他解决并提供了微服务的负载均衡的问题。目前业界主流的负载均衡...
springcloud-consul-ribbon详解
02-24
Feign已经默认使用了Ribbon(参考文章)1、IClientConfig默认实现类DefaultClientConfigImpl，主要用来配置ribbon客户端的相关属性配置2、ServerListUpdater默认实现类PollingServerListUpdater,主要负责动态更新...
VS MFC完成的ribbon元素GDI绘图程序
11-17
MFC应用程序，具有office式样的单文档应用程序实例。 ribbon功能区创建，GDI绘图实现。 程序代码。
修改 CMFCRibbonGallery 的默认按钮数
hhhh63的专栏
03-19 2482
CMFCRibbonGallery 中的默认按钮数是6，SetIconsInRow 方法可以设置下拉框中的按钮列数，正常显示框中的按钮数确是固定为6，不能改变，google以后建立一个新类继承于这个类，把默认列数设为100，而 CMFCRibbonGallery 会根据窗口宽度自动调整实际列数，效果极好。原代码如下。 #pragma once // TTMv8RibbonGallery
什么是事件行为?
weixin_34107955的博客
03-03 809
什么是事件行为? 事件行为分为两部分:事件行为+事件绑定 事件行为:是一个元素天生自带的属性,是浏览器赋予其天生的行为 事件绑定:就是给当前事件行为赋一个函数值.这样一来.触发事件行为的时候就会执行绑定的函数 如果一个元素没有给他的onclick赋值函数,此时我们点击这个元素,此时我们点击这个元素的时候也会触发它的onclick的事件行为,只不过是null什么都没干 复制代码...
Java Swing Ribbon（Flamingo）的使用07：长廊Gallery的使用
大饼辉的专栏
11-07 3332
之前的文章主要介绍了如何在Flamingo-Ribbon菜单中添加Flamingo的功能组件。其实在Flamingo中还可以添加Swing组件比如复选框、下拉选框、颜色按钮等。这边文章主要介绍的就是如何在Flamingo的Ribbon菜单中添加JComponent组件。 在看这篇文章之前建议先看如下的一些文章。当然如果对Flamino-Ribbon已经有一些基本的了解的则不用看了。
BS版图形系统 - Ribbon工具栏初步
drgraph的博客
09-11 491
BS版图形系统 - Ribbon工具栏初步组件实现RibbonRibbonTabToolBarButton调用对应的xml运行效果下一步工作 QQ: 282397369 开始攻Ribbon，毕竟软件有个象样的界面，还是要拿得出手一点点。 思路就借鉴DevExpress，简化实现，不整太多的不必要环节。 第二个思路就是先实现功能，以后再模块化。 组件实现 先准备初步要用到的组件。 Ribbon export class TRibbon extends TPageControl { btnApp: TB
Ribbon使用笔记
移动开发记录
11-19 193
1. 定义按钮组中各按钮大小 &lt;ribbon:RibbonGroup Header="大小" &gt; &lt;ribbon:RibbonGroup.GroupSizeDefinitions&gt; &lt;ribbon:RibbonGroupSizeDefinition&gt; &lt;ribbon:RibbonControlSizeDefinit...
spring-cloud-starter-alibaba-ribbon
最新发布
12-02
spring-cloud-starter-alibaba-ribbon是一个基于Spring Cloud Ribbon的负载均衡客户端，它可以与Nacos服务注册中心无缝集成，实现服务的自动发现和负载均衡。它可以通过在pom.xml文件中添加以下依赖来使用： ```xml...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值