BS版图形系统 - Ribbon工具栏初步

最新推荐文章于 2024-01-11 13:07:37 发布
最新推荐文章于 2024-01-11 13:07:37 发布
阅读量491 收藏
点赞数
分类专栏： DrGraph 原理示教 文章标签： typescript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drgraph/article/details/108528731
版权

BS版图形系统 - Ribbon工具栏初步


QQ: 282397369
开始攻Ribbon，毕竟软件有个象样的界面，还是要拿得出手一点点。
思路就借鉴DevExpress，简化实现，不整太多的不必要环节。
第二个思路就是先实现功能，以后再模块化。

组件实现

先准备初步要用到的组件。

Ribbon

export class TRibbon extends TPageControl {
    btnApp: TButton;
    quickBtns: TButton[];
    constructor(parent: TContainer | null) {
        super(parent);
        this.Font.align = NFontAlign.Left;
        this.Font.Size = 14;
        this.Font.Color = new TColor("#337AB7");
        this.Brush.Color = new TColor("#E5E8EA");
        this.btnApp = new TButton(this);
        this.btnApp.ApplyXml(`boundRect="0, 0, 100, 25" Caption="DrGraph脑图" Font.Color="white" Font.Size="12" glyphPos="Top" Command="Edit.Delete" FillColor="#FF0000"`);
        this.quickBtns = [];
        let delta = 1;
        let left = this.btnApp.Right + delta;
        let quickIcons: string[] = ["FileSave;File.Save", "Undo;Edit.Undo", "Redo;Edit.Redo"];
        for (let i = 0; i < quickIcons.length; ++i) {
            let quickBtn = new TButton(this);
            quickBtn.paintBox = this.paintBox;
            quickBtn.ApplyXml(`boundRect="${left}, 0, 25, 25" onClick="true" Transparent="true" Icon="Icon/24x24/${DrGraph.String.GetStringAt(quickIcons[i], ";", 0)}.png" Command="${DrGraph.String.GetStringAt(quickIcons[i], ";", 1)}"`);
            left += 25 + delta;
        }
        this.Height = 90;
        this.Align = NAlign.Top;
    }

    draw(): boolean {
        if (!this.Enabled)
            return false;
        let ctx: CanvasRenderingContext2D = this.prepareGDI()!;
        this.Brush.Apply(ctx);
        ctx.fillRect(this.absLeft, this.absTop, this.Width, this.Height);
        let activePage = this.ActivePage;
        if (activePage)
            activePage.draw();

        let left = this.absLeft + 200;
        let top = this.absTop + 15;
        let delta = 15;

        this.sheetHeaderRange = []
        let pageIndex = 0;
        this.Font.Apply(ctx);
        this.FSubControls.forEach((control) => {
            let sheet: TTabSheet | null = DrGraph.dynamic_cast(TTabSheet, control);
            if (sheet) {
                let str = sheet.Title;
                let txtWidth = ctx.measureText(str).width;
                if (pageIndex++ == this.ActivePageIndex) {
                    ctx.fillStyle = "white";
                    ctx.fillRect(left, this.absTop - 2, txtWidth + delta * 2, 30);
                	this.Font.Apply(ctx);
                }
                ctx.fillText(str, left + delta, top);
                this.sheetHeaderRange.push(new TPoint(left, txtWidth + delta * 2));
                left += txtWidth + delta * 2;
            }
            let btn: TButton | null = DrGraph.dynamic_cast(TButton, control);
            if (btn)
                btn.draw();
        })
        return true;
    }

    NewTab(caption: string): TRibbonTab {
        let tab = new TRibbonTab(this);
        tab.Title = caption;
        tab.Top = 28;
        tab.Height = this.Height - tab.Top;
        tab.Align = NAlign.Bottom;
        tab.Visible = false;
        return tab;
    }
}

Ribbon主要管理各Tab，增加一个appButton以及多个快捷按钮。
appButton暂以【DrGraph脑图】随便命名
快捷按钮先设置为Save、Undo、Redo
以上后续均应通过配置实现。

RibbonTab

弱化Tab处理，目前先支持单工具栏，后续再实现为多工具栏模式。

export class TRibbonTab extends TTabSheet {
    caption: string = "Noname";
    toolBarPanel: TPanel;

