コレ(http://king-of-nowhere.hatenablog.com/entry/2013/11/28/084116)スゴイです。
全てDIV要素1つで1つの線なので、#(ID).remove() や、 #(ID).css({}) で、ID毎に、線を消したり、移動したりと重なりを考慮しなくてよいので大変便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<html> <head> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <style> .line{ position: absolute; border-top: solid 1px #FF4981; -moz-transform-origin:0% 0%; -webkit-transform-origin:0% 0%; transform-origin:0% 0%; float: left; } </style> <script> function DrawLine(params) { var param = jQuery.extend({ ID: 0 , x1: 0 , y1: 0 , x2: 0 , y2: 0 , line_style: "solid" , line_color: "#000" , line_width: "1px" , parent: $("body") , callback: function(){} }, params); if(param.x1 < param.x2){ sx = param.x1; sy = param.y1; ex = param.x2; ey = param.y2; } else { sx = param.x2; sy = param.y2; ex = param.x1; ey = param.y1; } var w = Math.sqrt(Math.pow((sx - ex) ,2) + Math.pow((sy - ey) ,2)); var base = Math.max(sx, ex) - Math.min(sx, ex); var tall = Math.max(sy, ey) - Math.min(sy, ey); var aTan = Math.atan(tall / base); var deg = aTan * 180 / Math.PI; deg = sy > ey ? 0 - deg: deg; var line = $("<div id=" + param.ID + "></div>") .addClass("line") .css({ "left": sx, "top": sy, "width": w, "transform": "rotate(" + deg + "deg)", "-webkit-transform": "rotate(" + deg + "deg)", "border-top-style": param.line_style, "border-top-color": param.line_color, "border-top-width": param.line_width, }); $(param.parent).append(line); } $(document).ready(function() { DrawLine({ ID: "L2SW11P0-L2SW12P0", x1: 0, y1: 0, x2: 100, y2: 100, }); DrawLine({ ID: "L2SW11P1-L2SW12P1", x1: 100, y1: 100, x2: 200, y2: 0, }); for(var i=0; i<=10; i++){ $('#L2SW11P1-L2SW12P1').css({"left": 100 - i*10}); alert(); } }); </script> </head> <body> </body> </html> |
Xの値が、開始と終了の大きさが反転していると、おかしな動作になったので、必ず開始が小さくなるように条件分岐を入れてみました。