TWaver初学实战——炫动2D机房之设备篇

Posted 老-_=乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TWaver初学实战——炫动2D机房之设备篇相关的知识,希望对你有一定的参考价值。

有了机柜,下面就该上设备了。不过,这似乎也太简单,因为

设备面板就是个小灰块

……呃,还是再分几个区吧,要不实在太单调:

	drawPane: function(ctx) {
		ctx.fillStyle = this._borderColor;
		ctx.fillRect(
			this._panelData.x,
			this._panelData.y,
			this._panelData.w,
			this._panelData.h);
		ctx.fillStyle = this._centerPanelColor;
		ctx.fillRect(
			this._panelData.center.x,
			this._panelData.center.y,
			this._panelData.center.w,
			this._panelData.center.h);
		ctx.fillStyle = this._sidePaneColor;
		ctx.fillRect(
			this._panelData.left.x,
			this._panelData.left.y,
			this._panelData.left.w,
			this._panelData.left.h);
		ctx.fillRect(
			this._panelData.right.x,
			this._panelData.right.y,
			this._panelData.right.w,
			this._panelData.right.h);
	},

还是老路子,再

添加交互变化

	drawPane: function(ctx) {
		ctx.fillStyle = this._element._isFocus ? this._borderFocusColor : this._borderColor;
		……
		if(this._element._isFocus) {
			ctx.lineWidth = this._outlineWidth;
			ctx.strokeStyle = this._outlineColor;
			ctx.strokeRect(
				this._panelData.x - this._outlineWidth / 2,
				this._panelData.y - this._outlineWidth / 2,
				this._panelData.w + this._outlineWidth,
				this._panelData.h + this._outlineWidth);
		}
	},

  

接下来才是重点,那就是设备端口的绘制。首先

绘制电源端口

电源端口绘制在左右面板,单列纵向均匀排列:

	initPowerPorts: function() {
		var self = this;
		var count = this._element._powerPortAmount;
		var lCount = count && Math.ceil(count / 2);
		if(lCount) {
			for(i = 0; i < lCount; i++) {
				var number = i * 2 + 1;
				initPowerPort(this._panelData.left, lCount, number, i);
			}
		}
		var rCount = count && Math.floor(count / 2);
		if(rCount) {
			for(i = 0; i < rCount; i++) {
				var number = (i + 1) * 2;
				initPowerPort(this._panelData.right, rCount, number, i);
			}
		}
		function initPowerPort(panel, count, number, i) {
			var ph = 4;
			var gap = (panel.h0 - ph * count) / (count + 1);
			var start = gap + ph / 2;
			var offset = (panel.h0 - gap) / count;
			var port = \'p\' + number;
			var data = {
				x0: panel.x0 + panel.w0 / 2,
				y0: panel.y0 + start + offset * i,
				number: number,
				connected: self._element._connectedPowerPorts.indexOf(port) >= 0
			}
			self._portsData[port] = data;
			self.refreshPortLoc(port);
		}
	},

再用黄色标识出已连通的端口,一目了然:

			var data = port && this._portsData[port];
			if(data && port.charAt(0) == \'p\') {
				ctx.strokeStyle = data.connected ? this._powerPortColor : this._powerPortConnectedColor;
				ctx.lineWidth = 0.1;
				ctx.fillStyle = data.connected ? this._powerPortConnectedColor : this._powerPortColor;
				if(port == this._focusPort) {
					ctx.fillStyle = this._powerPortFocusColor;
				}
				this.drawPowerPort(ctx, data);
			}

  

  

 接下来

绘制网络端口