    constructor(parent: TContainer | null) {
        super(parent);
        this.SetBounds(0, 0, 300, 100);
        this.Visible = false;
        this.toolBarPanel = new TToolBar(this);
        this.toolBarPanel.Height = 63;
        this.toolBarPanel.Align = NAlign.Bottom;
        this.Align = NAlign.Client;
    }
}

ToolBar

export class TToolBar extends TPanel {
    constructor(parent: TContainer | null) {
        super(parent);
        this.AutoArrange = true;
    }

    ReAlign() {
        let restRect = this.BoundRect_Screen;  
        restRect = restRect.offset(-restRect.left, -restRect.top); 
        var helper = new DrCPP.cpp.THelper();
        helper.AlignPos("init", restRect.width, restRect.height);
        this.FSubControls.forEach((control) => {
            if (control.Visible) {
                let pos = helper.AlignPos("append", control.Width, control.Height);
                if (pos >= 0) {
                    control.Top = Math.floor(pos / 10000);
                    control.Left = pos % 10000;
                }
            }
        })
        helper.delete();
        this.FitAll();
    }

    doDraw(ctx: CanvasRenderingContext2D) {
        super.doDraw(ctx);
    }
}

Button

临时凑合，TButton类应该是写得最垃圾，需要大幅度完善。

export class TButton extends TControl {
    caption: string = "";
    icon: string = "";
    mouseOverColor: string = ""   
    iconImage: HTMLImageElement | null = null;
    msgHint: string = "";
    checked: boolean = false;
    style: NButtonStyle = NButtonStyle.Default;
    modalResult: NModalResult = NModalResult.None;
    glyphPos: NGlyphPos = NGlyphPos.Left;

    constructor(parent: TContainer | null) {
        super(parent);
        this.Brush.Gradient([0, 0, 100, 50]).AddColorStop("#EEEEEE", "#CCCCCC");
        this.ApplyXml(`"width="100" height="25" mouseOverColor="#FFDDDD" Font.Size="15"`);
    }

    doDraw(ctx: CanvasRenderingContext2D) {
        if (this.Brush.FillStyle != NBrushFillStyle.None) {
            this.Brush.Apply(ctx);
            DrGraph.TCanvas.Rectangle(ctx, this.BoundRect_Screen, DrGraph.DRAW_FILL);
        }
        if (this.isMouseIn && this.mouseOverColor.length) {
            let color = new TColor(this.mouseOverColor);
            ctx.fillStyle = color.toString();
            DrGraph.TCanvas.Rectangle(ctx, this.BoundRect_Screen, DrGraph.DRAW_FILL);
        }
        if (this.checked) {
            this.Brush.Clone().load(`2|${this.absLeft}, ${this.absTop}, ${this.absLeft + this.Width}, ${this.absTop + this.Height}|3|2|2|0,#FBC06E|1,white`) //SetColor("#FBC06E")
                .Apply(ctx);
            DrGraph.TCanvas.Rectangle(ctx, this.BoundRect_Screen.offset(0, -3), DrGraph.DRAW_FILL);
        }

        this.Font.align = NFontAlign.Left;
        this.Font.baseline = NFontBaseline.Middle;
        this.Font.Apply(ctx);
        let glyphRight = 0, showHeight = 0;
        let offset = 0;
        if (this.icon.length && this.glyphPos != NGlyphPos.OnlyText) {
            if (this.iconImage == null) {
                this.iconImage = new Image;
                this.iconImage.src = this.icon;
            }
            glyphRight = this.iconImage.width;
            showHeight = this.iconImage.height;
            let dstLength = Math.min(this.Height, this.Width);
            if (showHeight > dstLength) {
                let ratio = (dstLength - 10) / showHeight;
                showHeight *= ratio;
                glyphRight *= ratio;
            }
            if (showHeight > 0) {
                offset = (dstLength - showHeight) / 2;
                if (this.isMouseIn && this.Enabled == true)
                    offset -= 1;
                let iconImage = this.iconImage;

                ctx.drawImage(iconImage, this.absLeft + offset, this.absTop + offset, glyphRight, showHeight);
            }
            glyphRight += 5;
        }
        if (this.caption.length > 0) {
            if (this.glyphPos == NGlyphPos.Left || this.glyphPos == NGlyphPos.Right)
                this.Font.align = NFontAlign.Left;
            else
                this.Font.align = NFontAlign.Center;
            this.Font.baseline = NFontBaseline.Middle;
            this.Font.Apply(ctx);
            if (this.glyphPos == NGlyphPos.Left || this.glyphPos == NGlyphPos.Right)
                ctx.fillText(this.caption, this.absLeft + glyphRight, this.absTop + this.Height / 2);
            else {
                let top = this.Height / 2;
                if(this.glyphPos == NGlyphPos.Top)
                    top = (this.Height + showHeight) /  2;
                else if(this.glyphPos == NGlyphPos.Bottom)
                    top = (this.Height - showHeight) / 2;
                ctx.fillText(this.caption, this.absLeft + this.Width / 2, this.absTop + top);
            }
        } 
        if (this.msgHint.length) {
            ctx.textAlign = "right";
            DrGraph.TCanvas.DrawNumberText(ctx, this.msgHint, this.absLeft + this.Width - 7, this.absTop + 8);
        }
    }
}

