HT For Web 拓扑图背景设置

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);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏挖坑填坑

使用.net core ABP和Angular模板构建博客管理系统(实现自己的业务逻辑)

931
来自专栏Seebug漏洞平台

抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析

PDF 版本下载:抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析

81010
来自专栏菩提树下的杨过

silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

18210
来自专栏pangguoming

C#开发微信公众平台-就这么简单(附Demo)

  最近公司在做微信开发,其实就是接口开发,网上找了很多资料,当然园友也写了很多教程,但都是理论说了一大堆,实用指导或代码很少。如果你自己仔细研究下,其实就那么...

731
来自专栏大内老A

通过ASP.NET Web API + JQuery创建一个简单的Web应用

看了dudu的《HttpClient + ASP.NET Web API, WCF之外的另一个选择》一文,想起多很久之前体现ASP.NET Web API而创建...

18110
来自专栏hightopo

HT For Web 拓扑图背景设置

1123
来自专栏ml

C/C++ 如何来自动优雅的涮别银家的贴子

  被涮屏涮烦了,就分享一下如何用低调的c/c++来涮别人家的屏吧! 此处埋下三颗雷! 这不是啥新知识,也不是什么浅显的代码。下面,来淘淘这份经验,呼呼 我们要...

3465
来自专栏恰同学骚年

借助 Lucene.Net 构建站内搜索引擎(下)

前言:上一篇我们学习了Lucene.Net的基本概念、分词以及实现了一个最简单的搜索引擎,这一篇我们开始开发一个初具规模的站内搜索项目,通过开发站内搜索模块,我...

751
来自专栏Bug生活2048

.net core下定时任务的实现

Hangfire作为一款高人气且容易上手的分布式后台执行服务,支持多种数据库。在 .net core的环境中,由Core自带的DI管理着生命周期,免去了在NF4...

671
来自专栏GopherCoder

『No18: Go 实现世界杯后台管理系统』

趁着周末更新一期,上一期讲到 如何快速熟悉一个项目, 文章的最后讲到,最好的方法是借用相同的技术栈重新实现一个项目。

1051

扫码关注云+社区