HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择：

  1. divBackground：通过css设置graphView对应的div背景
  2. Painter：通过graphView.addBottomPainter(function(g, rect){…})来绘制背景
  3. Layer：通过设置graphView.setLayer(['…', '…', '…', …])来将graphView拆分为多个图层，并为各个图层命名，再让不同种类的node通过node.setLayer('…')将node设置到graphView对应图层中

接下来我为大家一一介绍graphView背景设置方法：

  1. divBackground：

这两张图片展示的是设置graphView对应div的background属性来设置拓扑图背景，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景的位置和大小并没有发生改变，不过图元如何缩放和移动，都保持原来的样子。

以下是具体的代码实现，代码很简单，通过gv.getView()来获取graphView拓扑图组件对应的div，再向div中设置background属性。

function initGV1(gv){var dm = gv.dm(),node = new ht.Node(),view = gv.getView(),viewStyle = view.style;node.setImage('res/mac-air.png');node.setName('13-inch MacBook Air');node.setPosition(260, 70);dm.add(node);viewStyle.backgroundImage = 'url(res/background.jpg)';viewStyle.backgroundPosition = 'center';viewStyle.backgroundRepeat = 'no-repeat';
}

  1. Painter：

这两张图片展示的是通过graphView.addBottomPainter(function(g, rect){...})方法绘制拓扑图组件背景，通过graphView.addTopPainter(function(f, rect){...})方法来绘制拓扑图组件的水印效果，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景和水印的位置和大小均发生了改变，都跟随拓扑图的缩放和移动而改变。

细心的读者会发现两张图片的水印时间是不一样的，这个水印获取的是系统当前时间，因此每一秒会刷新一次，所以两张图片的时间会不一样，这说明了graphView拓扑图组件是支持背景和水印刷新的。

具体的代码实现也不是很复杂，addBottomPainter和addTopPainter方法的参数都是一个函数实现，函数参数也都为两个，g和rect，其中g为canvas对应的画笔，rect为脏区域大小，通过画笔g可以想拓扑图上话任意想描绘的图形，包括图片、渐变色、多边形等等。在代码中addBottomPainter画的就是灰白相间的背景图片，addTopPainter绘制的是系统当前时间，最后通过定时器setInterval设置1秒刷新一次graphView拓扑图组件。

function initGV2(gv){var dm = gv.dm(),node = new ht.Node();node = new ht.Node();node.setName('13-inch MacBook Air');node.setImage('res/mac-air.png');node.setPosition(260, 70);node.setRotation(Math.PI/2);
    dm.add(node);gv.addBottomPainter(function(g, rect){for(var i=0; i<20; i++){for(var j=0; j<10; j++){if((i + j)%2 === 0){g.fillStyle = 'lightgray';}else{g.fillStyle = 'white';}g.beginPath();g.rect(i*50, j*50, 50, 50);g.fill();}}g.strokeStyle = 'red';g.lineWidth = 1;g.beginPath();g.rect(rect.x, rect.y, rect.width, rect.height);});gv.addTopPainter(function(g, rect){g.save();g.beginPath();var text = new Date().toLocaleString();g.font = '40px Arial';g.strokeStyle = 'red';g.textAlign = 'left';g.textBaseline = 'top';g.lineWidth = 5;g.fillStyle = 'yellow';g.strokeText(text, 100, 100);g.fillText(text, 100, 100);g.fill();g.restore();});setInterval(function(){gv.redraw();}, 1000);}

  1. Layer：

这两张图片展示的是通过graphView.setLayer(['…', '…', '…', …])方法将拓扑图组件分割成'bgLayer'， 'edgeLayer'， 'nodeLayer'三层，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景和图元的位置和大小均发生了改变，都跟随拓扑图的缩放和移动而改变。

具体的代码实现也不是很复杂，通过graphView.setLayer(['…', '…', '…', …])方法将拓扑图组件分割成'bgLayer'， 'edgeLayer'， 'nodeLayer'三层，并且图层依据数组顺序自下而上，创建一个存放背景图片的bgNode，并设置其属性为不可选中，设置其graphView图层为'bgLayer'，再通过重载ht.Default.handleImageLoaded方法，在图片加载完成后设置bgNode的position，最后设置一堆的node节点在nodeLayer图层上，一堆的edge连线在edgeLayer图层上。

