而3D上的树状结构在展现上配合HT,把网络中的计算机和通信设备抽象为一个点

  • 栏目:前端 时间:2020-04-20 20:30
<返回列表

在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观,一眼望去可以把整个树状结构数据看个大概,但是在弹力布局的作用下,其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了,那么这个3D树具体长成啥样呢,我们来一起目睹下~

计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构。网络的拓扑结构反映出网中各实体的结构关系,是建设计算机网络的第一步,是实现各种网络协议的基础,它对网络的性能,系统的可靠性与通信费用都有重大影响。拓扑在计算机网络中即是指连接各结点的形式与方法;在网络中的工作站和服务器等网络单元抽象为“点”;网络中的电缆等抽象为“线”。影响网络性能、系统可靠性、通信费用。

时间: 2017-11-23阅读: 7559标签: WebGL作者: hightopo

韦德体育 1

拓扑还分为:总线拓扑、星型拓扑、环形拓扑树形拓扑以及网状拓扑。这篇文章写的案例就是总线拓扑中的一个分支,我们一步一步来搭建这个拓扑图形。

分子力(molecular force),又称分子间作用力、范得瓦耳斯力,是指分子间的相互作用。当二分子相距较远时,主要表现为吸引力,这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用;当二分子非常接近时,则排斥力成为主要的,这是由于各分子的外层电子云开始重叠而产生的排斥作用。

要实现这样的效果,该从何下手呢?接下来我们就将这个问题拆解成若干个小问题来解决。

 

HT for Web 提供了弹力布局(也称为力导向布局)的功能,即根据节点之间存在互斥力,相互连接的节点间存在引力, 弹力布局运行一段时间后,整体拓扑网络结构会逐渐达到收敛稳定的平衡状态。这个功能很有趣,今天我们就将它的魅力展现出来。

1. 创建一个树状结构

有了解过HT for Web的朋友,对树状结构数据的创建应该都不陌生,在这里我就不做深入的探讨了。树状结构数据的创建很简单,在这里为了让代码更简洁,我封装了三个方法来创建树状结构数据,具体代码如下:

/**
 * 创建连线
 * @param {ht.DataModel} dataModel - 数据容器
 * @param {ht.Node} source - 起点
 * @param {ht.Node} target - 终点
 */
function createEdge(dataModel, source, target) {
    // 创建连线,链接父亲节点及孩子节点
    var edge = new ht.Edge();
    edge.setSource(source);
    edge.setTarget(target);
    dataModel.add(edge);
}

/**
 * 创建节点对象
 * @param {ht.DataModel} dataModel - 数据容器
 * @param {ht.Node} [parent] - 父亲节点
 * @returns {ht.Node} 节点对象
 */
function createNode(dataModel, parent) {
    var node = new ht.Node();
    if (parent) {
        // 设置父亲节点
        node.setParent(parent);

        createEdge(dataModel, parent, node);
    }
    // 添加到数据容器中
    dataModel.add(node);
    return node;
}

/**
 * 创建结构树
 * @param {ht.DataModel} dataModel - 数据容器
 * @param {ht.Node} parent - 父亲节点
 * @param {Number} level - 深度
 * @param {Array} count - 每层节点个数
 * @param {function(ht.Node, Number, Number)} callback - 回调函数(节点对象,节点对应的层级,节点在层级中的编号)
 */
function createTreeNodes(dataModel, parent, level, count, callback) {
    level--;
    var num = (typeof count === 'number' ? count : count[level]);

    while (num--) {
        var node = createNode(dataModel, parent);
        // 调用回调函数,用户可以在回调里面设置节点相关属性
        callback(node, level, num);
        if (level === 0) continue;
        // 递归调用创建孩子节点
        createTreeNodes(dataModel, node, level, count, callback);
    }
}

嘿嘿,代码写得可能有些复杂了,简单的做法就是嵌套几个for循环来创建树状结构数据,在这里我就不多说了,接下来我们来探究第二个问题。