调用

        let ribbon = new TRibbon(this.controlManager);
        ribbon.NewTab("思维");
        ribbon.NewTab("外观");
        ribbon.NewTab("视图");
        ribbon.ActivePageIndex = 1;
        ribbon.ActivePage!.Controls(0).loadFromRes(this, DrGraph.PATH_RES + "MainTool.xml", "mainToolPanel", this.refreshControls.bind(this));

对应的xml

直接用之前的工具栏xml，主要修改Paste按钮为大按钮，Copy、Cut按钮增加Caption，后面的先不处理。

<?xml version='1.0' encoding='gb2312' ?>
<xml desc="UI Control Config by DrGraph">
	<TPanel name="mainToolPanel" autoArrange="true" >
		<TButton name="btnPaste" Icon="Icon/32x32/EditPaste.png" Width="36" Height="36" Caption="剪贴" glyphPos="Top" Transparent="true" onClick="true" Tag="1" Command="Edit.Paste" Hint="粘贴"/>
		<TButton name="btnCopy" Icon="Icon/24x24/EditCopy.png" Caption="复制" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Copy" Hint="复制" />
		<TButton name="btnCut" Icon="Icon/24x24/EditCut.png" Caption="剪切" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Cut" Hint="剪切" />
		<TButton name="btnDelete2" Icon="Icon/24x24/Delete2.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Delete" />	
		<TButton name="btnFormatBrush" Icon="Icon/24x24/EditFormat.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.FormatBrush" Hint="格式刷" />
		<TButton_DropDown name="btnZoom" btnMain.Icon="Icon/24x24/ZoomIn.png" listPanel.RowHeight="40" listPanel.fontSize="14" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.ZoomIn" Hint="放大" >	
			<TButton name="btnZoomIn" Icon="Icon/24x24/ZoomIn.png" Caption="放大" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.ZoomIn" />
			<TButton name="btnZoomOut" Icon="Icon/24x24/ZoomOut.png" Caption="缩小" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.ZoomOut" />	
		</TButton_DropDown>
		<TButton_DropDown name="btnFlip" btnMain.Icon="Icon/24x24/FlipX.png" listPanel.RowHeight="40" listPanel.fontSize="14" dropDownColor="#3388FF" listPanel.RowHeight="30" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.FlipX" >
			<TButton name="btnFlipX" Icon="Icon/24x24/FlipX.png" Caption="水平翻转" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.FlipX" />
			<TButton name="btnFlipY" Icon="Icon/24x24/FlipY.png" Caption="垂直翻转" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.FlipY" />
			<TButton name="btnRotate90" Icon="Icon/24x24/Rotate90.png" Caption="顺时针旋转90度" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Rotate90" />
			<TButton name="btnRotate180" Icon="Icon/24x24/Rotate180.png" Caption="旋转180度" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Rotate180" />
			<TButton name="btnRotateN90" Icon="Icon/24x24/RotateN90.png" Caption="逆时针旋转90度" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Rotate270" />
		</TButton_DropDown>
		<TButton_DropDown name="btnAlign" btnMain.Icon="Icon/24x24/AlignBottom.png" listPanel.RowHeight="40" listPanel.fontSize="14" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignLeft" >	
			<TButton name="btnAlignLeft" Icon="Icon/24x24/AlignLeft.png" Caption="左端对齐" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignLeft" />
			<TButton name="btnAlignCenterX" Icon="Icon/24x24/AlignCenterX.png" Caption="水平居中" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignCenterX" />
			<TButton name="btnAlignRight" Icon="Icon/24x24/AlignRight.png" Caption="右端对齐" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignRight" />
			<TButton name="btnAlignEqualX" Icon="Icon/24x24/AlignEqualX.png" Caption="水平等距排列" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignEqualX" />	
			<TButton name="btnAlignTop" Icon="Icon/24x24/AlignTop.png" Caption="顶端对齐" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignTop" />	
			<TButton name="btnAlignBottom" Icon="Icon/24x24/AlignBottom.png" Caption="底端对齐" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignBottom" />
			<TButton name="btnAlignCenterY" Icon="Icon/24x24/AlignCenterY.png" Caption="垂直居中" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignCenterY" />
			<TButton name="btnAlignEqualY" Icon="Icon/24x24/AlignEqualY.png" Caption="垂直等距排列" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignEqualY" />
			<TButton name="btnAlignCenter" Icon="Icon/24x24/AlignCenter.png" Caption="窗口居中" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.AlignCenter" />
		</TButton_DropDown>
		<TButton_DropDown name="btnLevel" btnMain.Icon="Icon/24x24/LevelDown.png" listPanel.RowHeight="40" listPanel.fontSize="14" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.LevelDown" >
			<TButton name="btnLevelDown" Icon="Icon/24x24/LevelDown.png" Caption="下移一层" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.LevelDown" />
			<TButton name="btnLevelBottom" Icon="Icon/24x24/LevelBottom.png" Caption="置于底层" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.LevelGround" />
			<TButton name="btnLevelTop" Icon="Icon/24x24/LevelTop.png" Caption="置于顶层" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.LevelTopest" />
			<TButton name="btnLevelUp" Icon="Icon/24x24/LevelUp.png" Caption="上移一层" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.LevelUp" />
			<TButton name="btnLockX" Icon="Icon/24x24/LockX.png" Caption="水平锁定" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.LockX" />
			<TButton name="btnLockXY" Icon="Icon/24x24/LockY.png" Caption="垂直锁定" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.LockY" />
		</TButton_DropDown>
		<TButton name="btnDeGroup" Icon="Icon/24x24/DeGroup.png" Hint="分解" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.DeGroup" />
		<TButton name="btnGroup" Icon="Icon/24x24/Group.png" Hint="组合" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Group" />
		<TButton name="splitter1" Width="2" Height="60" FillColor="#F0F0F0" />
		<TButton name="btnInsertLine" Icon="Icon/24x24/Meta_Line.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Line" />
		<TButton name="btnInsertRect" Icon="Icon/24x24/Meta_Rectangle.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Rectangle" />
		<TButton name="btnInsertEllipse" Icon="Icon/24x24/Meta_Ellipse.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Ellipse" />
		<TButton name="btnInsertCircle" Icon="Icon/24x24/Meta_Circle.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Circle" />
		<TButton name="btnInsertCurve" Icon="Icon/24x24/Meta_Curve.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Curve" />
		<TButton name="btnInsertText" Icon="Icon/24x24/Meta_Text.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Text" />
		<TButton name="btnInsertImage" Icon="Icon/24x24/Meta_Image.png" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Image" />
		<TButton_DropDown name="btnInsertPolygons" btnMain.Icon="Icon/24x24/Meta_Polygon.png" listPanel.RowHeight="40" listPanel.fontSize="14" rowCount="15" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon" >
			<TButton name="btnInsertPolygon" Icon="Icon/24x24/Meta_Polygon.png" Caption="多边形" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.Polygon" />
			<TButton name="btnInsertLines" Icon="Icon/24x24/Meta_Polygon2.png" Caption="多线段" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.Lines" />
			<TButton name="btnInsertPolygon3" Icon="Icon/24x24/Meta_Polygon3.png" Caption="等边三角形" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.3" />
			<TButton name="btnInsertPolygon4" Icon="Icon/24x24/Meta_Polygon4.png" Caption="正方形" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.4" />
			<TButton name="btnInsertPolygon5" Icon="Icon/24x24/Meta_Polygon5.png" Caption="正五边形" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.5" />
			<TButton name="btnInsertPolygon6" Icon="Icon/24x24/Meta_Polygon6.png" Caption="正六边形" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.6" />
			<TButton name="btnInsertPolygon8" Icon="Icon/24x24/Meta_Polygon8.png" Caption="正八边形" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.8" />
			<TButton name="btnInsertPolygon5" Icon="Icon/24x24/Meta_Polygon5N.png" Caption="正五角星" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.-5" />
			<TButton name="btnInsertPolygon6" Icon="Icon/24x24/Meta_Polygon7N.png" Caption="正七角星" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.-7" />
			<TButton name="btnInsertPolygon8" Icon="Icon/24x24/Meta_Polygon8N.png" Caption="正八角星" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.-8" />
			<TButton name="btnInsertPolygon8" Icon="Icon/24x24/Meta_Polygon9N.png" Caption="正九角星" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Polygon.-9" />
		</TButton_DropDown>
		<TButton name="splitter2" Width="2" Height="60" FillColor="#F0F0F0" />
		<TButton_DropDown name="btnBeginArrow" btnMain.Icon="Icon/24x24/Arrow1.png" listPanel.RowHeight="40" listPanel.fontSize="14" rowCount="13" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.1" >
			<TButton name="btnStyleArrow1" Icon="Icon/24x24/Arrow1.png" Caption="无箭头" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.1" />
			<TButton name="btnStyleArrow2" Icon="Icon/24x24/Arrow2.png" Caption="箭头2" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.2" />
			<TButton name="btnStyleArrow3" Icon="Icon/24x24/Arrow3.png" Caption="箭头3" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.3" />
			<TButton name="btnStyleArrow4" Icon="Icon/24x24/Arrow4.png" Caption="箭头4" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.4" />
			<TButton name="btnStyleArrow5" Icon="Icon/24x24/Arrow5.png" Caption="箭头5" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.5" />
			<TButton name="btnStyleArrow6" Icon="Icon/24x24/Arrow6.png" Caption="箭头6" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.6" />
			<TButton name="btnStyleArrow7" Icon="Icon/24x24/Arrow7.png" Caption="箭头7" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.7" />
			<TButton name="btnStyleArrow8" Icon="Icon/24x24/Arrow8.png" Caption="箭头8" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.8" />
			<TButton name="btnStyleArrow9" Icon="Icon/24x24/Arrow9.png" Caption="箭头9" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.9" />
			<TButton name="btnStyleArrow10" Icon="Icon/24x24/Arrow10.png" Caption="箭头10" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.10" />
			<TButton name="btnStyleArrow11" Icon="Icon/24x24/Arrow11.png" Caption="箭头11" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.11" />
			<TButton name="btnStyleArrow12" Icon="Icon/24x24/Arrow12.png" Caption="箭头12" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.BeginArrow.12" />
		</TButton_DropDown>
		<TButton_DropDown name="btnEndArrow" btnMain.Icon="Icon/24x24/Arrow1.png" listPanel.RowHeight="40" listPanel.fontSize="14" rowCount="13" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.1" >
			<TButton name="btnStyleArrow1" Icon="Icon/24x24/Arrow1.png" Caption="无箭头" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.1" />
			<TButton name="btnStyleArrow2" Icon="Icon/24x24/Arrow2.png" Caption="箭头2" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.2" />
			<TButton name="btnStyleArrow3" Icon="Icon/24x24/Arrow3.png" Caption="箭头3" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.3" />
			<TButton name="btnStyleArrow4" Icon="Icon/24x24/Arrow4.png" Caption="箭头4" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.4" />
			<TButton name="btnStyleArrow5" Icon="Icon/24x24/Arrow5.png" Caption="箭头5" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.5" />
			<TButton name="btnStyleArrow6" Icon="Icon/24x24/Arrow6.png" Caption="箭头6" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.6" />
			<TButton name="btnStyleArrow7" Icon="Icon/24x24/Arrow7.png" Caption="箭头7" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.7" />
			<TButton name="btnStyleArrow8" Icon="Icon/24x24/Arrow8.png" Caption="箭头8" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.8" />
			<TButton name="btnStyleArrow9" Icon="Icon/24x24/Arrow9.png" Caption="箭头9" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.9" />
			<TButton name="btnStyleArrow10" Icon="Icon/24x24/Arrow10.png" Caption="箭头10" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.10" />
			<TButton name="btnStyleArrow11" Icon="Icon/24x24/Arrow11.png" Caption="箭头11" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.11" />
			<TButton name="btnStyleArrow12" Icon="Icon/24x24/Arrow12.png" Caption="箭头12" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.EndArrow.12" />
		</TButton_DropDown>
		<TButton_DropDown name="btnConnType" btnMain.Icon="Icon/24x24/Conn_RightAngle.png" listPanel.RowHeight="40" listPanel.fontSize="14" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.ConnectType.RightAngle" >
			<TButton name="btnConnTypeBezier" Icon="Icon/24x24/Meta_Bezier.png" Caption="贝塞尔曲线" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.ConnectType.Bezier" />
			<TButton name="btnConnTypeLine" Icon="Icon/24x24/Meta_Line.png" Caption="直线段" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.ConnectType.Line" />
			<TButton name="btnConnTypeRightAngle" Icon="Icon/24x24/Conn_RightAngle.png" Caption="直角折线" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.ConnectType.RightAngle" />
		</TButton_DropDown>
		<TButton_DropDown name="btnPriority" btnMain.Icon="Icon/24x24/PriorityConnection.png" listPanel.RowHeight="40" listPanel.fontSize="14" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.Priority.Connection" >
			<TButton name="btnPriorityModel" Icon="Icon/24x24/PriorityModel.png" Caption="模型点优先" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.Priority.Model" />
			<TButton name="btnPriorityConn" Icon="Icon/24x24/PriorityConnection.png" Caption="连接点优先" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Param.Priority.Connection" />
			<TButton name="btnPriorityHelp" Icon="Icon/24x24/PriorityHelp.png" Caption="查看对象信息" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Edit.Help" />
		</TButton_DropDown>
		<TButton_DropDown name="btnMark" btnMain.Icon="Icon/24x24/Mark.png" listPanel.RowHeight="40" listPanel.fontSize="14" dropDownColor="#3388FF" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.Points_Length" >
			<TButton name="btnMarkPointsLength" Icon="Icon/24x24/MarkPointsLength.png" Caption="两点长度" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.PointsLength" />
			<TButton name="btnMarkPointsHorz" Icon="Icon/24x24/MarkPointsHorz.png" Caption="两点水平" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.PointsHorz" />
			<TButton name="btnMarkPointsVert" Icon="Icon/24x24/MarkPointsVert.png" Caption="两点垂直" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.PointsVert" />
			<TButton name="btnMarkLineLength" Icon="Icon/24x24/MarkLineLength.png" Caption="线段长度" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.LineLength" />
			<TButton name="btnMarkLineHorz" Icon="Icon/24x24/MarkLineHorz.png" Caption="线段水平" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.LineHorz" />
			<TButton name="btnMarkLineVert" Icon="Icon/24x24/MarkLineVert.png" Caption="线段垂直" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.LineVert" />
			<TButton name="btnPriorityHelp" Icon="Icon/24x24/MarkAngle.png" Caption="角度标注" Width="30" Height="30" Transparent="true" onClick="true" Tag="1" Command="Insert.Mark.Angle" />
		</TButton_DropDown>
	</TPanel>
