因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法

extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于html5的画图引擎，而是选择了svg 。

下边是花了不到一天的时间实现的任意点连线和拖动功能，代码没有优化，稍微乱了点

如果单纯应用canvas进行画图，拖拽是非常麻烦的，我们往往要基于第三方的画图类库，这里实现是基于kineticjs

为了测试方便我使用了双击事件控制拖动还是划线  。

代码

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. margin: 0px;
  7. padding: 0px;
  8. }
  9. canvas {
  10. border: 1px solid #9C9898;
  11. }
  12. </style>
  13. <script type="text/javascript" src="ext/bootstrap.js"></script>
  14. <!-- ENDLIBS -->
  15. <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  16. <script src="js/kinetic-v3.10.2.min.js"></script>
  17. <script>
  18. Ext.onReady(function(){
  19. /**
  20. 自动判断顶点连线算法
  21. */
  22. var stage=new Kinetic.Stage({
  23. container:'container',
  24. width:1000,
  25. height:1000
  26. });
  27. var layer=new Kinetic.Layer();
  28. var flag=false;
  29. var imgArray=[];
  30. var lineArray=[];
  31. var tmpMoveImg=null;
  32. var loop=0;
  33. function  Pos(x,y){
  34. this.x=x;
  35. this.y=y;
  36. };
  37. function LineImage(img,line){
  38. this.img=img;
  39. this.line=line;
  40. };
  41. function NewImage(img,opsArray){
  42. this.img=img;
  43. this.opsArray=opsArray;
  44. };
  45. var imgA= new Image();
  46. imgA.onload=function(){
  47. var imgObjA= createImage(imgA,100,100,100,100)
  48. var array=new Array();
  49. var na=new  NewImage(imgObjA,array);
  50. imgArray.push(na);
  51. layer.add(imgObjA);
  52. stage.add(layer);
  53. }
  54. var imgB= new Image();
  55. imgB.onload=function(){
  56. var imgObjB= createImage(imgB,400,400,100,100)
  57. var array=new Array();
  58. var nb=new  NewImage(imgObjB,array);
  59. imgArray.push(nb);
  60. layer.add(imgObjB);
  61. stage.add(layer);
  62. }
  63. var imgC= new Image();
  64. imgC.onload=function(){
  65. var imgObjC= createImage(imgC,700,100,100,100)
  66. var array=new Array();
  67. var nc=new  NewImage(imgObjC,array);
  68. imgArray.push(nc);
  69. layer.add(imgObjC);
  70. stage.add(layer);
  71. }
  72. var rect=new Kinetic.Rect({
  73. x:0,
  74. y:0,
  75. width:1000,
  76. height:1000,
  77. fill:'white',
  78. storke:'red',
  79. storkeWidth:5
  80. });
  81. layer.add(rect);
  82. imgA.src='img/db.png';
  83. imgB.src='img/mj.png';
  84. imgC.src="img/kt1.png";
  85. rect.on('dblclick',function(){
  86. if(loop%2==0){
  87. flag=true;
  88. for(var i=0;i<imgArray.length;i++){
  89. imgArray[i].img.setDraggable(false);
  90. }
  91. }else{
  92. flag=false;
  93. for(var i=0;i<imgArray.length;i++){
  94. imgArray[i].img.setDraggable(true);
  95. imgArray[i].img.on('mouseover',function(){
  96. var p=new Pos(this.getX(),this.getY());
  97. tmpMoveImg=getImgByPos(p);
  98. })
  99. imgArray[i].img.on('dragmove',function(){
  100. for(var j=0;j<tmpMoveImg.opsArray.length;j++){
  101. var realPoints=[];
  102. calculateStartEndPos(tmpMoveImg.opsArray[j].img,this,realPoints);
  103. var line= createLine(realPoints);
  104. var oldLine=tmpMoveImg.opsArray[j].line;
  105. var p=new Pos(tmpMoveImg.opsArray[j].img.getX(),tmpMoveImg.opsArray[j].img.getY());
  106. var oppoImg= getImgByPos(p);
  107. replaceOppoLine(oppoImg,oldLine,line);
  108. layer.remove(tmpMoveImg.opsArray[j].line);
  109. tmpMoveImg.opsArray[j].line=line;
  110. layer.add(line);
  111. layer.draw();
  112. realPoints=[];
  113. }
  114. layer.draw();
  115. })
  116. }
  117. }
  118. loop++;
  119. for(var i=0;i<imgArray.length;i++){
  120. var innerFlag=false;
  121. var points=[];//标记性的点，为了获取img 使用
  122. var realPoints=[];//真正计算后合理的划线点
  123. imgArray[i].img.on('mousedown',function(){
  124. if(flag){
  125. var pos= stage.getMousePosition();
  126. points.push(this.getX());
  127. points.push(this.getY());
  128. innerFlag=true;
  129. }
  130. });
  131. imgArray[i].img.on('mouseup',function(){
  132. if(flag&&innerFlag){
  133. var pos= stage.getMousePosition();
  134. points.push(this.getX());
  135. points.push(this.getY());
  136. var p=new Pos(points[0],points[1]);
  137. var op=new Pos(points[2],points[3]);
  138. var opImg=getImgByPos(p);
  139. var owImg=getImgByPos(op);
  140. if(opImg!=owImg){
  141. calculateStartEndPos(opImg.img,owImg.img,realPoints);
  142. var line= createLine(realPoints);
  143. var opLine=new LineImage(opImg.img,line);
  144. var owLine=new LineImage(owImg.img,line);
  145. owImg.opsArray.push(opLine);
  146. opImg.opsArray.push(owLine);
  147. flag=false;
  148. innerFlag=false;
  149. points=[];
  150. realPoints=[];
  151. layer.add(line);
  152. layer.draw();
  153. }
  154. }
  155. });
  156. }
  157. })
  158. /**
  159. * 通过坐标获取Img对象
  160. */
  161. function getImgByPos(pos){
  162. for(var i=0;i<imgArray.length;i++){
  163. if(imgArray[i].img.getX()==pos.x&&imgArray[i].img.getY()==pos.y){
  164. return imgArray[i];
  165. }
  166. }
  167. }
  168. /**
  169. * 替换对方中line
  170. */
  171. function replaceOppoLine(imgObj,oldLine,newLine){
  172. for(var i=0;i<imgObj.opsArray.length;i++){
  173. if(imgObj.opsArray[i].line==oldLine){
  174. imgObj.opsArray[i].line=newLine;
  175. }
  176. }
  177. }
  178. /**
  179. 划线
  180. */
  181. function createLine(points){
  182. var line=new Kinetic.Line({
  183. points:points,
  184. stroke:'bule',
  185. strokeWidth:5,
  186. lineCap:'round',
  187. lineJoin:'round'
  188. });
  189. return line;
  190. }
  191. /**
  192. * 计算划线的开始坐标
  193. */
  194. function calculateStartEndPos(imgStart,imgEnd,realPoints){
  195. var realSx=0;
  196. var realSy=0;
  197. var realEx=0;
  198. var realEy=0;
  199. var sx=imgStart.getX();
  200. var sy=imgStart.getY();
  201. var swidth=imgStart.getWidth();
  202. var sheight=imgStart.getHeight();
  203. var ex=imgEnd.getX();
  204. var ey=imgEnd.getY();
  205. var ewidth=imgEnd.getWidth();
  206. var eheight=imgEnd.getHeight();
  207. var arrayx=calculateX(sx,swidth,ex,ewidth );
  208. var arrayy=calculateY(sy,sheight,ey,eheight );
  209. realPoints.push(arrayx[0]);
  210. realPoints.push(arrayy[0]);
  211. realPoints.push(arrayx[1]);
  212. realPoints.push(arrayy[1]);
  213. }
  214. /**
  215. 计算开始和结束节点x坐标
  216. */
  217. function calculateX(sx,swidth,ex,ewidth ){
  218. var arrayX=[];
  219. if(sx>ex){
  220. arrayX.push(sx);
  221. arrayX.push(ex+ewidth);
  222. }else if(sx==ex){
  223. arrayX.push(sx+(swidth/2));
  224. arrayX.push(sx+(ewidth/2));
  225. }else{
  226. arrayX.push(sx+swidth);
  227. arrayX.push(ex);
  228. }
  229. return  arrayX;
  230. }
  231. /**
  232. 计算开始和结束节点y坐标
  233. */
  234. function calculateY(sy,sheight,ey,eheight ){
  235. var arrayY=[];
  236. if(sy>ey){
  237. arrayY.push(sy+(sheight/2));
  238. arrayY.push(ey+(eheight/2));
  239. }else if(sy==ey){
  240. arrayY.push(sy+(sheight/2));
  241. arrayY.push(sy+(eheight/2));
  242. }else{
  243. arrayY.push(sy+(sheight/2));
  244. arrayY.push(ey+(eheight/2));
  245. }
  246. return  arrayY;
  247. }
  248. /**
  249. 画图
  250. */
  251. function createImage(img,x,y,width,height){
  252. var imgObj=new Kinetic.Image({
  253. x:x,
  254. y:y,
  255. width:width,
  256. height:height,
  257. draggable:true,
  258. image:img
  259. });
  260. imgObj.on("mouseover", function(){
  261. document.body.style.cursor = "pointer";
  262. });
  263. imgObj.on("mouseout", function(){
  264. document.body.style.cursor = "default";
  265. });
  266. return imgObj
  267. }
  268. });
  269. </script>
  270. </head>
  271. <body>
  272. <div id="container"></div>
  273. </body>
  274. </html>
  275. <img alt="" src="http://dl.iteye.com/upload/attachment/0070/8176/f9bb5503-b35b-3a45-abb1-0241a1495665.png">
  276. <img alt="" src="http://dl.iteye.com/upload/attachment/0070/8178/54c788d0-1395-3824-aea1-280b70b6f523.png">

