vml实现web topo原型（10) -移动

最新推荐文章于 2017-04-18 08:46:10 发布
原创 最新推荐文章于 2017-04-18 08:46:10 发布 · 561 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web

本文介绍了一种在JavaScript中实现的对象关联移动技术。该技术通过记录设备与电路间的连接关系，确保了在拖动一个对象时能高效地带动相关联的其他对象一起移动，提高了用户体验及操作效率。

实际上，这部分的代码对于支持js的元素来说，基本是通用的。

特殊逻辑是：

由于设备和电路时连在一起的，在移动对象时，需要考虑对象之间的相关性，实现关联移动。

需要在js中记录设备和电路的连接关系，这样拖动时的处理效率比较高

这一部分可以直接参考源码。

moveObj.js

(hightopo)学习笔记(1)
laputa73的专栏
03-20 1万+
jtopo是一个简单的at hand的js topo画图工具,特别适合用来在网页中嵌入拓扑图. 但是如果是作为单独的topo管理工具,就有些太单薄的. 相比之下,hightopo就强大多了. 放大缩小鸟瞰编辑导出,图表联动都已经ready了 先看看简单的node示例.  注意节点实现了吸附功能 var air11 = new ht.Node(); air11.setName('11
vml实现web topo原型(11) - 弧线
laputa73的专栏
03-22 811
在两个设备之间同时有多条电路时，可以使用弧线来表示，这样就不会相互覆盖。（另一种实现方式是电路组，适合电路很多的情况）相应的函数为：//3级函数//创建弧线电路function createCurveCircuit(identifer,fromP,toP,name,color,titleArray,fromid,toid,rank,bandwidth,target){ //
vml 实现 WEB topo原型(3)-设备
laputa73的专栏
03-09 834
实现2个功能：用图片表示设备，可以拖动功能1是vml本身的功能功能2则需要结合js事件另外，基于重用和封装的考虑，把vml元素的创建也封装为js函数，则样便于以后动态生成。 主页面Dev1.html<!-- dev2.html 1.展示通过图片表示设备 2.可以拖动设备-->设备 v/:*
vml实现web topo原型(14)-背景图
laputa73的专栏
03-24 1175
Vml实现整体的背景图非常简单，而且可以矢量缩放，保存相对位置。还可以支持对不同的图形元素设置背景图。暂时用不到。只需要使用v:image对象，设好zIndex就可以了   
vml实现web topo原型（7）-性能测试
laputa73的专栏
03-22 699
由于网上普遍反映vml的性能比较低，所以特地做了一下性能测试。可以生成不同数量的设备和电路看看大量设备情况下页面响应速度如何简单的测试结果 //设备数=m*n,电路数m*n*2-m-n+1 // 25  32ms // 10*10=100 172ms,141m //10*20=200 329ms,297ms // 20*20=400 687ms,687ms //20
vml 实现web topo原型(6)-鼠标事件
laputa73的专栏
03-16 962
vml的元素都可以响应鼠标事件。不同的浏览器对于鼠标事件的处理时不同的。不过vml只支持IE,可以WS这个问题。<!-- dev3.html 1.展示鼠标事件，鼠标滑过时变大,离开变小 2.-->设备<!--function ShowMenu1(){ //按group成组缩放 //group本身不能响应鼠标事件
VML实现WEB Topo原型（1）
laputa73的专栏
03-09 1011
原本不打算再研究vml了，不过经历了一年的徘徊，还是决定再回头研究一下理由：1.       不需要插件，IE天然支持，和js结合好。不用学新语言。2.       矢量。支持3D。3.       有现成的webtopo源代码可以研究计划：用vml实现一个简单的topo 发现的前端展示页面对于前端需求大致有：1.图片显示设备，线显示连接2.可以关联拖放3.
vml实现web topo原型(9) - 性能改进
laputa73的专栏
03-22 589
对于html而言，页面元素的数量会影响页面显示的性能。在前面生成文字的时候，我们使用的是文本路径textpath元素，它包含了line、path/textpath三个vml元素。在不需要特效的时候，有些浪费。我们只需要textbox一个元素就足够了。//创建一个文本框function createTextb(top,left,textCon,color){ var textbox
vml 实现web topo原型（12）-自动摆放
laputa73的专栏
03-24 1193
 作为网络拓扑，自动摆放时必不可少的功能。 根据MVC模型的思路，控制摆放的逻辑应该放在后台的控制层。不过这里为了简化演示，直接通过js来实现简单的摆放算法。这里主要显示一下效果。主要通过设备的hop属性来控制设备显示所在的层数和位置。支持：矩形摆放圆形摆放环形摆放<!-- dev5.html 1.拓扑整体放在一个区域(div/group) 2.自动摆放
VML实现web topo原型 (2)-基本元素
laputa73的专栏
03-09 944
这个是webtop页面的一部分。展示了vml 中的line、textpath元素的用法。结合vml极道教程，可以完成初步入门。<!-- legengd.html 1.显示图例功能 2.显示文字、线-->图例 v/:* { BEHAVIOR: url(#default#VML) }<v:
vml.rar_VML_VML web_js v_js vml gis_web绘图
09-19
描述中的“结合IE运用VML进行web绘图功能，可以与js完美结合并扩展其功能”进一步强调了这个资源包是如何利用VML和JavaScript在Internet Explorer中实现Web绘图的。JavaScript的灵活性和动态性使得它可以与VML紧密...
vml topo相关资源2-moveObj.js
12-15
movObj.js 这个是比较通用的js 可以拖曳html的单个元素和连线。 我还扩展了一下批量拖曳的功能 所以多收1分哦。谢谢大家
vml实现web拓扑图
05-05
环境：sqlserver2005,vs2008。 说明：利用sql.sql创建数据库，所有东西在NewFolder1文件夹中，可以浏览其... 功能：从xml文件中读取对象(obj)，然后再去数据库读取对象关系，利用vml在IE中展示对象关系，支持拖拽。
基于VML实现Web绘图与JS融合的技巧
总结来说，该资源强调了在特定历史时期（特别是在旧版IE浏览器中），如何通过结合使用XML标记语言（如VML）和JavaScript，实现Web上的丰富图形绘制以及GIS数据的可视化展示。尽管SVG和Canvas已经成为了当前Web绘图的...
使用harviewer显示har文件
热门推荐
laputa73的专栏
11-28 3万+
1.下载harviewer的安装版 http://code.google.com/p/harviewer/downloads/list 目前最新是2.0.15 2.不需要php支持。 修改展开目录的 preview.php,改为preview.htm index.php改为index.htm 删除其中的 3.直接用html链接就可以了 完整模式 http://12
推荐 phantomjs
laputa73的专栏
11-27 4826
一直在关注nodejs的zombie,结果发现了更好的phantomsjs  可以轻松实现无图形界面的浏览器功能  这意味着,可以基于命令行终端进行网页调试
vuejs和echarts3整合(2)
laputa73的专栏
04-18 4310
在松耦合模式下，vuejs需要通过主动调用函数来触发echarts的数据更新。echarts也可以完全不依赖vuejs,自己控制数据加载。  可以进一步实现数据绑定。这样vue的data变化,echarts也跟随更新。  echarts本身不是数据感应控件，通过watch来实现。 ECharts
vuejs2和echarts3组合显示图表
laputa73的专栏
04-17 3794
由于echarts3不再通过AMD加载，无需内置echarts变量，所以整合变得简单多了。 echarts成了一个普通的全局变量，可以被vue操作 ECharts {{ message }} 变换数据
【web】http长连接技术(4)iframe demo
laputa73的专栏
05-10 3756
     标签：web javascript comet php  接下来我们看看Zeitoun 网站上提供的comet例子。  Demo1: comet-iframe.tar.gz  这个主要包含3个文件  index.html  backend.php  prototype.js  在php环境部署后，发现it doesn’t works!  老外也会忽悠人。  检查一下，是backend.p
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值