function initGV3(gv){gv.setLayers(['bgLayer', 'edgeLayer', 'nodeLayer']);var center = createNode(),dm = gv.dm(),sm = dm.sm(),bgNode  = new ht.Node();center.setPosition(100, 100);dm.add(center);bgNode.s({'2d.selectable': false});bgNode.setImage('bgImage');bgNode.setLayer('bgLayer');ht.Default.handleImageLoaded = function(name, image){var width = image.width,height = image.height,gvH = gv.getHeight(),gvW = gv.getWidth();if(name == 'bgImage'){bgNode.setPosition(gvW / 2, gvH / 2);}};dm.add(bgNode);var count = 30,firstNode,lastNode;for (var i = 0; i < count; i++) {var node = createNode();if(!lastNode){firstNode = node;}else{node.setHost(lastNode);}lastNode = node;node.setPosition(500 + 150 * Math.cos(Math.PI * 2 / count * i),100 + 70 * Math.sin(Math.PI * 2 / count * i));dm.add(node);var edge = new ht.Edge(center, node);edge.s({'edge.type': 'custom','edge.color': 'lightgray','edge.width': 1});edge.setLayer('edgeLayer');edge.addStyleIcon("toArrow", {position: 19,keepOrien: true,width: 30,height: 15,names: ['toArrow']});dm.add(edge);}firstNode.setHost(lastNode);
}

转载于:https://www.cnblogs.com/xhload3d/p/4316853.html

HT For Web 拓扑图背景设置相关推荐

  1. iOS平台快速发布HT for Web拓扑图应用

    iOS平台一直是封闭的生态圈,iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试,所开发的APP需要上传到App Store经过苹果审核以后才可对外发布.如果要开发企业内部应用,则 ...

  2. 下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...

  3. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  4. 自绘制HT For Web ComboBox下拉框组件

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...

  5. 百度Map与HT for Web结合的GIS网络拓扑应用

    在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...

  6. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  7. 质量属性效用树例子_数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  8. 基于HT for Web的Web SCADA工控移动应用

    在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...

  9. HT for Web中3D流动效果的实现与应用

    流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...

最新文章

  1. 贪心 ---- 贪心 + STL维护 + 划分集合 L. Neo-Robin Hood（好题）
  2. RNA-seq中的生物学重复
  3. 特殊图像的色彩特征工程：非自然图像的颜色编码
  4. 两种方法清除Excel保护密码
  5. day1-Linux操作系统基础
  6. Junit Test使用样例
  7. python中ntlk报错及解决
  8. AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
  9. [混音插件]板岩混响效果器
  10. LC谐振高频逆变电路
  11. BUUCTF crackMe 题解
  12. 电容或电感的电压_磁场对于电感路径检测的影响
  13. c语言课程设计作业,c语言课程设计心得体会
  14. UiPath发送包含图片或表格的邮件
  15. pms解析--未完待续
  16. HTMl--基础样式的使用
  17. java多边形合并_geotools实现多边形的合并缓冲区
  18. mac安装python虚拟环境_mac 下 python 虚拟环境的安装和配置
  19. 关于服务器登录用户信息查看的若干命令
  20. 快速批量把jpg转换成pdf的方法

热门文章

  1. RxJS之BehaviorSubject
  2. 微软私有云分享（R2）16PowerShell查看虚拟机信息
  3. ci中如何得到配置的url
  4. 数据库和数据仓库区别
  5. 写给粪坑里的钻石——烂公司里的好员工
  6. Red Hat Enterprise MRG 2.0 Installation And Configuration Guide
  7. 经典技术书籍分享(5):《WCF技术内幕》封面和购买地址
  8. 关于类黄酮和类胡萝卜素
  9. 益生菌可能导致的“菌血症”与死亡（调研手稿六）
  10. Table options do not contain an option key ‘connector‘ for discovering a connector