效果如下

 

代码里还有一项基于extjs4 的实现和纯html5 canvas 的实现

基于html5二个div 连线的更多相关文章

  1. 基于Html5 Plus + Vue + Mui 移动App 开发（二）

    基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...

  2. HT for Web基于HTML5的图像操作（二）

    上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能 ...

  3. 基于HTML5技术的电力3D监控应用（二）

    上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气 ...

  4. 使用PhoneGap开发基于Html5应用二：第一个PhoneGap应用：百度

    上一篇博文使用PhoneGap开发基于Html5应用一:PhoneGap简单介绍 中我介绍了怎样从phonegap官网上下载源代码并启动第一个应用,今天我们把phonegap的应用略微改一下,让他实现 ...

  5. 基于 HTML5 WebGL 的发动机 3D 可视化系统

    前言     工业机械产品大多体积庞大.运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态.简单的图片说明书介绍,无法让客户全面了解产品,不仅工作人员制作麻烦,客户看得也费力.如 ...

  6. 基于HTML5实现3D热图Heatmap应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...

  7. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  8. 基于HTML5实现的Heatmap热图3D应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. 已有众多文章分享了生成Heatmap热图原 ...

  9. 基于HTML5技术的电力3D监控应用（三）

    继(一)和(二)之后不少,不少网友问我移动终端的使用问题,因为我们项目这次采用Android平板终端,所以我对这方面有点肤浅的研究,这篇分享些项目经验总结,希望对大家有所帮助. 电力3D项目去年底刚立 ...