示例图片:

本例地址:

2. 在2D拓扑下模拟3D树状结构每层的半径计算

在3D下的树状结构体最大的问题就在于,每个节点的层次及每层节点围绕其父亲节点的半径计算。现在树状结构数据已经有了,那么接下来就该开始计算半径了,我们从两层树状结构开始推算:

韦德体育 2

我现在先创建了两层的树状结构,所有的子节点是一字排开,并没有环绕其父亲节点,那么我们该如何去确定这些孩子节点的位置呢?

首先我们得知道,每个末端节点都有一圈属于自己的领域,不然节点与节点之间将会存在重叠的情况,所以在这里,我们假定末端节点的领域半径为25,那么两个相邻节点之间的最短距离将是两倍的节点领域半径,也就是50,而这些末端节点将均匀地围绕在其父亲节点四周,那么相邻两个节点的张角就可以确认出来,有了张角,有了两点间的距离,那么节点绕其父亲节点的最短半径也就能计算出来了,假设张角为a,两点间最小距离为b,那么最小半径r的计算公式为:

r = b / 2 / sin(a / 2);

那么接下来我么就来布局下这个树,代码是这样写的:

/**
 * 布局树
 * @param {ht.Node} root - 根节点
 * @param {Number} [minR] - 末端节点的最小半径
 */
function layout(root, minR) {
    // 设置默认半径
    minR = (minR == null ? 25 : minR);
    // 获取到所有的孩子节点对象数组
    var children = root.getChildren().toArray();
    // 获取孩子节点个数
    var len = children.length;
    // 计算张角
    var degree = Math.PI * 2 / len;
    // 根据三角函数计算绕父亲节点的半径
    var sin = Math.sin(degree / 2),
        r = minR / sin;
    // 获取父亲节点的位置坐标
    var rootPosition = root.p();

    children.forEach(function(child, index) {
        // 根据三角函数计算每个节点相对于父亲节点的偏移量
        var s = Math.sin(degree * index),
            c = Math.cos(degree * index),
            x = s * r,
            y = c * r;

        // 设置孩子节点的位置坐标
        child.p(x + rootPosition.x, y + rootPosition.y);
    });
}

在代码中,你会发现我将末端半径默认设置为25了,如此,我们通过调用layout()方法就可以对结构树进行布局了,其布局效果如下:

韦德体育 3

从效果图可以看得出,末端节点的默认半径并不是很理想,布局出来的效果连线都快看不到了,因此我们可以增加末端节点的默认半径来解决布局太密的问题,如将默认半径设置成40的效果图如下:

韦德体育 4

现在两层的树状分布解决了,那么我们来看看三层的树状分布该如何处理。

将第二层和第三层看成一个整体,那么其实三层的树状结构跟两层是一样的,不同的是在处理第二层节点时,应该将其看做一个两层的树状结构来处理,那么像这种规律的处理用递归最好不过了,因此我们将代码稍微该着下,在看看效果如何:

韦德体育 5

不行,节点都重叠在一起了,看来简单的递归是不行的,那么具体的问题出在哪里呢?

仔细分析了下,发现父亲节点的领域半径是由其孩子节点的领域半径决定的,因此在布局时需要知道自身节点的领域半径,而且节点的位置取决于父亲节点的领域半径及位置信息,这样一来就无法边计算半径边布局节点位置了。

那么现在只能将半径的计算和布局分开来,做两步操作了,我们先来分析下节点半径的计算:

首先需要明确最关键的条件,父亲节点的半径取决于其孩子节点的半径,这个条件告诉我们,只能从下往上计算节点半径,因此我们设计的递归函数必须是先递归后计算,废话不多说,我们来看下具体的代码实现:

/**
 * 就按节点领域半径
 * @param {ht.Node} root - 根节点对象
 * @param {Number} minR - 最小半径
 */
