全国服务热线:4008-888-888

技术知识

详解迅速开发设计根据 HTML5 互联网拓扑图运用

今日刚开始大家就从最基本分析怎样搭建 HTML5 Canvas 拓扑图运用,HT 內部封裝了1个拓扑图型组件 ht.graph.GraphView(下列简称 GraphView)是 HT 架构中 2D 作用最丰富多彩的组件,其有关类库都在 ht.graph 包下。GraphView 具备基础图型的展现和编写作用,拓扑连接点连线及全自动合理布局作用,电力工程和电信等制造行业预订义目标,具备动漫3D渲染等殊效,因而其运用面很普遍,可做为监管行业的制图专用工具和人机页面,可做为1般性的图型化编写专用工具,可拓展成工作中流和机构图等公司运用。简易说来便是:拓扑图是广泛的说法,电信网管的互联网拓扑图、电力工程的电网拓扑图、工业生产操纵的监管图、工作中步骤图、逻辑思维脑图这些,简易说便是连接点连线组成的这些全是这里指的拓扑图。

用 HT 开发设计1个互联网拓扑图是是非非常非常容易的1件事,只必须短短几行编码就可以进行1个简易的服务器与顾客端拓扑图:

这个事例十分基本,基本上进行了服务器与顾客端在拓扑上的全部作用。话很少说,猜猜看这个事例包含 HTML 标识的全部一部分一共花了是多少行编码?减去空行也就 50 行,我还做了许多款式一部分的设计方案,终究给大伙儿看的事例不可以太丑嘛~

大伙儿能够在 tuputu_jb51.rar 自主免费下载编码,留意由于有 json 文档,会存在照片跨域难题,必须用 Firefox 或当地服务器跑起来。

大家在最初就表明1下,HT 是根据 HTML5 规范的公司运用图型页面1站式处理计划方案, 其包括通用性组件、拓扑组件和 三d 3D渲染模块等丰富多彩的图型页面开发设计类库,客户只必须引进 ht.js 便可,并且跟其他任何物品彻底不矛盾,由于 HT 只是申明了1个全局性自变量 ht,仅此罢了。

接下来分析编码一部分,最先,构建拓扑图情景:

dm = new ht.DataModel();//数据信息器皿
gv = new ht.graph.GraphView(dm);//拓扑组件 主要参数为dm 关联的数据信息实体模型
gv.addToDOM();//将拓扑图加上进body体中

HT 的全部组件的根部全是1个 div,根据 getView() 方式获得,大家在 addToDOM 方式中就用到了这个方式:

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //获得组件最底层 div
        style = view.style; 
    document.body.appendChild(view);//将最底层 div 加上进 body 体中           
    style.left = '0';//HT 1般将组件都设定为 absolute 的肯定精准定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //恶性事件监视对话框尺寸转变,iv 为延时更新组件         
}

随后向拓扑情景中加上“服务器”和“顾客端”连接点:

var server = new ht.Node();
server.setName('server');//设定连接点名字,显示信息在连接点正下方
server.setImage('serverImage');//设定连接点照片
server.setSize(20, 60);//设定连接点尺寸
dm.add(server);//将连接点加上进数据信息器皿dm中
server.setPosition(100, 100);//设定连接点座标(x, y)

var group = new ht.Group();//组,组中能够有好几个连接点
group.setImage('groupImage');//设定照片
dm.add(group);
var client = new ht.Node();//这个连接点是加上进组中的
client.setName('client');
client.setImage('clientImage');
dm.add(client);
group.addChild(client);//组加上孩子
group.setExpanded(true);//设定组为进行方式
client.setPosition(200, 100);//设定连接点部位 假如组中仅有1个连接点,那末这个连接点的部位能够为组的部位

服务端与顾客端连线?2 行编码搞定!实际上 HT 中加上连接点的方式十分简易,1般就 2 行编码能完毕:先申明案例自变量,随后将这个案例自变量加上进数据信息器皿中。

var edge = new ht.Edge(server, client);
dm.add(edge);

大家很好奇心虚线是如何做出来的?虚线的产生是构建在连线之上的,流程有 3 个:

  1. 引进 ht-dashflow.js 文档 ;
  2. 将连线的款式特性 edge.dash.flow 设定为 true;
  3. 在情景组件中开启虚线流动性的电源开关,这里便是 gv.enableDashFlow(true);

是否十分简易!接下来大家看看如何设定:

edge.s({//连接点设定款式特性
    'edge.dash': true,//显示信息虚线
    'edge.dash.flow': true,//打开虚线流动性
    'edge.dash.color': 'yellow',//虚线色调
    'edge.dash.pattern': [8, 8],//虚线款式
    'label': 'flow',//连接点注解
    'label.background': 'pink',//连接点注解情况色调        
});

这样全部的显示信息一部分就详细介绍结束啦~这些,仿佛还少点甚么?对了,我忘了详细介绍 HT 中的 ht.Group 类了,说白了,便是“组”的意思,组中能够包括许多连接点,双击鼠标可显示信息或掩藏组内的全部连接点,上面编码有写到,可是我还做了1点小姿势,便是组右上角的显示信息一部分,实际上便是1个标明,用来提醒表明的:

group.s({
    'group.background': 'rgba(255, 255, 0, 0.1)',//设定组的情况色调
    'note': "Double click me!",//标明 显示信息的內容
    'note.position': 13,//标明部位
    'note.offset.y': 10,//标明部位y轴偏位
});

大家能够根据 note.position 来更改标明的部位(实际部位信息内容请参照HT for Web 部位手册 ),还可以应用 note.offset.x 和 note.offset.y 来更改标明的部位。

所有编码分析结束!我会尽快升级,假如大伙儿感觉进度慢的话,能够自身去大家官方网站( HT for Web )念书习,期待大伙儿能有更多的获得,学习培训是自身的事儿,快动手能力实践活动将这片文章内容的內容变为你自身的专业知识吧!
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服