BS版图形系统 - Ribbon Gallery
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 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;
}
下一步工作
- 处理扩展按钮
- 分组