function countRadius(root, minR) {
    minR = (minR == null ? 25 : minR);

    // 若果是末端节点,则设置其半径为最小半径
    if (!root.hasChildren()) {
        root.a('radius', minR);
        return;
    }

    // 遍历孩子节点递归计算半径
    var children = root.getChildren();
    children.each(function(child) {
        countRadius(child, minR);
    });

    var child0 = root.getChildAt(0);
    // 获取孩子节点半径
    var radius = child0.a('radius');

    // 计算子节点的1/2张角
    var degree = Math.PI / children.size();
    // 计算父亲节点的半径
    var pRadius = radius / Math.sin(degree);

    // 设置父亲节点的半径及其孩子节点的布局张角
    root.a('radius', pRadius);
    root.a('degree', degree * 2);
}

OK,半径的计算解决了,那么接下来就该解决布局问题了,布局树状结构数据需要明确:孩子节点的坐标位置取决于其父亲节点的坐标位置,因此布局的递归方式和计算半径的递归方式不同,我们需要先布局父亲节点再递归布局孩子节点,具体看看代码吧:

/**
 * 布局树
 * @param {ht.Node} root - 根节点
 */
function layout(root) {
    // 获取到所有的孩子节点对象数组
    var children = root.getChildren().toArray();
    // 获取孩子节点个数
    var len = children.length;
    // 计算张角
    var degree = root.a('degree');
    // 根据三角函数计算绕父亲节点的半径
    var r = root.a('radius');
    // 获取父亲节点的位置坐标
    var rootPosition = root.p();

    children.forEach(function(child, index) {
        // 根据三角函数计算每个节点相对于父亲节点的偏移量
        var s = Math.sin(degree * index),
            c = Math.cos(degree * index),
            x = s * r,
            y = c * r;

        // 设置孩子节点的位置坐标
        child.p(x + rootPosition.x, y + rootPosition.y);

        // 递归调用布局孩子节点
        layout(child);
    });
}

代码写完了,接下来就是见证奇迹的时刻了,我们来看看效果图吧:

韦德体育 6

不对呀,代码应该是没问题的呀,为什么显示出来的效果还是会重叠呢?不过仔细观察我们可以发现相比上个版本的布局会好很多,至少这次只是末端节点重叠了,那么问题出在哪里呢?

不知道大家有没有发现,排除节点自身的大小,倒数第二层节点与节点之间的领域是相切的,那么也就是说节点的半径不仅和其孩子节点的半径有关,还与其孙子节点的半径有关,那我们把计算节点半径的方法改造下,将孙子节点的半径也考虑进去再看看效果如何,改造后的代码如下:

/**
 * 就按节点领域半径
 * @param {ht.Node} root - 根节点对象
 * @param {Number} minR - 最小半径
 */
function countRadius(root, minR) {
   ……

    var child0 = root.getChildAt(0);
    // 获取孩子节点半径
    var radius = child0.a('radius');

    var child00 = child0.getChildAt(0);
    // 半径加上孙子节点半径,避免节点重叠
    if (child00) radius += child00.a('radius');

   ……
}

下面就来看看效果吧~

韦德体育 7

哈哈,看来我们分析对了,果然就不再重叠了,那我们来看看再多一层节点会是怎么样的壮观场景呢?

韦德体育 8

哦,NO!这不是我想看到的效果,又重叠了,好讨厌。

不要着急,我们再来仔细分析分析下,在前面,我们提到过一个名词——领域半径,什么是领域半径呢?很简单,就是可以容纳下自身及其所有孩子节点的最小半径,那么问题就来了,末端节点的领域半径为我们指定的最小半径,那么倒数第二层的领域半径是多少呢?并不是我们前面计算出来的半径,而应该加上末端节点自身的领域半径,因为它们之间存在着包含关系,子节点的领域必须包含于其父亲节点的领域中,那我们在看看上图,是不是感觉末端节点的领域被侵占了。那么我们前面计算出来的半径代表着什么呢?前面计算出来的半径其实代表着孩子节点的布局半径,在布局的时候是通过该半径来布局的。

