客户提到设备面板的需求,qunee并没有Equipment这样的图元,但借助父子关系和跟随关系设置,可以实现类似功能,并完成下面的例子

示例代码

代码非常简单,这里直接列出

var graph;

function init(){

graph = new Q.Graph('canvas');

graph.originAtCenter = false;

graph.translate(20, 20);

var rack = createEquipment("", 4, 1, "images/shelf.jpg");

var card1 = createEquipment("", 10, 7, "images/04_card.jpg", rack);

createLamp(58, 33, "images/lamp_green.png", card1);

createLamp(58, 44, "images/lamp_green.png", card1);

createLabel(58, 63, "QUNEE", card1);

createEquipment("", 354, 13, "images/card1.png", rack);

createEquipment("", 126, 13, "images/card1.png", rack);

createEquipment("", 126, 48, "images/card2.png", rack);

createEquipment("", 126, 82, "images/card2.png", rack);

createEquipment("", 126, 116, "images/card2.png", rack);

createEquipment("", 126, 150, "images/card2.png", rack);

createEquipment("", 126, 184, "images/card2.png", rack);

createEquipment("", 126, 218, "images/card.jpg", rack).size = {width: 441};

var card2 = createEquipment("", 126, 286, "images/card2.png", rack);

createLamp(152, 297, "images/lamp_green.png", card2);

createLamp(165, 297, "images/lamp_green.png", card2);

createLabel(170, 297, "QUNEE", card2, Q.Position.LEFT_MIDDLE);

var port = createEquipment("", 287, 290, "images/port_green.gif", card2);

port.size = {width: 20};

port = createEquipment("", 310, 290, "images/port_green.gif", card2);

port.size = {width: 20};

port = createEquipment("", 333, 290, "images/port_grey.gif", card2);

port.size = {width: 20};

createEquipment("", 126, 321, "images/slot.jpg", rack);

createEquipment("", 274, 320, "images/card3.png", rack);

}

function createEquipment(name, x, y, image, host){

var node = graph.createNode(name, x, y);

node.anchorPosition = Q.Position.LEFT_TOP;

node.image = image;

if(host){

node.host = host;

node.parent = host;

}

return node;

}

function createLamp(x, y, image, host){

var lamp = graph.createNode("", x, y);

lamp.image = image;

if(host){

lamp.host = host;

lamp.parent = host;

}

return lamp;

}

function createLabel(x, y, text, host, position){

var label = graph.createText(text, x, y);

label.setStyle(Q.Styles.LABEL_COLOR, "#FFF");

if(position){

label.anchorPosition = position;

}

if(host){

label.host = host;

label.parent = host;

}

return label;

}

在线演示

html5面板制作代码,HTML5绘制设备面板相关推荐

  1. web前端期末大作业 绿色环境保护(4个页面) HTML5网站模板农业展示网站 html5网页制作代码 html5网页设计作业代码 html制作网页案例代码

  2. html5网页制作代码_好程序员HTML5大前端常用开发工具大集合

    好程序员HTML5大前端分享常用开发工具大集合HTML5作为当前最为流行的编程语言,广为适用.语言的使用人数急剧增长,更多地开发人员使用这种语言来创建各种内容并放到互联网上.随着每一个新版本的发布,H ...

  3. html5网页制作代码_推荐十个好用的HTML5小工具,前端程序员居家必备良品

    Web前端开发工程师需要核心掌握HTML/CSS/JS开发,在几年前HTML5标准进入国内后,得到了快速的应用于推广,开发人员为了实现更多的效果和功能,将HTML5的应用推崇到了极高的位置.作为Web ...

  4. html5网页制作代码_HTML5的网页设计教程

    关注小编,教你如何制作网页 HTML5是超文本标记语言(HyperText Markup Language)的第五代版本,它是书写网页代码的一种规范.一种标准.它通过标记符号来标记要显示的网页中的各个 ...

  5. html5在线制作教程,HTML5 Canvas 制作动画

    HTML5 Canvas 制作动画 在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例 要在HTML5画布上绘制 ...

  6. html5开发制作,漂亮html5模板欣赏,H5网站建设

    html5是什么? HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变,能适配pc.手机等各终端,跨平台性能极强,移动互联网是未来的趋势,h ...

  7. html5页面弹幕代码,html5新年许愿文字弹幕代码

    特效描述:html5 新年许愿 文字弹幕代码.html5文字弹幕 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 HTML5手机视频弹幕文字评论代码 #audio_btn{ posit ...

  8. html5网页制作代码-我的班级网页 HTML期末大作业 学校班级网页制作模板

    Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 | 校园运动会 | 等网站的设 ...

  9. html5网页制作代码-我的班级网页 HTML期末大作业

    Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 | 校园运动会 | 等网站的设 ...

最新文章

  1. 把PPT做漂亮点真的有用!图表美观能增加可信度!作者:还会影响论文引用和通过率...
  2. Nature子刊:三代Nonopore测序数据耐药性分析软件NanoOK RT
  3. 【Android View绘制体系】requestLayout
  4. daily scrum 11.1
  5. 数据分析(排序,数据特征、平均数、方差等,累计统计,相关分析)
  6. 帆软日期控件变灰_FineReport-JS脚本常见日期使用整理
  7. HTML中INPUT type=date标签如何赋值注意问题
  8. HTML5——section,article,aside
  9. python字符串format和center居中应用(三分钟读懂)
  10. 里约奥运会的五项技术创新
  11. REM布局计算,移动端,pc端有兼容性)
  12. Java获取网络视频封面图片
  13. java jni 傻瓜教程
  14. 联想笔记本linux驱动,联想为Linux驱动的计算机提供自动固件更新
  15. Matlab中滤波操作的相关函数
  16. 第十五课.K均值算法
  17. 基因重组-冲刺日志(第七天)
  18. ode45 matlab 出错,Matlab中ode45求解微分方程组出错。
  19. 深度学习入门笔记之DenseNet网络
  20. 翻译连载 | JavaScript轻量级函数式编程-第4章:组合函数 |《你不知道的JS》姊妹篇

热门文章

  1. github下载源码也用命令进行安装包的联系
  2. RNN,LSTM,GRU基本原理的个人理解重点
  3. FuzzyCMeans算法
  4. LeetCode简单题之反转字符串
  5. “ compiler-rt”运行时runtime库
  6. 使用元组输入进行计算和归约
  7. 前端面试题笔记 2021.8.26
  8. js ajax 递归,javascript ajax循环请求/ 长轮询终极解决办法——递归
  9. Java 实例化的理解
  10. Android 补间动画(Tween Animation)