基于Canvas的ToolStrip工具栏

        市面上，有很多、很多的工具栏。种类丰富，样式多彩，功能齐全。比如，当前CSDN的文章发布器，就有一个工具栏。

既然有这么多的工具栏，作者为什么还要再造轮子呢？为了以下几点：

        1、Canvas技术论证；

        2、更细腻；

        3、更紧凑；

        4、多样式；

        5、脱离CSS样式表；

        6、属性化；

        7、自定义、精准化事件；

        8、更便捷；

一、图像在文本左侧

 

二、图像在文本上方

 

 三、仅显示文本

 

四、仅显示图像

如上，提供四种样式，工具栏按钮间距更紧凑，适用场景更丰富（已测，可在手持设备上正常使用）。

 

ToolStripItem，代码片段

export default class ToolStripItem {
	constructor() {
		this.Parent = null;
		this._ImageSrc = "";
		this._Image = new Image();
		this._Image.addEventListener("load", this.OnImageLoad.bind(this));
		this._ForeColor = "None";
		this.Alignment = "Left";
		this.Bounds = new Rectangle();
		this.Children = new ToolStripItemCollection(this);
		this.Enable = true;
		this.Name = ""
		this.Text = "";
		this.ToolStrip = null;
		this.Visible = true;
		this.Tag = null;
		this.Spliter = false;
	}

	get ForeColor() {
		return this._ForeColor;
	}

	set ForeColor(pcValue) {
		if (this._ForeColor !== pcValue) {
			this._ForeColor = pcValue;
			this.ToolStrip.UpdateToolStrip();
		}
	}
    ……
}

如上，ToolStripItem工具栏元素，提供丰富的属性，避免了冗余、繁杂、晦涩的CSS样式。作为一名长期使用面向对象语言的IT人员，对CSS样式表是很绝望的。

ToolStrip，代码片段

export default class ToolStrip {
	constructor() {
		this._EventTarget = new EventTarget();
		this._OnItemClick = null;
		this._OnItemDoubleClick = null;

		this._HotItem = null;
		this._PressItem = null;
		this.AutoSize = false;
		this.BackColor = "rgb(228, 234, 241)";
		this.Dropdown = null;
		this.ForeColor = "Black";
		this.FontFamily = "微软雅黑";
		this.FontSize = "14";
		this.ItemBackColorHot = "Gold";
		this.ItemBackColorPress = "Orange";
		this.ItemBorderColor = "rgb(204, 132, 0)";
		this.Items = new ToolStripItemCollection(this);
		this.ItemStyle = ToolStripItemStyle.ImageBeforeText;
		this.Height = 0;
		this.Width = 0;
		this.Graphics = new EniacGraphics();

		this._OnMouseDown = this.OnMouseDown.bind(this);
		this._OnMouseMove = this.OnMouseMove.bind(this);
		this._OnMouseUp = this.OnMouseUp.bind(this);
		this._OnClick = this.OnClick.bind(this);
		this._OnMouseLeave = this.OnMouseLeave.bind(this);
		this._OnMouseDoubleClick = this.OnMouseDoubleClick.bind(this);
		this._OnContextMenu = this.OnContextMenu.bind(this);
	}
	……

	get OnItemClick() {
		return this._OnItemClick;
	}

	set OnItemClick(poValue) {
		if (this._OnItemClick !== null) {
            ……
		}

		this._OnItemClick = poValue;
		if (this._OnItemClick !== null) {
            ……
		}
	}

	get OnItemDoubleClick() {
		return this._OnItemDoubleClick;
	}

	set OnItemDoubleClick(poValue) {
		if (this._OnItemDoubleClick !== null) {
            ……
		}

		this._OnItemDoubleClick = poValue;
		if (this._OnItemDoubleClick !== null) {
            ……
		}
	}
}

function ToolStrip_ItemClick(e) {
    var loToolStrip = e.Item.ToolStrip;
    for (let liIndex = 0; liIndex < loToolStrip.Items.Count; liIndex++) {
        var loItem = loToolStrip.Items[liIndex];
        if (e.Item == loItem) {
            loItem.ForeColor = "None";
            var loCanvas = document.getElementById("FlowDesigner");
            var loDesigner = loCanvas.Component;
            loDesigner.FrozenType = null;
            loDesigner.TempType = loItem.Tag;
        }
        else {
            loItem.ForeColor = "None";
        }
    }
}

如上，提供了OnItemClick、OnItemDoubleClick事件。当然，也可以根据自身需求，定义任何想要的事件。

样式切换，超级简便。

function ChangeToolStripStyle(pcStyle) {
	var loToolStrip = document.getElementById("ToolStripDemo");
	//ImageBeforeText、ImageAboveText、Image、Text
	loToolStrip.Component.ItemStyle = pcStyle;
	loToolStrip.Component.UpdateToolStrip();
}

好了，由于时间关系（已经23：15了），首篇文章先到这里。如有感兴趣的同僚，可以联系，大家相互探讨。

本人对GDI+、Canvas相当痴迷，并小有成就。欢迎咨询、洽谈。