linkline.js 5.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. //创建元素连接线。必须依赖jquery组件。生成的连接线由3部分组件包括第一段连接线(它负责与源元素连接)、第二段连接线(它负责与第一段连接线和连接点连接)、连接点(它负责与目标元素连接,但不是必须的。它没有连接点时,由第二段连接线直接与目标元素连接)
  2. //参数
  3. // $ele:连接线的显示容器对象
  4. // opt:创建参数对象{}
  5. // x: int。第一段连接线相对显示容器的left位置。单位为px,默认为200。
  6. // y: int。第一段连接线相对显示容器的top位置。单位为px,默认为100。
  7. // h: int。第一段连接线长度。单位为px,默认为100。
  8. // color: string。所有连接线颜色,默认为"red"。
  9. // rotate: int。第一段连接线旋转角度。支持顺时针(正数)和逆时针(负数),默认为20度。
  10. // weight: int。连接线粗细。单位为px,默认为1px。
  11. // line2Width: int。第二段连接线长度。单位为px,默认为第一段长度一半。
  12. // endpointSize: int。连接点大小。单位为px。小于等于0时将不显示连接点。
  13. // endpointColor: string。连接点颜色,默认为连接线颜色。当endpointSize>0时生效。
  14. //方法
  15. // new: 实例化。返回连接线对象。
  16. // Hide(): 隐藏并销毁连接线。
  17. //属性
  18. // linkline1: 第一段连接线jquery对象。为null表示连接线生成失败。
  19. // linkline2: 第一段连接线jquery对象。。为null表示连接线生成失败。
  20. // endpoint: 连接点jquery对象。为null表示没有连接点。
  21. // zIndex: 只读。
  22. // id: 只读。
  23. //调用实例参考
  24. // var exmpline=new linkline($("body"),{});
  25. // var line1=new linkline($("body"),{x:200,y:100,h:200,line2Width:20,color:"#999",rotate:25,weight:1,endpointSize:10,endpointColor:"#999"});
  26. function linkline($ele, opt) {
  27. this.opt = $.extend({
  28. x: 200,
  29. y: 100,
  30. h: 100,
  31. color: "red",
  32. line2Width: 0,
  33. rotate: 20,
  34. weight: 1,
  35. endpointSize: 0,
  36. endpointColor: "red"
  37. }, opt);
  38. this.zIndex = (new Date().getTime() + "").substring(3, 13) * 1;
  39. this.id = this.opt.x + this.opt.y + this.opt.h + this.opt.line2Width + this.opt.rotate;
  40. this.linkline1 = null;
  41. this.linkline2 = null;
  42. this.endpoint = null;
  43. this.create = function() {
  44. if ($("#linkline_" + this.id + "_1").length > 0) {
  45. return false;
  46. }
  47. var line1 = "<div id='linkline_" + this.id + "_1' style='position:absolute;height:" + this.opt.h + "px;left:" + this.opt.x + "px;top:" + this.opt.y + "px;width:" + this.opt.weight + "px;background-color:" + this.opt.color + ";transform:rotate(" + this.opt.rotate + "deg);z-index:" + this.zIndex + ";'></div>";
  48. $ele.append(line1);
  49. this.linkline1 = $("#linkline_" + this.id + "_1");
  50. var addWeight = this.opt.weight / 2;
  51. var line2xy = rotatePoint({
  52. x: this.opt.x + addWeight,
  53. y: this.opt.y - addWeight
  54. }, {
  55. x: this.opt.x + addWeight,
  56. y: this.opt.y - addWeight + this.opt.h / 2
  57. }, this.opt.rotate);
  58. var line2W = this.opt.line2Width > 0 ? this.opt.line2Width : this.opt.h / 2;
  59. var line2Left = this.opt.rotate >= 0 ? line2xy.x : line2xy.x - line2W;
  60. var line2 = "<div id='linkline_" + this.id + "_2' style='position:absolute;height:" + this.opt.weight + "px;width:" + line2W + "px;left:" + line2Left + "px;top:" + line2xy.y + "px;background-color:" + this.opt.color + ";z-index:" + this.zIndex + ";'>";
  61. if (this.opt.endpointSize > 0) {
  62. var endpointOffset = this.opt.endpointSize / 2 - 1 - (addWeight >= 1 ? addWeight : 0);
  63. if (this.opt.endpointColor == "") this.opt.endpointColor = this.opt.color;
  64. line2 += "<i class='fa fa-circle' style='left: " + (this.opt.rotate >= 0 ? line2W : 0) + "px;position: absolute;top: -" + endpointOffset + "px;color:" + this.opt.endpointColor + ";font-size: " + this.opt.endpointSize + "px;'></i>";
  65. }
  66. line2 += "</div>";
  67. $ele.append(line2);
  68. this.linkline2 = $("#linkline_" + this.id + "_2");
  69. this.endpoint = $("#linkline_" + this.id + "_2 i");
  70. return true;
  71. }
  72. this.Hide = function() {
  73. $("#linkline_" + this.id + "_1").remove();
  74. $("#linkline_" + this.id + "_2").remove();
  75. return true;
  76. }
  77. // ptSrc: 圆上某点(初始点);
  78. // ptRotationCenter: 圆心点;
  79. // angle: 旋转角度° -- [angle * M_PI / 180]:将角度换算为弧度
  80. // 【注意】angle 逆时针为正,顺时针为负
  81. function rotatePoint(ptSrc, ptRotationCenter, angle) {
  82. var a = ptRotationCenter.x
  83. var b = ptRotationCenter.y
  84. var x0 = ptSrc.x
  85. var y0 = ptSrc.y
  86. var rx = a + (x0 - a) * Math.cos(angle * Math.PI / 180) - (y0 - b) * Math.sin(angle * Math.PI / 180);
  87. var ry = b + (x0 - a) * Math.sin(angle * Math.PI / 180) + (y0 - b) * Math.cos(angle * Math.PI / 180);
  88. var json = {
  89. x: rx,
  90. y: ry
  91. }
  92. return json;
  93. }
  94. this.create();
  95. }