拓扑图热门博客列表 - ITeye博客频道

快速开发基于 HTML5 网络拓扑图应用--入门篇（二）

上一篇我们绘制了一个 graphView 场景，在场景之上通过 graphView.dm() 获取数据容器，并通过 graphView.dm().add() 函数添加了两个 Node 节点，并通过 setPosition 设置节点位置以及 setImage 给节点添加图片；接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线（实际上还可以更多），并 ...

html5 canvas 拓扑图电信工控

xhload3d 评论(0) 有979人浏览 2018-01-15 10:00

快速开发基于 HTML5 网络拓扑图应用--入门篇（一）

计算机网络的拓扑结构是引用拓扑学中研究与大小，形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点，把传输介质抽象为一� ...

html5 canvas 工控电信拓扑图

xhload3d 评论(0) 有1553人浏览 2018-01-09 06:17

基于HTML5 Canvas 实现弹出框

　　用户鼠标移入时，有弹出框出现，这样的需求很常见。这在处理HTML元素实现时简单，但是如果是对HTML5 Canvas 构成的图形进行处理，这种方法不再适用，因为Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体。而图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。然而，在HT for Web中， ...

hightopo 拓扑图 Canvas HT for Web 弹出框

xhload3d 评论(0) 有642人浏览 2017-06-05 09:51

基于HTML5 Canvas实现用户交互

很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html）写了个Demo进行示例。场景如下所示，在该场景中双击温度和湿度下的Node，会生成输入框供用户填写内容，这之后， ...

HTML5 HT for Web 拓扑图 Canvas 交互

xhload3d 评论(0) 有595人浏览 2017-05-23 14:31

基于HTML5快速搭建TP-LINK电信拓扑设备面板

　　今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。　　先来目睹下最终的实现效果：http://www.hightopo.com/demo/blog_tplink_20170511/index.html 1、TP-LINK面板我们从TP-LINK的设备面板开始，设备面板的示意图如下： ...

HT for Web 拓扑图电信 HTML5

xhload3d 评论(0) 有710人浏览 2017-05-18 15:31

HTML5数据可视化第三弹：萌萌哒拓扑图分组

前言最近忙着给客户折腾一个复杂的多层嵌套关系。客户一句话“要好看！”，哥就忙白了头啊，还好最终搞定了。需求描述先简单描述下这次客户的需求。现实应用中，网络拓扑图结构可能很简单，也可能非常复杂。比如这种节点较多的单层拓扑：稍复杂一些的：再复杂一些的：在这些拓扑图中常见的场景是，很多网络节点需要组成一组，这常被称为“网元组”。 ...

HTML5 UI开发拓扑图

TWaverGeek 评论(0) 有2487人浏览 2016-12-02 09:55

数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

http://www.hightopo.com/demo/pipeline/index.html 《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果，例如 http://www.hightopo.com/guide/guide/core/3d/example ...

HTML5 WebGL 3D 电信拓扑图

xhload3d 评论(0) 有1374人浏览 2016-09-30 01:34

快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易，例如《入门手册》的第一个小例子麻雀虽小五脏俱全：http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 该例子展示了如何构建两个节点、一条连线、以及一个 Group 的组合效果。结合《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》可以 ...

HTML5 电信拓扑图 SCADA HMI

xhload3d 评论(0) 有729人浏览 2016-09-27 12:21

网络拓扑图上文本的巧妙应用

在前端网页设计中，文本是重要的组成部分，那么在网络拓扑图中也是一样的，文本在网络拓扑图上最基本的显示功能之一，在不同的应用场景下，会有不同的需求。但是不同的需求也逃不过一些基础设置，如位置、旋转、字体、颜色等需求。接下来我们就来详细聊聊 HT for Web 中文本的相关应用。 HT for Web 为网络拓扑图上的节点提供了两个文本，也确实需要两个文本同时存在的情况，比如车站上面的站牌，就有汉 ...

HTML5 拓扑图 ht-for-web 文本站点模拟

xhload3d 评论(0) 有685人浏览 2016-09-26 13:27

电信网络拓扑图自动布局之曲线布局

在前面《电信网络拓扑图自动布局之总线》一文中，我们重点介绍了自定义 EdgeType 的使用，概括了实现总线效果的设计思路，那么今天话题是基于 HT for Web 的曲线布局（ShapeLayout）。 ShapeLayout 从字面上的意思理解，就是根据曲线路径来布局节点，省去手动布局节点的繁琐操作，还能保证平滑整齐地排布，这是手动调整很难做到的。ShapeLayout 结合前面提到的总线 ...

自动布局拓扑图 ht-for-web 电信网络曲线布局

xhload3d 评论(0) 有1193人浏览 2016-09-19 00:54

电信网络拓扑图自动布局之总线

在前面《电信网络拓扑图自动布局》一文中，我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用� ...

电信自动布局拓扑图 ht-for-web 总线

xhload3d 评论(0) 有932人浏览 2016-09-05 02:43

电信网络拓扑图自动布局

在电信网络拓扑图中，很经常需要用到自动布局的功能，在大数据的层级关系中，通过手工一个一个摆放位置是不太现实的，工作量是相当大的，那么就有了自动布局这个概念，来解放布局的双手，让网络拓扑图能够布局出一个优美的图案，当然在一些复杂的布局中，光有自动布局还是不行的，还是需要手工地做些相应的调整，才能让界面图案更加的完美。今天我们来聊聊电信网络拓扑图 HT for Web 在自动布局上面的相关内容。在 ...

电信自动布局拓扑图 layout ht-for-web

xhload3d 评论(0) 有1436人浏览 2016-08-22 01:39

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

HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 H ...

HTML5 电信网管拓扑图 Canvas 工业控制

xhload3d 评论(0) 有1861人浏览 2016-08-10 01:47

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了，请大家接着往下看。有了 ...

HTML5 WebGL HT for Web 拓扑图 WebSocket

xhload3d 评论(0) 有1989人浏览 2016-07-26 01:03

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

今天没有延续上一篇讲的内容，穿插一段小插曲，WebSocket 实时数据通讯同步的问题，今天我们并不是很纯粹地讲 WebSocket 相关知识，我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。我们先来聊聊这次 Demo 的思路吧，首先我要有一个 3D 的拓扑图组件，在上面创建几个节点，然后通过拉力布局（ForceLayout） ...

HTML5 WebGL HT for Web 拓扑图 WebSocket

xhload3d 评论(0) 有755人浏览 2016-07-25 10:29

jsplumb综合记录

var firstInstance = jsPlumb.getInstance(); firstInstance.importDefaults({ Connector : [ "Bezier", { curviness: 150 } ], Anchors : [ "TopCenter", "BottomCenter" ] ...

流程图拓扑图

Kinghoo 评论(0) 有1880人浏览 2016-05-11 17:49

基于HTML5的WebGL应用内存泄露分析

上篇(http://www.hightopo.com/blog/194.html)我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景，本篇我们先切换个话题，谈谈模型-视图-事件之间的关系。 http://www.hightopo.com/guide/guide/core/be ...

HTML5 拓扑图 WebGL 内存泄露 MVVM

xhload3d 评论(0) 有1478人浏览 2015-10-26 00:46

基于HT for Web的3D拓扑树的实现

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

HTforWeb WebGL 拓扑图 3D

xhload3d 评论(1) 有1226人浏览 2015-09-09 10:00

博客专栏推荐

本月博客排行

年度博客排行

最新文章列表