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

DrGraph DrGraph 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 600+累计阅读 602平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄14年
关注
原创 最新推荐文章于 2026-03-02 14:17:05 发布 602 阅读 AI 写同款· GEO 优化 ›
UG/NX二次开发实战：从零构建现代化Ribbon界面菜单与工具条 本文详细介绍了UG/NX二次开发中构建现代化Ribbon界面菜单与工具条的实战方法。从开发环境配置到核心元素开发，再到高级功能实现和调试部署技巧，全面解析如何利用NX10.0及以上版本的Ribbon界面支持，提升插件的专业度和用户体验。通过实际案例展示，Ribbon界面可显著提高操作效率，减少误操作率。 阅读详情

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

当前文章被收录于：

DrGraph
28 篇文章 1 人学习
订阅专栏 查看详情
原理示教

当前文章被收录于：

原理示教
26 篇文章 0 人学习
订阅专栏 查看详情
标签
#typescript #html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
BCGControlBarPro 12.0：MFC界面扩展库的全面升级 在现代软件开发中，用户界面（UI）的重要性不言而喻。BCGControlBarPro 作为一款功能强大的专业MFC扩展库，自12.0版本发布以来，为软件界面带来了革命性的改进。本章将为读者提供一个关于BCGControlBarPro的总体概述，包括其设计理念、关键功能和在MFC开发中的应用价值。BCGControlBarPro 12.0是BCGSoft公司开发的一个全面的MFC扩展库，它为开发者提供了一系列预制的UI组件，包括但不限于Ribbon界面、自定义工具栏和菜单、状态栏以及对话框。 阅读详情

相关推荐

MFC 实现Ribbon bar

该Dome主要展示了切换皮肤，添加类别，面板，以及基本控件，用VS2010可以直接打开。

bs（二）表单（网格系统、下拉菜单、简单导航）

网格系统 列类.col-md-4 //其中的数字表示占的百分比 注：其中md表示middle,还有es,sm,lg不同型号 在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表

Jinming Su 2264

漂亮的自绘Ribbon工具栏

自绘“Ribbon”工具栏,在VS 2003下编译通过，采用gdi+技术.

BS系统打开无menubar、toolbar

<br />    很多BS系统打开之后没有工具栏和菜单栏，使显示空间更充足，并且更加美观，实现内容很简单，我在整理的时候很想通过object控件中的方法在javascript自动最大化，但是放服务器之后执行无效，一直没找到原因，望哪位能指教。 index.html内容如下： <object id="max" classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <br /> <param name="Command" value="Maximize">

申良龙的专栏 352

delphi10.3.1-Ribbon控件

通过社区版，以GetIt方式，下载安装后的Ribbon控件。按时要求分别存放到相应位置，安装即可。

Office-Ribbon-2010, 在 HTML/CSS/JS 中，Office 2010样式功能区工具栏.zip

Office-Ribbon-2010, 在 HTML/CSS/JS 中，Office 2010样式功能区工具栏 Office 2010样式功能区工具栏在 HTML/CSS/JS 中最初于 8年June发布于 http://rogerpincombe.com/ribbon，2011我已经创建了 Office 2010功能区工具栏的一个实现，可以在

BS版图形系统 - 界面控件配置

BS版图形系统 - 界面控件配置界面控件考虑资源配置化XML资源配置加载下一步任务 QQ: 282397369 界面控件考虑 有了属性浏览器，下来就该处理工具栏了。 一个直观感觉，网页留给程序的空间，要比应用程序少。网页在浏览器这个程序中运行，不同的浏览器，提供相应的界面，占据标题、工具栏位置，甚至书签与侧栏。所以做网页程序的时候，尽量能将工作区整大一些。 当然，如何整应该是UI设计的事，技术层面还是关心如何实现的问题。 在属性浏览器的基础上，初步实现了一个VCL的JS框架。但新建控件，还是要写一堆代码来控

