1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- //创建元素连接线。必须依赖jquery组件。生成的连接线由3部分组件包括第一段连接线(它负责与源元素连接)、第二段连接线(它负责与第一段连接线和连接点连接)、连接点(它负责与目标元素连接,但不是必须的。它没有连接点时,由第二段连接线直接与目标元素连接)
- //参数
- // $ele:连接线的显示容器对象
- // opt:创建参数对象{}
- // x: int。第一段连接线相对显示容器的left位置。单位为px,默认为200。
- // y: int。第一段连接线相对显示容器的top位置。单位为px,默认为100。
- // h: int。第一段连接线长度。单位为px,默认为100。
- // color: string。所有连接线颜色,默认为"red"。
- // rotate: int。第一段连接线旋转角度。支持顺时针(正数)和逆时针(负数),默认为20度。
- // weight: int。连接线粗细。单位为px,默认为1px。
- // line2Width: int。第二段连接线长度。单位为px,默认为第一段长度一半。
- // endpointSize: int。连接点大小。单位为px。小于等于0时将不显示连接点。
- // endpointColor: string。连接点颜色,默认为连接线颜色。当endpointSize>0时生效。
- //方法
- // new: 实例化。返回连接线对象。
- // Hide(): 隐藏并销毁连接线。
- //属性
- // linkline1: 第一段连接线jquery对象。为null表示连接线生成失败。
- // linkline2: 第一段连接线jquery对象。。为null表示连接线生成失败。
- // endpoint: 连接点jquery对象。为null表示没有连接点。
- // zIndex: 只读。
- // id: 只读。
- //调用实例参考
- // var exmpline=new linkline($("body"),{});
- // var line1=new linkline($("body"),{x:200,y:100,h:200,line2Width:20,color:"#999",rotate:25,weight:1,endpointSize:10,endpointColor:"#999"});
- function linkline($ele, opt) {
- this.opt = $.extend({
- x: 200,
- y: 100,
- h: 100,
- color: "red",
- line2Width: 0,
- rotate: 20,
- weight: 1,
- endpointSize: 0,
- endpointColor: "red"
- }, opt);
- this.zIndex = (new Date().getTime() + "").substring(3, 13) * 1;
- this.id = this.opt.x + this.opt.y + this.opt.h + this.opt.line2Width + this.opt.rotate;
- this.linkline1 = null;
- this.linkline2 = null;
- this.endpoint = null;
- this.create = function() {
- if ($("#linkline_" + this.id + "_1").length > 0) {
- return false;
- }
- 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>";
- $ele.append(line1);
- this.linkline1 = $("#linkline_" + this.id + "_1");
- var addWeight = this.opt.weight / 2;
- var line2xy = rotatePoint({
- x: this.opt.x + addWeight,
- y: this.opt.y - addWeight
- }, {
- x: this.opt.x + addWeight,
- y: this.opt.y - addWeight + this.opt.h / 2
- }, this.opt.rotate);
- var line2W = this.opt.line2Width > 0 ? this.opt.line2Width : this.opt.h / 2;
- var line2Left = this.opt.rotate >= 0 ? line2xy.x : line2xy.x - line2W;
- 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 + ";'>";
- if (this.opt.endpointSize > 0) {
- var endpointOffset = this.opt.endpointSize / 2 - 1 - (addWeight >= 1 ? addWeight : 0);
- if (this.opt.endpointColor == "") this.opt.endpointColor = this.opt.color;
- 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>";
- }
- line2 += "</div>";
- $ele.append(line2);
- this.linkline2 = $("#linkline_" + this.id + "_2");
- this.endpoint = $("#linkline_" + this.id + "_2 i");
- return true;
- }
- this.Hide = function() {
- $("#linkline_" + this.id + "_1").remove();
- $("#linkline_" + this.id + "_2").remove();
- return true;
- }
- // ptSrc: 圆上某点(初始点);
- // ptRotationCenter: 圆心点;
- // angle: 旋转角度° -- [angle * M_PI / 180]:将角度换算为弧度
- // 【注意】angle 逆时针为正,顺时针为负
- function rotatePoint(ptSrc, ptRotationCenter, angle) {
- var a = ptRotationCenter.x
- var b = ptRotationCenter.y
- var x0 = ptSrc.x
- var y0 = ptSrc.y
- var rx = a + (x0 - a) * Math.cos(angle * Math.PI / 180) - (y0 - b) * Math.sin(angle * Math.PI / 180);
- var ry = b + (x0 - a) * Math.sin(angle * Math.PI / 180) + (y0 - b) * Math.cos(angle * Math.PI / 180);
- var json = {
- x: rx,
- y: ry
- }
- return json;
- }
- this.create();
- }
|