网口绘制在中部面板,排列方式固定位置的办法,把所有可用的网口位置都标识出来,实际上占用多少就填充多少个,同样用不同的颜色表示已连通和未连通两种状态: 

	initNetworkPorts: function() {
		var self = this;
		var cx0 = this._panelData.center.x0;
		var cy0 = this._panelData.center.y0;
		var cw0 = this._panelData.center.w0;
		var ch0 = this._panelData.center.h0;
		var xCount = this._networkPortRows;
		var xPh = 3;
		var xGap = (cw0 - xPh * xCount) / (xCount + 1);
		var xStart = xGap + xPh / 2;
		var xOffset = (cw0 - xGap) / xCount;
		var yCount = this._element._uCount;
		var yPh = 7;
		var yGap = (ch0 - yPh * yCount) / (yCount + 1);
		var yStart = yGap + yPh / 2;
		var yOffset = (ch0 - yGap) / yCount;
		for(j = 0; j < yCount; j++) {
			for(i = 0; i < xCount; i++) {
				var number1 = (xCount * j + i) * 2 + 1;
				initNetworkPort(number1, i, j, -2);
				var number2 = (xCount * j + i) * 2 + 2;
				initNetworkPort(number2, i, j, 2);
			}
		}
		function initNetworkPort(number, i, j, offset) {
			var port = \'n\' + number;
			var data = {
				x0: cx0 + xStart + xOffset * i,
				y0: cy0 + yStart + yOffset * j + offset,
				number: number,
				connected: self._element._connectedNetworkPorts.indexOf(port) >= 0,
				usable: number <= self._element._networkPortAmount
			}
			self._portsData[port] = data;
			self.refreshPortLoc(port);
		}
	},

  

这样一个设备面板就基本完成了 

   

互动上似乎还可以再干点什么……那就

突出显示当前端口 

	onMouseMove: function(e) {
		var eLoc = this._network.zoomManager._getLogicalPoint(e);
		this._UI.setFocusPort(eLoc);
	},
……
	getFocusPortByLoc: function(eLoc) {
		for(var port in this._portsData) {
			var data = this._portsData[port];
			var xDistance = Math.abs(data.x - eLoc.x);
			var yDistance = Math.abs(data.y - eLoc.y);
			if(port.charAt(0) == \'p\' && xDistance < 3 && yDistance < 2) {
				return port;
			}
			if(port.charAt(0) == \'n\' && xDistance < 1.5 && yDistance < 1.5) {
				return port;
			}
		}
		return null;
	},

  

如果大家对设计和配色有槽要吐,那也是可以理解的,毕竟我只是个普通的程序猿。

这个虚拟设备面板的可取之处,在于它的U高和端口数量都可以定制,有着极大的灵活性和实用性。

	var rackDatas = [{
		id: \'rackbin1\',
		name: \'机柜1\',
		uAmount: 30,
		children: [{
			id: \'device11\',
			name: \'设备1\',
			uStart: 2,
			uCount: 2,
			powerPortAmount: 3,
			networkPortAmount: 7,
			connectedPowerPorts: [\'p1\'],
			connectedNetworkPorts: [\'n2\', \'n4\', \'n6\']
		}, {
			id: \'device12\',
			name: \'设备2\',
			uStart: 10,
			uCount: 3,
			powerPortAmount: 4,
			networkPortAmount: 51,
			connectedPowerPorts: [\'p2\',\'p3\'],
			connectedNetworkPorts: [\'n10\', \'n11\', \'n12\', \'n13\', \'n14\']
		}, {
			id: \'device13\',
			name: \'设备3\',
			uStart: 20,
			uCount: 4,
			powerPortAmount: 5,
			networkPortAmount: 51,
			connectedPowerPorts: [\'p2\',\'p3\',\'p4\'],
			connectedNetworkPorts: []
		}]
	}];

最后再看看连排设备的效果:

 

以上是关于TWaver初学实战——炫动2D机房之设备篇的主要内容,如果未能解决你的问题,请参考以下文章

TWaver初学实战——制作交互式地铁图

网络实战之硬件篇

TWaver HTML5 (2D)----数据元素

基于 HTML5 的网络拓扑图之 DataBinding 数据绑定

LayoutManager+ItemTouchHelper实战,仿探探 炫动滑动 卡片层叠布局-张旭童-专题视频课程...

TWaver可视化编辑器的前世今生电信网管编辑器