OK,那我们来总结下,节点的领域半径是其下每层节点的布局半径之和,而布局半径需要根据其孩子节点个数及其领域半径共同决定。

好了,我们现在知道问题的所在了,那么我们的代码该如何去实现呢?接着往下看:

/**
 * 就按节点领域半径及布局半径
 * @param {ht.Node} root - 根节点对象
 * @param {Number} minR - 最小半径
 */
function countRadius(root, minR) {
    minR = (minR == null ? 25 : minR);

    // 若果是末端节点,则设置其布局半径及领域半径为最小半径
    if (!root.hasChildren()) {
        root.a('radius', minR);
        root.a('totalRadius', minR);
        return;
    }

    // 遍历孩子节点递归计算半径
    var children = root.getChildren();
    children.each(function(child) {
        countRadius(child, minR);
    });

    var child0 = root.getChildAt(0);
    // 获取孩子节点半径
    var radius = child0.a('radius'),
        totalRadius = child0.a('totalRadius');

    // 计算子节点的1/2张角
    var degree = Math.PI / children.size();
    // 计算父亲节点的布局半径
    var pRadius = totalRadius / Math.sin(degree);

    // 缓存父亲节点的布局半径
    root.a('radius', pRadius);
    // 缓存父亲节点的领域半径
    root.a('totalRadius', pRadius + totalRadius);
    // 缓存其孩子节点的布局张角
    root.a('degree', degree * 2);
}

在代码中我们将节点的领域半径缓存起来,从下往上一层一层地叠加上去。接下来我们一起验证其正确性:

韦德体育 9

搞定,就是这样子了,2D拓扑上面的布局搞定了,那么接下来该出动3D拓扑啦~

韦德体育 10

使用弹力布局功能需要在引入 ht.js 核心库之后,再引入一个 ht-forcelayout.js 的弹力布局插件库,因为还用到了 form 表单,所以要引入 ht-form.js 的表单插件库:

3. 加入z轴坐标,呈现3D下的树状结构

3D拓扑上面布局无非就是多加了一个坐标系,而且这个坐标系只是控制节点的高度而已,并不会影响到节点之间的重叠,所以接下来我们来改造下我们的程序,让其能够在3D上正常布局。

也不需要太大的改造,我们只需要修改下布局器并且将2D拓扑组件改成3D拓扑组件就可以了。

/**
 * 布局树
 * @param {ht.Node} root - 根节点
 */
function layout(root) {
    // 获取到所有的孩子节点对象数组
    var children = root.getChildren().toArray();
    // 获取孩子节点个数
    var len = children.length;
    // 计算张角
    var degree = root.a('degree');
    // 根据三角函数计算绕父亲节点的半径
    var r = root.a('radius');
    // 获取父亲节点的位置坐标
    var rootPosition = root.p3();

    children.forEach(function(child, index) {
        // 根据三角函数计算每个节点相对于父亲节点的偏移量
        var s = Math.sin(degree * index),
            c = Math.cos(degree * index),
            x = s * r,
            z = c * r;

        // 设置孩子节点的位置坐标
        child.p3(x + rootPosition[0], rootPosition[1] - 100, z + rootPosition[2]);

        // 递归调用布局孩子节点
        layout(child);
    });
}

上面是改造成3D布局后的布局器代码,你会发现和2D的布局器代码就差一个坐标系的的计算,其他的都一样,看下在3D上布局的效果:

韦德体育 11

恩,有模有样的了,在文章的开头,我们可以看到每一层的节点都有不同的颜色及大小,这些都是比较简单,在这里我就不做深入的讲解,具体的代码实现如下:

var level = 4,
    size = (level + 1) * 20;

var root = createNode(dataModel);
root.setName('root');
root.p(100, 100);

