scd_tools_go/service/static/js/linkline.js

    //创建元素连接线。必须依赖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();
    }