随机推荐

  1. Python核心技术与实战——十四|Python中装饰器的使用

    我在以前的帖子里讲了装饰器的用法,这里我们来具体讲一讲Python中的装饰器,这里,我们从前面讲的函数,闭包为切入点,引出装饰器的概念.表达和基本使用方法.其次,我们结合一些实际工程中的例子,以便能再 ...

  2. DevExpress WinForms v19.1新版亮点：Spreadsheet/Sunburst控件功能增强

    行业领先的.NET界面控件DevExpress v19.1终于正式发布,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WinForms v19.1中新增的一些控 ...

  3. webview默认是不开启localstorage的

    .setDomStorageEnabled(true);// 打开本地缓存提供JS调用,至关重要 转载 https://blog.csdn.net/xhf_123/article/details/77 ...

  4. Linux系统中的硬件问题如何排查？(4)

    Linux系统中的硬件问题如何排查?(4) 2013-03-27 10:32 核子可乐译 51CTO.com 字号:T | T 在Linux系统中,对于硬件故障问题的排查可能是计算机管理领域最棘手的工 ...

  5. return和exit以及C语言递归函数

    return 在主函数main()中,return整个函数退出,在子函数中return,只退出子函数. exit exit无论在函数什么位置退出整个函数 递归函数 #include <stdio ...

  6. 【NOIP2016提高组day2】愤怒的小鸟

    分析 Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于 (0, 0) 处,每次Kiana可以用它向第一象限发射一只红色的小鸟, 小鸟们的飞行轨迹均 ...

  7. 记第一次正式线上笔试（Tencent——正式考-技术研发类-综合-2018实习生招聘）

    选择题做的跟傻逼一样,不多说了..大学只打了ACM还不是计算机科班出身的我,连好多名词都不认识..... 三道编程题很简单,下面给出三道题的大致题意以及题解. 1.给出n和m,满足(2m)可以整除n. ...

  8. Java word 内容读取

    1.添加依赖关系(网上好多帖子没有写依赖,害我找半天) <dependency>            <groupId>org.apache.poi</groupId& ...

  9. ssh复制公钥成功后仍需输入密码

    1,网上说权限问题 登录流程: 被登录机器的文件权限: //用户权限 chmod 700 /home/username //.ssh文件夹权限 chmod 700 ~/.ssh/ // ~/.ssh/ ...

  10. ROM和RAM的内存详细说明

    1.首先是ROM 的读取是需要提前两个地址的读取,所以要想读取0地址的数据,你需要给地址是2 2.关于宽度,深度的计算 假设我们要存取如下取模的数据,该模的设置口语描述为:这是显示的2个字节,其中一个 ...