root.s('shape3d', 'sphere');
root.s('shape3d.color', randomColor());
root.s3(size, size, size);

var colors = {},
    sizes = {};
createTreeNodes(dataModel, root, level - 1, 5, function(data, level, num) {
    if (!colors[level]) {
        colors[level] = randomColor();
        sizes[level] = (level + 1) * 20;
    }

    size = sizes[level];

    data.setName('item-' + level + '-' + num);
    // 设置节点形状为球形
    data.s('shape3d', 'sphere');
    data.s('shape3d.color', colors[level]);
    data.s3(size, size, size);
});

在这里引入了一个随机生成颜色值的方法,对每一层随机生成一种颜色,并将节点的形状改成了球形,让页面看起来美观些(其实很丑)。

韦德体育 12

提个外话,节点上可以贴上图片,还可以设置文字的朝向,可以根据用户的视角动态调整位置,等等一系列的拓展,这些大家都可以去尝试,相信都可以做出一个很漂亮的3D树出来。

到此,整个Demo的制作就结束了,今天的篇幅有些长,感谢大家的耐心阅读,在设计上或则是表达上有什么建议或意见欢迎大家提出,点击这里可以访问HT for Web官网上的手册。

 

script src="../../guide/lib/core/ht.js"/scriptscript src="../../guide/lib/plugin/ht-forcelayout.js"/scriptscript src="../../guide/lib/plugin/ht-form.js"/script

拓扑图形组件 ht.graph.GraphView (以下简称 GarphView)是 HT 框架中 2D功能最丰富的组件,其相关类库都在 ht.graph包下。 GarphView 具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效, 因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,可作为一般性的图形化编辑工具,可扩展成工作流和组织图等企业应用。

ht.layout.Force3dLayout 类提供 3D 弹力布局,构造函数可传入 DataModel 和 Graph3dView 两种参数。 默认仅对未选中图元进行布局,如果构造函数参数为 Graph3dView 时,则视图组件的 isMovable 和 isVisible 函数将影响图元是否可布局, 图元 style 上的 layoutable 属性也可设为 false 阻止图元参与布局。

HT 框架的组件指的是可视化可交互的视图控件,HT 框架基于 HTML5 技术,因此HT组件的可视化部分本质就是 HTML 的元素, 大部分 HT 组件与 DataModel 数据模型绑定,用户通过操作纯 js 的语言即可驱动可视化组件,这样屏蔽了 HTML 底层图形技术复杂性。 HT 对 HTML5 技术封装的目的在于提高开发效率和可维护性,但并不意味着不允许用户直接操作 HTML 原生元素, 有 HTML5 开发经验的程序员,在了解 HT 系统机制的前提下,大可运用各种 HTML5 的技术对 HT 组件做自定义扩展。

介绍完 HT 封装的弹力布局的背景之后,接下来就是帮助你们也能轻松地实现这个效果。

我们就是用 ht.graph.GraphView 组件作为场景的,具体代码只有两行:

首先我们定义一个颜色数组变量,存储各个弹力球的颜色,还定义了一个随机函数,用来生成数随机的数组中的颜色:

