html5游戏 虚拟主机,基于HTML5的云虚拟主机配置界面
云計(jì)算，從底層的虛擬化技術(shù)，到上層的云存儲(chǔ)和應(yīng)用API，是大勢(shì)所趨，回頭看看Qunee交互擴(kuò)展組件，借這個(gè)趨勢(shì)，可以在云計(jì)算可視化上發(fā)揮作用，最近就有人用Qunee實(shí)現(xiàn)VPC配置圖，并對(duì)交互做了定制，細(xì)節(jié)不便多說，本文主要介紹Qunee交互擴(kuò)展方面的思路.
參考示例 – visualops
云平臺(tái)可視化這塊兒國外做的不錯(cuò)，有不少開放的示例可以學(xué)習(xí)和參考，客戶看中了這家云管理系統(tǒng)http://www.visualops.io/ ，這個(gè)系統(tǒng)使用的是SVG技術(shù)，體驗(yàn)了一下，效果不錯(cuò)，參照著實(shí)現(xiàn)
從界面上看，一個(gè)云節(jié)點(diǎn)上有多個(gè)子網(wǎng)，每個(gè)子網(wǎng)內(nèi)有多臺(tái)虛擬主機(jī)，然后每個(gè)云節(jié)點(diǎn)有統(tǒng)一的路由Router管理(或者網(wǎng)關(guān)Gateway)
界面呈現(xiàn)
參照原型實(shí)現(xiàn)，使用Q.Path描出子網(wǎng)和云節(jié)點(diǎn)范圍，虛擬機(jī)則用普通節(jié)點(diǎn)，連線使用正交連線類型，此外還有些外觀配置，比如虛線，背景顏色，網(wǎng)格等，設(shè)置style或者css即可
創(chuàng)建矩形元素(子網(wǎng)、云節(jié)點(diǎn))
function createRect(name, left, top, width, height, fillColor) {
var rect = graph.createNode(name, left, top);
rect.type = "rectGroup";
rect.anchorPosition = Q.Position.LEFT_TOP;
rect.image = Q.Shapes.getRect(0, 0, 100, 100);
rect.size = {width: width, height: height};
rect.setStyle(Q.Styles.IMAGE_BACKGROUND_COLOR, fillColor || Q.toColor(0x88FFFFFF));
rect.setStyle(Q.Styles.SHAPE_STROKE, 0);
rect.setStyle(Q.Styles.BORDER, 1);
rect.setStyle(Q.Styles.BORDER_COLOR, "#32c02f");
rect.setStyle(Q.Styles.BORDER_LINE_DASH, [5, 6]);
rect.setStyle(Q.Styles.LABEL_PADDING, 5);
rect.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_TOP);
rect.setStyle(Q.Styles.LABEL_POSITION, Q.Position.LEFT_TOP);
rect.setBounds = function (bounds) {
this.x = bounds.x;
this.y = bounds.y;
this.size = new Q.Size(bounds.width, bounds.height);
}
rect.getBounds = function () {
return new Q.Rect(this.x, this.y, this.size.width, this.size.height);
}
rect.inBounds = function (x, y) {
return this.getBounds().contains(x, y);
}
rect.intersectsRect = function (rect) {
return rect.intersectsRect(this.x, this.y, this.size.width, this.size.height);
}
rect.containsRect = function (rect) {
return Q.containsRect(this.x, this.y, this.size.width, this.size.height, rect.x, rect.y, rect.width, rect.height);
}
rect.updateBoundsByChildren = function () {
var bounds = new Q.Rect();
Q.forEachChild(this, function (child) {
bounds.add(graph.getUIBounds(child));
});
this.location = new Q.Point(bounds.x, bounds.y - 15);
this.size = new Q.Size(Math.max(200, bounds.width), Math.max(70, bounds.height + 15));
}
return rect;
}
注意到對(duì)Rect增加了一些標(biāo)定節(jié)點(diǎn)范圍、計(jì)算自身大小的方法，后面交互時(shí)會(huì)用到
創(chuàng)建虛擬主機(jī)
function createPC(name, x, y, parent) {
var node = graph.createNode(name, x, y);
node.image = Q.Graphs.server;
node.parent = node.host = parent;
node.zIndex = 10;
return node;
}
創(chuàng)建連接關(guān)系
function createEdge(from, to) {
var name = from.name + "->" + to.name;
var edge = graph.createEdge(name, from, to);
edge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;
edge.setStyle(Q.Styles.EDGE_FROM_OFFSET, {x: 20});
edge.setStyle(Q.Styles.EDGE_CORNER_RADIUS, 0);
return edge;
}
定制交互
呈現(xiàn)出來不難，業(yè)務(wù)的體現(xiàn)在于交互，客戶需求要求虛擬主機(jī)不得超出云節(jié)點(diǎn)范圍，超出時(shí)需要回撤操作，此外可以將一臺(tái)虛擬機(jī)從一個(gè)子網(wǎng)移到另一個(gè)子網(wǎng)，另外還要控制路由的移動(dòng)范圍，限定在云節(jié)點(diǎn)的左邊框上……
實(shí)現(xiàn)思路是通過交互監(jiān)聽，分別對(duì)移動(dòng)(ELEMENT_MOVING)，調(diào)整大小(RESIZING)等情況做處理，Qunee交互事件通常有三個(gè)狀態(tài)：開始、進(jìn)行時(shí)、結(jié)束，比如移動(dòng)交互的三個(gè)過程：開始移動(dòng)(ELEMENT_MOVE_START)，移動(dòng)中(ELEMENT_MOVING)，完成移動(dòng)(ELEMENT_MOVE_END)，我們可以在開始時(shí)記錄節(jié)點(diǎn)原始位置，結(jié)束時(shí)判斷節(jié)點(diǎn)位置是否允許，如果不允許則作調(diào)整
var oldLocation = {};
graph.interactionDispatcher.addListener(function (evt) {
var data = evt.data;
if (evt.kind == Q.InteractionEvent.RESIZE_START) {
oldLocation[data.id] = {x: data.x, y: data.y, width: data.size.width, height: data.size.height};
}
if (evt.kind == Q.InteractionEvent.RESIZING) {
if (data == mainNode) {
label.updateLocation();
}
return;
}
if (evt.kind == Q.InteractionEvent.RESIZE_END) {
var oldBounds = oldLocation[data.id];
oldLocation = {};
if ((data != mainNode && isGroup(data) && groupIntersected(data)) || childrenOutParent(data)) {
data.setBounds(oldBounds);
}
if (data == mainNode) {
label.updateLocation();
}
return;
}
if (data.atLeft) {
if (evt.kind == Q.InteractionEvent.ELEMENT_MOVING) {
data.updateLocation();
}
return;
}
if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_START) {
oldLocation[data.id] = {x: data.x, y: data.y};
return;
}
if (evt.kind == Q.InteractionEvent.ELEMENT_MOVING) {
if (!isGroup(data)) {
var g = findGroup(evt.event);
highlight(g);
}
return;
}
if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
highlight();
if (isGroup(data)) {
if (groupIntersected(data)) {
var old = oldLocation[data.id];
graph.moveElements([data], old.x - data.x, old.y - data.y);
}
return;
}
var g = findGroup(evt.event);
if (g) {
data.parent = data.host = g;
fixNode(data);
} else {
data.location = oldLocation[data.id];
}
oldLocation = {};
}
})
最終效果
原文來自：http://my.oschina.net/nosand/blog/282181
總結(jié)
以上是生活随笔為你收集整理的html5游戏 虚拟主机,基于HTML5的云虚拟主机配置界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为鸿蒙系统概念图,华为P50Pro概念
- 下一篇： js能关闭HTML页面,javascri