</xml>

运行效果

在这里插入图片描述

下一步工作

初步达到预期，后续需要做模块化工作，主要包括以下几点：

  1. 丰富Ribbon中的各界面要素，比如下拉框、Gallery等
  2. 完全可配置化
  3. BackView
  4. 主题皮肤
DrGraph
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
漂亮的自绘Ribbon工具栏
05-10
自绘“Ribbon”工具栏,在VS 2003下编译通过，采用gdi+技术.
canvas-ribbon.js:A ribbon background drawn on canvas.(随机不规则三角彩条背景插件)
05-07
canvas-ribbon.js (English version is down below.) 随机不规则三角彩条背景插件。 此项目在 基础上进行了许多改进，使得使用更加方便，且适用于更多场景。 预览效果： 观看在我的主页上的应用效果：...
4、Ribbon菜单工具栏 和 按钮事件
weixin_30786657的博客
10-22 802
1、Ribbon菜单工具栏 1.1 参考资料： 【1】　　http://www.drdobbs.com/windows/whats-new-in-wpf-45/240009614 【2】　　http://www.cnblogs.com/gnielee/archive/2010/05/10/wpf4-ribbon-quick-access-toolbar.html 【3】 Apre...
Qt/Qt Creator窗体界面集成自定义类Ribbon工具栏-代码自定义实现-非第三方工具插件
最新发布
alicema1111的博客
01-11 1091
这篇博客针对《Qt/Qt Creator窗体界面集成自定义类Ribbon工具栏-完全代码自定义实现-非第三方工具插件》编写代码，代码整洁，规则，易读。 学习与应用推荐首选。
WPF 4 Ribbon 开发 之 标签工具栏（Tab Toolbar）
weixin_34080951的博客
05-12 240
     本篇将开始介绍标签工具栏的开发内容，标签工具栏可以说是Ribbon 的核心部分，应用程序所有的功能特性都会集中在这里，一个强大的Ribbon 工具栏也是一款软件成功的关键。在开始前还是先来看看标签工具栏的结构，从图中可看出Ribbon 工具栏主要分为四部分：Ribbon -&gt; Tab -&gt; Group -&gt; Control。      下面来添加一个Clipbo...