drgraph的博客 1270

CODESYS连接触摸屏

触摸屏：威纶通-MT8071iP（网络IP：192.168.1.10） 控制器：研华AMAX-5580（PAC）（Win10系统，网络IP：192.168.1.3） CODESYS RTE：RTE 64 V3.5 SP13 Build05 笔记本：Thinkpad L14（网络IP：192.168.1.2） CODESYS IDE：V3.5 SP13（ADD ON V3.5.13.5） 一、确认网络通讯正常（关闭防火墙） 笔记本与触摸屏网络测试情况 笔记本与控制器网络测试情况 二、控制器部分 1、新建

Leo的博客 1万+

BS版图形系统 - Ribbon Gallery

BS版图形系统 - Ribbon Gallery先准备相应图标实现资源配置初步效果上下箭头按钮处理下一步工作 今天尝试做一个Ribbon Gallery效果 直接参考PPT效果 当然，感觉在网页里，占用空间少一些好，所以把各图标间距整小一点。 先准备相应图标 实现 export class TRibbonGallery extends TPanel { rightPanel: TPanel; btnUp: TButton; btnMid: TButton; btnDown

drgraph的博客 372

注意力机制详解

注意力机制详解Attention机制由来Attention定义Encoder-Decoder框架存在问题：Attenion机制的引入Attention机制的类别Hard AttentionSoft AttentionGlobal AttentionLocal AttentionSelf AttentionMulti-head Attention附录—Transformer全局视角Tensor视角Encoder部分Self-AttentionSelf-Attention向量计算Self-Attention的矩

weixin_43236310的博客 1万+

WPF数据可视化：LiveCharts自定义X轴与Y轴的5个实战技巧（附完整代码）

本文详细介绍了在WPF应用中使用LiveCharts进行数据可视化时，自定义X轴与Y轴的5个核心实战技巧。内容涵盖精确控制刻度步距、深度定制视觉样式、实现多轴布局对比、优化显示空间以及构建响应式动态轴，并提供了完整的C#和XAML代码示例，帮助开发者创建专业且用户体验出色的图表。

moss5的博客 691

BS版图形系统 - 整合C++到JS中

BS版图形系统 - 整合C++到JS中C/C++面向WebAssembly编程C++代码加上类的C++代码JS调用代码运行结果 QQ: 282397369 几个月下来，JavaScript/TypeScript算是基本入门了，也能编一些自认为满意的效果。从正常预期来看，BS版能达到桌面应用的效果，这可作为一个方向。 图形的应用场合很多，画电路气路液路图只是其中一个。当然在做的过程中，也比较随意，突然发现可以先做思维导图，然后居然也实现了一个初版。 又有点心痒，准备把这个也做得专业一点，至少先达到百度脑图的

drgraph的博客 324

Ultrascale/Ultrascale+ FPGA GTH IP及结构详解（一）

FPGA GTH Transceiver

houzi6320的博客 1万+

Ribbon界面介绍

http://hi.baidu.com/hoping/item/b257e10e99ed7312cd34ea1d Ribbons Ribbon是现代化的方式帮助用户高效和直接的查找、理解和使用工具命令——通过最少的点击，减少从“尝试-错误”（trainl-and-error）方式中恢复操作，寻找新的操作的需要，并且不再需要区查看软件帮助。   Ribbon是一种命令工具

风轻云淡 勇往直前 7165

电磁阀的符号解读

先数方框数量定“几位”（工作位置数 ）；数接口数量（P、A、R等 ）定“几通”；看箭头、截断符号，结合常态位（弹簧侧/中间位 ），分析通电/断电时的通路切换；字母（P、A、R ）、线圈（单/双电控 ）、弹簧（复位 ）辅助确认功能（如NO/NC对应常态通断 ）。不同厂家符号细节（如编码、线圈画法 ）有差异，遇到陌生符号，建议结合产品手册、品牌规范核对，就能精准读懂电磁阀的“语言”啦~

创新改变世界！ 6893

node-red 可视化探索

配置socket选择配置流程产生url。

weixin_44133581的博客 3412

4、Ribbon菜单工具栏 和 按钮事件

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...

weixin_30786657的博客 968

高级用法:LangChain 安全防护(Guardrails)

在调用开始时校验请求，可做关键词过滤、身份校验、限流等。= "human":return {}],# 使用],= "human":return {}],

