因为要实现拖拽连线研究了一下基于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. SpringMVC POJO入参过程分析

    SpringMVC确定目标方法POJO类型的入参过程 1.确认一个key: (1).若目标方法的POJO类型的参数没有使用@ModelAttribute作为修饰,则key为POJO类名第一个字母的小写 ...

  2. @ResponseStatus注解作用

    @ResponseStatus注解有两种用法,一种是加载自定义异常类上,一种是加在目标方法中 这里我们说一下加在目标方法上的这种情况,注解中有两个参数,value属性设置异常的状态码,reaseon是 ...

  3. ZROI 19.08.01 生成函数方法

    写在前面:由于我数学基础不好,加上缺乏生成函数知识,所以这一下午我都处在掉线和非掉线的叠加态.而且我写\(\LaTeX\)很慢,所以笔记相当混乱而且不全面.说白了就是我太菜了听不懂. 1.一般生成函数 ...

  4. 阅读之SQL优化

    一.性能不理想的系统中除了一部分是因为应用程序的负载确实超过了服务器的实际处理能力外,更多的是因为系统存在大量的SQL语句需要优化. 为了获得稳定的执行性能,SQL语句越简单越好.对复杂的SQL语句, ...

  5. springCloud——Eureka、Ribbon理解

    一. 服务注册中心.服务提供者.服务消费者 如何通信? 客户端: 应用主类中配置@EnableDiscoveryClient application.properties中配置defaultZone指 ...

  6. 12. ClustrixDB 为容错和可用性分配磁盘空间

    集群必须包含足够的空闲磁盘空间,以便从节点或区域故障中自动恢复.要计算在发生故障后仍然允许ClustrixDB完全重新保护数据的情况下可以使用的最大磁盘空间量,可以使用以下公式: 最大磁盘利用率% = ...

  7. Zabbix4.x安装部署

    zabbix监控的重要性就不用再赘述了.直接上干货. 1.环境背景: Linux:CentOS 7.x, Database:MySQL zabbix server 和 zabbix mysql 安装在 ...

  8. maven项目解决pom.xml头部 http://maven.apache.org/xsd/maven-4.0.0.xsd报错的问题

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36611526/article/d ...

  9. java大文件上传

    上次遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误.查看了系统的配置文件没有看到文件大小限制,web.xml中sees ...

  10. #418 Div2 Problem B An express train to reveries (构造 || 全排列序列特性)

    题目链接:http://codeforces.com/contest/814/problem/B 题意 : 有一个给出两个含有 n 个数的序列 a 和 b, 这两个序列和(1~n)的其中一个全排列序列 ...