RibbonControl 工具栏上的一些基本操作
weixin_34192816的博客
03-13 2373
1：左上角图标的属性项 应用程序ico标 ribboncontrol默认 左上角图标区域隐藏，先转换成 ribbonFrom 然后区域出现 下一步修改此区域ico：右键ribbonControl1 属性 -applicationico 进行选择 2：启动软件默认隐藏最小化ribboncontorl工具栏 去掉ribbon page 需要程序启动时运行如下指令 ...
react-ribbon:使用React构建的响应式工具栏
05-25
React.Ribbon：基于React的响应式工具栏 在前端开发领域，React.js是一个广泛使用的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。React以其组件化、虚拟DOM和高效性能等特点深受开发者喜爱。"react...
qtn-ribbon.zip
12-01
它提供了丰富的图形用户界面（GUI）组件和工具，使得开发者可以使用C++语言创建高性能、多平台的应用程序。Qt库包含了大量的预定义类，用于窗口、按钮、文本框等元素的创建和管理，同时也支持自定义组件。 **2. ...
SpringCloud-Ribbon[入门案例]
02-24
包括feign提供的声明式服务调用也是基于该Ribbon实现的。ribbon默认提供很多种负载均衡算法，例如轮询、随机等等。甚至包含自定义的负载均衡算法。他解决并提供了微服务的负载均衡的问题。目前业界主流的负载均衡...
bs（二）表单（网格系统、下拉菜单、简单导航）
Jinming Su
11-29 2074
网格系统 列类.col-md-4 //其中的数字表示占的百分比 注：其中md表示middle,还有es,sm,lg不同型号 在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表
delphi10.3.1-Ribbon控件
02-22
通过社区版，以GetIt方式，下载安装后的Ribbon控件。按时要求分别存放到相应位置，安装即可。
QT-QRibbon样式框架的使用，支持窗口控件拖拉和停靠效果
u013083044的博客
11-30 2155
QT-QRibbon样式框架的使用，支持窗口控件拖拉和停靠效果一、演示预览二、关键代码三、代码链接 一、演示预览 二、关键代码 代码如下： _->_mainWindow = window; // 设置透明度渐变动画 if (!_->opacityAnimation.targetObject()) { _->opacityAnimation.setTargetObject(_->_mainWindow); _->o
细品RibbonX(3)：认识快速访问工具栏(QAT)
狂奔之林的博客
03-01 2076
细品RibbonX(3)：认识快速访问工具栏(QAT) 资料整理来自于论坛完整版下载地址：http://download.csdn.net/download/nodeman/10264659  Loading ...  QAT概述快速访问工具栏是唯一与以前版本的工具栏相仿的Office 2007界面元素，默认情况下，快速访问工具栏位于界面上方、Office按钮右侧，如下图1所示
Ribbon界面介绍
风轻云淡 勇往直前
03-25 6102
http://hi.baidu.com/hoping/item/b257e10e99ed7312cd34ea1d Ribbons Ribbon是现代化的方式帮助用户高效和直接的查找、理解和使用工具命令——通过最少的点击，减少从“尝试-错误”（trainl-and-error）方式中恢复操作，寻找新的操作的需要，并且不再需要区查看软件帮助。   Ribbon是一种命令工具
Ribbon菜单栏布局和调整大小
热门推荐
Good Good Work, Day Day Up.
07-28 1万+
设置菜单组的变化顺序。窗口大小调整时，GroupSizeReductionOrder设置多个菜单组的先后顺序，下图显示当逐渐缩小窗口时，菜单的变化                                           GroupSizeReductionOrder=
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、付费专栏及课程。

余额充值