Long_像风一样自由 316

MFC有关Ribbon控件的使用

MFC Ribbon控件

weixin_45144862的博客 1808

CKS-CN考试之路----02

其实我们根据题目也可以知道秘钥是叫clever-cactus。稍作等待后,确认pod的状态,如果是1/1基本就没问题了。这步不一定做.目的是确定秘钥的名字。

Q先生 654

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

WPF 4 Ribbon 开发 之 标签工具栏（Tab Toolbar）

     本篇将开始介绍标签工具栏的开发内容，标签工具栏可以说是Ribbon 的核心部分，应用程序所有的功能特性都会集中在这里，一个强大的Ribbon 工具栏也是一款软件成功的关键。在开始前还是先来看看标签工具栏的结构，从图中可看出Ribbon 工具栏主要分为四部分：Ribbon -&gt; Tab -&gt; Group -&gt; Control。      下面来添加一个Clipbo...

weixin_34080951的博客 373

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

Qt功能区：Ribbon框架

Ribbon是一种将菜单栏和工具栏合并的界面设计，通过标签页（Category）和面板（Pannel）组织功能按钮。SARibbon库参考了MFC Ribbon的命名风格，支持上下文标签（Context Category）、应用按钮（Application Button）、快速响应栏（Quick Access Bar）和预览控件（Gallery）等功能。在Qt中使用SARibbon时，可以通过动态库安装和配置，将主窗口的父类替换为SARibbonMainWindow，并在QWidget中嵌入SARibbon

qingttqing的博客 2787

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

温度PID控制PLC程序

温度PID稳定控制程序，适用于欧姆龙PLC，对其他PLC也具有很大参考价值

计算机各部分名称ppt,PowerPoint软件界面各部分名称(PPT2010/2013/2016)

PowerPoint软件界面各部分名称(PPT2010/2013/2016)　凡事皆怕细致较真，鉴于网友的相关教程中会出现一些专用名称，让我们这些小白似懂非懂的深感不明觉利，个人感觉实在是有必要介绍下相关内容，虽然既简单，可能对新手朋友会有所帮助。一、快速启动栏我们通过设置，在这里可以显示，新建、打开、保存、撤销以及回复等按钮温馨提示：界面顶部一般显示文档名称。二、控制按钮用于显示最小化、最大化/...

weixin_27102543的博客 3555

细品RibbonX(45)：在快速访问工具栏（QAT）中添加项目

细品RibbonX(45)：在快速访问工具栏（QAT）中添加项目资料整理来自于论坛完整版下载地址：http://download.youkuaiyun.com/download/nodeman/10264659  Loading ... 快速访问工具栏（QAT）是Office 2007新用户界面的一部分，可以使用老的Office工具栏定制方法进行定制。下面，我们主要介绍如何使用XML定制QAT。概述QAT可以...

狂奔之林的博客 1454

Ribbon第一节：控件大全

【代码】Ribbon控件大全。

nianfen的博客 1182

UG/NX10.0二次开发 - 菜单与工具条（学习笔记）

NX10.0二次开发之菜单与工具条学习笔记

weixin_44553525的博客 1万+
上一篇： BS版图形系统 - 整合C++到JS中
下一篇： BS版图形系统 - OpenCV - 第5章笔记
点赞 0
评论 0
书签 书签 0
DrGraph
DrGraph
博客等级 码龄14年 228粉丝 77原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值