Chinaunix首页 | 论坛 | 博客
  • 博客访问: 952016
  • 博文数量: 110
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1997
  • 用 户 组: 普通用户
  • 注册时间: 2013-12-15 22:39
个人简介

HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com

文章分类

全部博文(110)

文章存档

2020年(1)

2018年(28)

2017年(21)

2016年(10)

2015年(28)

2014年(19)

2013年(3)

我的朋友

分类: HTML5

2015-03-06 01:29:08

 的HTML5拓扑图组件背景设置有多种途径可选择:

  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


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

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

点击(此处)折叠或打开

  1. function initGV1(gv){
  2.     var dm = gv.dm(),
  3.         node = new ht.Node(),
  4.         view = gv.getView(),
  5.         viewStyle = view.style;
  6.     node.setImage('res/mac-air.png');
  7.     node.setName('13-inch MacBook Air');
  8.     node.setPosition(260, 70);
  9.     dm.add(node);

  10.     viewStyle.backgroundImage = 'url(res/background.jpg)';
  11.     viewStyle.backgroundPosition = 'center';
  12.     viewStyle.backgroundRepeat = 'no-repeat';
  13. }
  1. Painter


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

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

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


点击(此处)折叠或打开

  1. function initGV2(gv){
  2.     var dm = gv.dm(),
  3.         node = new ht.Node();
  4.     node = new ht.Node();
  5.     node.setName('13-inch MacBook Air');
  6.     node.setImage('res/mac-air.png');
  7.     node.setPosition(260, 70);
  8.     node.setRotation(Math.PI/2);
  9.     dm.add(node);

  10.     gv.addBottomPainter(function(g, rect){
  11.         for(var i=0; i<20; i++){
  12.             for(var j=0; j<10; j++){
  13.                 if((i + j)%2 === 0){
  14.                     g.fillStyle = 'lightgray';
  15.                 }else{
  16.                     g.fillStyle = 'white';
  17.                 }
  18.                 g.beginPath();
  19.                 g.rect(i*50, j*50, 50, 50);
  20.                 g.fill();
  21.             }
  22.         }
  23.         g.strokeStyle = 'red';
  24.         g.lineWidth = 1;
  25.         g.beginPath();
  26.         g.rect(rect.x, rect.y, rect.width, rect.height);
  27.     });

  28.     gv.addTopPainter(function(g, rect){
  29.         g.save();
  30.         g.beginPath();
  31.         var text = new Date().toLocaleString();
  32.         g.font = '40px Arial';
  33.         g.strokeStyle = 'red';
  34.         g.textAlign = 'left';
  35.         g.textBaseline = 'top';
  36.         g.lineWidth = 5;
  37.         g.fillStyle = 'yellow';
  38.         g.strokeText(text, 100, 100);
  39.         g.fillText(text, 100, 100);
  40.         g.fill();
  41.         g.restore();
  42.     });

  43.     setInterval(function(){
  44.         gv.redraw();
  45.     }, 1000);

  46. }
  1. Layer

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

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


点击(此处)折叠或打开

  1. function initGV3(gv){
  2.     gv.setLayers(['bgLayer', 'edgeLayer', 'nodeLayer']);

  3.     var center = createNode(),
  4.         dm = gv.dm(),
  5.         sm = dm.sm(),
  6.         bgNode = new ht.Node();

  7.     center.setPosition(100, 100);
  8.     dm.add(center);

  9.     bgNode.s({
  10.         '2d.selectable': false
  11.     });
  12.     bgNode.setImage('bgImage');
  13.     bgNode.setLayer('bgLayer');

  14.     ht.Default.handleImageLoaded = function(name, image){
  15.         var width = image.width,
  16.             height = image.height,
  17.             gvH = gv.getHeight(),
  18.             gvW = gv.getWidth();
  19.         if(name == 'bgImage'){
  20.             bgNode.setPosition(gvW / 2, gvH / 2);
  21.         }
  22.     };
  23.     dm.add(bgNode);

  24.     var count = 30,
  25.         firstNode,
  26.         lastNode;

  27.     for (var i = 0; i < count; i++) {
  28.         var node = createNode();
  29.         if(!lastNode){
  30.             firstNode = node;
  31.         }else{
  32.             node.setHost(lastNode);
  33.         }
  34.         lastNode = node;

  35.         node.setPosition(
  36. + 150 * Math.cos(Math.PI * 2 / count * i),
  37. + 70 * Math.sin(Math.PI * 2 / count * i)
  38.         );
  39.         dm.add(node);
  40.         var edge = new ht.Edge(center, node);
  41.         edge.s({
  42.             'edge.type': 'custom',
  43.             'edge.color': 'lightgray',
  44.             'edge.width': 1
  45.         });
  46.         edge.setLayer('edgeLayer');
  47.         edge.addStyleIcon("toArrow", {
  48.             position: 19,
  49.             keepOrien: true,
  50.             width: 30,
  51.             height: 15,
  52.             names: ['toArrow']
  53.         });
  54.         dm.add(edge);
  55.     }
  56.     firstNode.setHost(lastNode);
  57. }


阅读(2600) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~