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

DrGraph DrGraph 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 600+累计阅读 602平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄14年
关注
原创 最新推荐文章于 2026-04-08 09:49:24 发布 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

Anroid8.1 强制修改系统可以adb remount

在Android6.0 （Android M）user版本上，发现使用adb root后再adb remount系统之后会提示这样信息：remount of /system failed: Read-only file system，这是不能对system分区进行操作，提示没有写权限，为只读文件系统Read-only file system，因为系统本身在user就不支持可写操作，我们就不能adb push来调试apk，如果想调试apk就需要修改system、vendor权限问题。 如下现象： C:\Use

wq892373445的博客 1407

BS版图形系统 - Ribbon Gallery

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

drgraph的博客 372

STM32+OpenCV云台PID调参实战：从震荡到丝滑跟踪的进阶之路

本文详细介绍了基于STM32和OpenCV的跟踪云台PID调参实战经验。从硬件搭建、PID控制原理到调参技巧，系统讲解了如何通过调整比例、积分和微分参数解决系统震荡问题，实现从震荡到丝滑跟踪的进阶过程，特别适合电赛和嵌入式视觉控制开发者参考。

tgb3456789的博客 715

手把手教你用海康威视相机+DLP4500搭建双目结构光系统（附避坑指南）

本文详细介绍了如何使用海康威视相机和DLP4500搭建双目结构光三维测量系统，涵盖硬件选型、系统搭建、双目标定及三维重建等关键步骤。特别针对预算有限的开发者和实验室团队，提供实用的避坑指南和优化技巧，帮助实现0.02mm的高精度测量。

weixin_42526087的博客 462

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

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

drgraph的博客 324

如何在非序列模式下使用类似图像模功能

如何在非序列模式下使用类似图像模功能

weixin_72050316的博客 552

Ribbon界面介绍

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

风轻云淡 勇往直前 7165

UG\NX二次开发 获取对象的层、颜色、隐藏状态、线宽、线型、高亮显示状态

获取对象的层、颜色、隐藏状态、线宽、线型、高亮显示状态。

王牌飞行员_里海的博客 1981

《用 AI 赋能医药科研创新》目录（持续更新）

本专栏旨在指导医学科研和药物研发人员运用AI技术提升研究效率。内容包括：利用AI分析文献、识别研究热点、自动生成研究草稿；在新药研发中，通过AI优化临床方案设计、受试者筛选等环节；介绍AI理论基础如大语言模型、提示词工程学及智能体技术发展历程。专栏采用5000-9000字的长文形式，系统讲解AI在医药研发各环节的应用方法，帮助研究者缩短周期、降低成本，推动医药研发进入智能化新阶段。

MD Code 501

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

跨越边界：用MessagePipe实现无缝的进程间通信

MessagePipe是一个用于.NET平台的消息传递库，它专注于简化异步消息处理和进程间通信。通过提供一系列易于使用的API，开发者可以快速搭建起稳定可靠的通信管道，支持多种传输协议（如TCP、Unix域套接字等），并内置了序列化/反序列化功能，使得跨语言和跨平台的数据交换变得轻而易举。为了方便序列化和反序列化操作，我们需要为每种消息定义对应的类或结构体，并标记属性。这样可以确保消息在发送方和接收方之间正确无误地传递。[Key0set;[Key1set;

墨夶的博客 816

MFC有关Ribbon控件的使用

MFC Ribbon控件

weixin_45144862的博客 1808

Echarts - 去掉图表上的横线和竖线

效果图 默认效果： 变为如下图所示效果： 实现方法 官方配置文档：https://echarts.apache.org/zh/option.html#radar.splitLine 在 xAxis yAxis 配置中分别加入以下代码： splitLine: { show:false }

🏆 前端领域优质创作者 1万+

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

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

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

weixin_34080951的博客 373

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

Qt功能区：Ribbon框架

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

qingttqing的博客 2787

汉书HE8，好用的汇编代码编写工具

汉书HE8，好用的汇编代码编写工具早期编写汇编代码所用功能强大

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过，这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后，重新检测通过。

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

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

weixin_27102543的博客 3556

细品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、付费专栏及课程。

余额充值