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

Posted 2020-10-03 老-_=乐

现实中的设备虽然各式各样，其实我们在可视化中，并不关心它到底长什么样，关键能正确显示出它的位置、U高和端口，也就OK了。那么就请看看这款虚拟设备面板OK不OK

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

设备面板就是个小灰块

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

	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: []
		}]
	}];

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