graphView = new ht.graph.GraphView();
graphView.addToDOM();
var colorList = ['#FFAFA4', '#B887C5', '#B9EA9C', '#CFD9E7', '#4590B8', '#FF9C30'], colorLen = colorList.length;var randomColor = function() { var ran = Math.random() * colorLen; return colorList[Math.floor(ran)];//随机6种颜色};

韦德体育 ,首先声明变量,然后将这个组件实例变量添加进 body 体中。所有 HT 组件最根层都为一个 div 组件,可通过组件的 getView() 函数获得, 默认和自定义交互事件监听一般添加在该 div 上(getView().addEventListener(type, func, false)), 渲染层一般由 canvas 提供。 用户可直接对根 div 和 canvas 层设置css背景等样式, 也可以添加新的 HTML 组件到根 div 层上,作为 canvas 的兄弟组件一起呈现。 HT 组件一般都以设置 position 为 absolute 的绝对定位方式。HT 的组件一般都会嵌入BorderPane、SplitView 和 TabView等容器中使用,而最外层的 HT 组件则需要用户手工将 getView()返回的底层 div 元素添加到页面的 DOM元素中,这里需要注意的是,当父容器大小变化时,如果父容器是 BorderPane和 SplitView 等这些 HT 预定义的容器组件,则 HT 的容器会自动递归调用孩子组件 invalidate函数通知更新。但如果父容器是原生的 html元素, 则 HT 组件无法获知需要更新,因此最外层的 HT 组件一般需要监听 window的窗口大小变化事件,调用最外层组件 invalidate函数进行更新。

接着创建弹力球,简单生成一个 3D 节点,通过设置这个节点的 style 样式属性来控制节点的显示方式,其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 球体模型,再设置“shape3d”属性为前面定义的随机颜色,s3 是 HT 封装的设置 3D 节点大小的 setSize3d 函数的简写,最后将这个节点添加进数据模型 dataModel 中:

为了最外层组件加载填充满窗口的方便性,HT 的所有组件都有 addToDOM 函数,其实现逻辑如下,其中 iv 是 invalidate的简写:

var createNode = function(dm) {//创建node节点 圆 var node = new ht.Node(); node.s({//设置样式为 setStyle 的简写 'shape3d': 'sphere', 'shape3d.color': randomColor()//设置随机颜色 }); node.s3(40, 40, 40); dm.add(node); return node;};
addToDOM = function(){   
    var self = this,
        view = self.getView(),  //获取底层 div 
        style = view.style;
    document.body.appendChild(view); //将组件底层 div 添加进 body 体中           
    style.left = '0';//ht 的组件默认将 position 设置为 absolute 绝对定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

现在效果图上出现的还有各个弹力球之间的连线,这个连线我们一看就觉得很不一般,也是通过构造一个一个节点,这个节点是通过 HT for Web 建模手册 setShape3dModel函数自定义的 ht.Default.createRingModel 根据 xy 平面的曲线,环绕一周形成的 3D 环形模型,将其命名为‘custom’:

接下来我们要引入“数据容器”的概念,顾名思义,就是装载数据的容器,数据容器 ht.DataModel(以下简称 DataModel)作为承载 Data 数据的模型,管理着 Data 数据的增删以及变化事件派发, HT 框架所有组件都是通过绑定 DataModel,以不同的形式呈现到用户界面,可以通过 view.getDataModel() (简写为 view.dm())方式获取数据容器;同时组件也会监听 DataModel 模型的变化事件(view.getSelectionModel(),简写为 view.sm()), 实时同步更新界面数据信息,掌握了 DataModel 的操作就掌握了所有组件的模型驱动方式。

ht.Default.setShape3dModel(//创建模型 根据xy平面的曲线,环绕一周形成3D模型。 'custom', ht.Default.createRingModel( [0.5, 0.5, -0.2, 0, 0.5, -0.5], [1, 3] ));

我们要创建两个节点 ht.Node(继承于 ht.Data 类),一个服务器,一个客户端,中间连线两条以及一条自环的连线,这些都是 Data 数据,都需要添加进 DataModel 数据容器中。但是我们得先创建这个数据节点,用 HT 只需要两句话就能将节点添加进数据容器中了,方法跟上面创建拓扑组件的方法很像,拓扑组件是添加进 body 体中,而节点是添加进数据容器中:

HT 将用户自定义的属性和 HT 默认的属性调用方法分为 node.a 和 node.s 这样就能将两者有效地区分开来(具体参照 HT for Web 入门手册 style 章节),我们在创建管线的时候就用了这种方法:

var server = new ht.Node();//创建“服务器”数据节点
graphView.dm().add(server);//将节点添加进数据容器 graphView.dm() 中
var updatePipeline = function(edge) {//重新设置edge的样式 var pipeline = edge.a('pipeline'); pipeline.s3(1, 1, 1);//设置大小 pipeline.p3(0, 0, 0);//设置坐标 var node1 = edge.getSourceAgent(),//获取图形上连接的起始节点 node2 = edge.getTargetAgent();//获取图形上连接的目标节点 pipeline.s('mat', createMatrix(node1.p3(), node2.p3(), 20));//3d整体图形矩阵变化};

客户端也是一样的创建方式,节点名为 client。为了美观,我给服务器和客户端的节点都设置了图片,设置图片有两种方式:

最神秘的是如何能做出让两个节点“若即若离”的效果?

我们知道,矩阵能描述任意线性变换。线性变换保留了直线和平行线,线性变换保留直线的同时,其他的几何性质如长度、角度、面积和体积可能被变换改变了。简单的说,线性变换可能“拉伸”坐标系,但不会“弯曲”或“卷折”坐标系。这个函数主要是将我们的连接线在拖动弹力球后被拖拉的连接线的进行一个“变化矩阵”的操作,变化矩阵也是 HT 封装的 ht.Default.createMatrix 函数,通过将节点的 style 属性 mat 设置为一个自定义的函数,就是将这个节点的坐标乘上在“mat”属性对应的值,也就是说如果当前这个管线的旋转角为 [Math.PI/6, 0, 0],假设我们在 createMatrix 函数中设置 r3 为 [Math.PI/3, 0, 0],那么这个节点会旋转 90 度。非常轻松地创建出变化矩阵:

直接设置路径方式开发方便,无需提前注册图片,但数据模型序列化时图片路径占用内存较多,将来图片路径变化后不利于管理维护,两种方式都是正确的使用方式,可根据项目情况选中不同方式或混合使用。 如果采用 url 的路径方式 HT 内部会自动加载图片,并在 onload 之后自动更新相应的视图组件。

var createMatrix = function(p1, p2, width) {//createMatrix(array, matrix)将一组JSON描述的缩放、移动和旋转等操作转换成对应的变化矩阵 var vec = [p2[0]-p1[0], p2[1]-p1[1], p2[2]-p1[2]], dist = ht.Default.getDistance(p1, p2);//获取两点之间距离,或向量长度 return ht.Default.createMatrix({ s3: [width, dist, width], r3: [Math.PI/2 - Math.asin(vec[1]/dist), Math.atan2(vec[0], vec[2]), 0], rotationMode: 'xyz', t3: [(p1[0]+p2[0])/2, (p1[1]+p2[1])/2, (p1[2]+p2[2])/2] });};

HT 的框架下图片被赋予了更广泛的含义,HT提供了自定义 JSON 格式的矢量描述形式,以 HT 标准定义的 JSON 矢量格式, 也可以作为图片进行注册和使用,HT 的矢量方式比传统图片格式更节省空间,缩放不失真,最强大之处在于矢量的所有图形参数, 皆可与 Data 模型上的数据动态绑定,具体说明参见矢量手册,现在我这边的讲解还没到这个步骤,感兴趣的可以自行了解。

基础配件全部定义完毕,接着就是将“shape3d”属性设置为自定义的 3D 模型“custom” ,并将“layoutable”属性设置为“false”阻止图元参与布局,并将点之间的连线通过edge.a('pipeline', node)重新刷新,并添加进数据模型 dataModel 中:

接着是创建两个节点之间的连线,ht.Edge 类型用于连接起始和目标两个 Node 节点,两个节点间可以有多条 Edge 存在,也允许起始和目标为同一节点。为同一节点的情况就是形成自环的情况啦~这里有三条连线,由于有两条类似,我就只将直线连线和自环的连线代码贴出来进行解释:

var createEdge = function(dm, node1, node2) {//创建‘custom’模型的edge var node = new ht.Node(); node.s({ 'shape3d': 'custom', 'shape3d.color': '#ECE0D4', 'layoutable': false }); dm.add(node); var edge = new ht.Edge(node1, node2); edge.a('pipeline', node); edge.s('edge.color', 'rgba(0, 0, 0, 0)'); dm.add(edge); return edge;};
var edge = new ht.Edge(server, client);//创建连线节点,参数为起始节点和目标节点
graphView.dm().add(edge);//将连线节点添加进数据容器中

var cirEdge = new ht.Edge(server, server);//这个连线的起始节点和目标节点都为同一个节点,形成自环
graphView.dm().add(cirEdge);

插:我们还可以在工业上用 HeatMap 热图上做文章,效果依旧很炫,具体地址

连线节点也继承于 Data 类,所以添加进数据容器的方式也是一样的。至于连线上面的字,则是通过 setStyle 方法来实现的。

界面上的图形全部绘制完毕,剩下的就只有 form 表单,首先将 form 表单添加进 HTML 页面,用的是 HT 封装的 ht.widget.FormPane 函数:

HT 的数据 Data 可分为三种属性类型:

var formPane = new ht.widget.FormPane();formPane.setWidth(230);formPane.setHeight(125);formPane.addToDOM();

记住,form 表单要设置宽高,不然不显示。

这里我是通过 style 类型来添加的文字说明,通过 ‘label’ 属性设置显示的文字:

form 表单添加行是通过 addRow 函数,我们重点来说一下下面的几行,Color、Range 和 Intensity,这三个名字主要是用来控制“头灯”的。在 HT 中直接通过 setHeadlightColor/setHeadlightRange/setHeadlightIntensity 三个函数来控制“头灯”的颜色、范围以及灯的强度,onValueChanged 属性,顾名思义属性值改变之后触发的事件:

edge.s({//setStyle 的简写
    'label': '请求',//设置文字
    'label.position': 3//设置文字位置
});
['Color', 'Range', 'Intensity'].forEach(function(name) { var obj = { id: name }, func = function(oV, nV) { g3d['setHeadlight' + name](nV);// === g3d.setHeadlightColor(nV)/g3d.setHeadlightRange(nV)/g3d.setHeadlightIntensity(nV) }; if (name === 'Color') obj.colorPicker = {//ht.widget.ColorPicker为颜色选择框 instant: true, value: g3d['getHeadlight' + name](),// === g3d.getHeadlightColor() onValueChanged: func }; else obj.slider = {//滑动条 min: 0, max: name === 'Range' ? 20000 : 3, step: 0.1, value: g3d['getHeadlight' + name](), onValueChanged: func }; formPane.addRow([ name, obj ], [ 70, 0.1 ]);});

最终显示文字由 GraphView.getLabel 函数决定:

slider 和 colorPicker 都是 HT 自定义的滑动条和颜色选择器,详情请参考 HT for Web 表单手册。

getLabel: function (data) {
    var label = data.getStyle('label');//获取 style 样式中的 label 属性的 value
    return label === undefined ? data.getName() : label; 
}

如果还有不懂的请咨询我,或者可以直接上 HT for Web 官网查阅手册。

上面还有一个文字位置,是 HT 封装的位置,具体显示位置如下:

转载来源:

韦德体育 13

其中 17 为中心位置,大家可根据这个位置自行调整看看效果,位置的具体说明请参考 HT for Web 位置手册。

至此,全部代码解析完毕,下一节我会给大家介绍如何添加连线中的流动哦,记得围观哦~

 

上一篇:付费投稿计划,它们通通是免费的响应式HTML5模板 下一篇:没有了

更多阅读

而3D上的树状结构在展现上配合HT,把网络

前端 2020-04-20
在HT forWeb中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级...
查看全文

付费投稿计划,它们通通是免费的响应式

前端 2020-04-19
本文由码农网 –小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!...
查看全文

付费投稿计划,而现在的浏览器也基本都

前端 2020-04-18
本文由码农网 –小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 在...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有