矩阵代码

var oDiv = document.getElementById("feifei");

$(function () {

    var aSpan = $(‘.resizable‘);
    for (var i = 0; i < aSpan.length; i++) {
        dragFn(aSpan.eq(i).get(0));
    }


    $(‘.rotate-circle‘).mousedown(function (ev) {
        var oEv = ev || event;
        var oDiv = document.getElementById("feifei");
        var oldWidth = oDiv.offsetWidth;
        var oldHeight = oDiv.offsetHeight;
        var oldX = oEv.clientX;
        var oldY = oEv.clientY;
        var oldLeft = oDiv.offsetLeft;
        var oldTop = oDiv.offsetTop;
        var oldCenterX = oldLeft + oldWidth/2;
        var oldCenterY = oldTop + oldHeight/2;

        var obj = $(‘.feifei‘);

        var deg=eval(‘get‘+obj.css(‘transform‘));
        console.log(‘deg‘,deg);
        //构造getmatrix函数,返回上次旋转度数
        console.log(deg);
        document.onmousemove = function (ev) {
            var ov = ev || event;
            var newX = ov.clientX;
            var newY = ov.clientY;
            var VectorAB = [newX-oldCenterX,newY-oldCenterY];
            var VectorBC = [oldX-oldCenterX,oldY-oldCenterY];
            var Mul = VectorAB[0]*VectorBC[0] + VectorAB[1]*VectorBC[1];
            var ScalarAB = VectorAB[0]*VectorAB[0] + VectorAB[1]*VectorAB[1];
            var ScalarBC = VectorBC[0]*VectorBC[0] + VectorBC[1]*VectorBC[1];
            var MulScalar = Math.sqrt(ScalarAB) * Math.sqrt(ScalarBC);
            var angle = Math.acos(Mul/MulScalar)/Math.PI*180;
            if(deg==0){
                if(newX<oldCenterX){//鼠标在第二象限
                    obj.css({‘transform‘:‘rotate(‘+(deg-angle)+‘deg)‘});
                }
                if(newX>oldCenterX){//鼠标在第一象限
                    obj.css({‘transform‘:‘rotate(‘+(deg+angle)+‘deg)‘});
                }
            }else{
                console.log( Math.tan(angle*Math.PI/180));
                var y = Math.tan(angle*Math.PI/180) * newX;
                if(newY<y){//鼠标在第二象限
                    obj.css({‘transform‘:‘rotate(‘+(deg-angle)+‘deg)‘});
                }
                if(newY>y){//鼠标在第一象限
                    obj.css({‘transform‘:‘rotate(‘+(deg+angle)+‘deg)‘});
                }
            }

            /*if(newX===oldCenterX&&newY<oldCenterY){//鼠标在y轴负方向上
               angle = 0;
               obj.css({‘transform‘:‘rotate(‘+(angle)+‘deg)‘});
            }
            if(newX===oldCenterX&&newY>oldCenterY){//鼠标在y轴负方向上
                angle = 180;
                obj.css({‘transform‘:‘rotate(‘+(angle)+‘deg)‘});
            }

            if(newX>oldCenterX&&newY===oldCenterY){//鼠标在x轴正方向上
                angle = 90;
                obj.css({‘transform‘:‘rotate(‘+(angle)+‘deg)‘});
            }

            if(newX<oldCenterX&&newY===oldCenterY){//鼠标在x轴负方向
                angle = -90;
                obj.css({‘transform‘:‘rotate(‘+(angle)+‘deg)‘});
            }*/

        };

        document.onmouseup = function (ev) {
            document.onmousemove = null;
            var ov = ev || event;
            var newX = ov.clientX;
            var newY = ov.clientY;
            var VectorAB = [newX-oldCenterX,newY-oldCenterY];
            var VectorBC = [oldX-oldCenterX,oldY-oldCenterY];

            var Mul = VectorAB[0]*VectorBC[0] + VectorAB[1]*VectorBC[1];
            var ScalarAB = VectorAB[0]*VectorAB[0] + VectorAB[1]*VectorAB[1];
            var ScalarBC = VectorBC[0]*VectorBC[0] + VectorBC[1]*VectorBC[1];

            var MulScalar = Math.sqrt(ScalarAB) * Math.sqrt(ScalarBC);


            var angle = Math.acos(Mul/MulScalar)/Math.PI*180;
            if(newX<oldCenterX&&newY<oldCenterY){//鼠标在第二象限
                angle = - angle;
                //obj.css({‘transform‘:‘rotate(‘+(deg+angle)+‘deg)‘});
            }
            if(newX<oldCenterX&&newY>oldCenterY){//鼠标在第三象限
                angle = - angle;
                //obj.css({‘transform‘:‘rotate(‘+(deg+angle)+‘deg)‘});
            }
            if(newX>oldCenterX&&newY<oldCenterY){//鼠标在第一象限

                //obj.css({‘transform‘:‘rotate(‘+(deg+angle)+‘deg)‘});
            }
            if(newX>oldCenterX&&newY>oldCenterY){//鼠标在第四象限

                //obj.css({‘transform‘:‘rotate(‘+(deg+angle)+‘deg)‘});
            }
            if(newX===oldCenterX&&newY<oldCenterY){//鼠标在y轴负方向上
                angle = 0;

            }
            if(newX===oldCenterX&&newY>oldCenterY){//鼠标在y轴负方向上
                angle = -180;
            }

            if(newX>oldCenterX&&newY===oldCenterY){//鼠标在x轴正方向上
                angle = 90;

            }

            if(newX<oldCenterX&&newY===oldCenterY){//鼠标在x轴负方向
                angle = -90;

            }
            obj.css({‘transform‘:‘rotate(‘+(angle)+‘deg)‘});
            document.onmouseup = null;
        };
        return false;

    });
});


function getmatrix(a,b,c,d,e,f){
    var aa=Math.round(180*Math.asin(a)/ Math.PI);
    var bb=Math.round(180*Math.acos(b)/ Math.PI);
    var cc=Math.round(180*Math.asin(c)/ Math.PI);
    var dd=Math.round(180*Math.acos(d)/ Math.PI);
    var deg=0;
    if(aa==bb||-aa==bb){
        deg=dd;
    }else if(-aa+bb==180){
        deg=180+cc;
    }else if(aa+bb==180){
        deg=360-cc||360-dd;
    }

    return deg > 180 ? -360 + deg % 360 :  deg % 360 ;
}

function dragFn(obj) {
    console.log(obj);
    obj.onmousedown = function (ev) {
        var oEv = ev || event;

        var oldWidth = oDiv.offsetWidth;
        var oldHeight = oDiv.offsetHeight;
        var oldX = oEv.clientX;
        var oldY = oEv.clientY;
        var oldLeft = oDiv.offsetLeft;
        var oldTop = oDiv.offsetTop;

        document.onmousemove = function (ev) {
            var oEv = ev || event;
            var classname = obj.className;
            if (classname.indexOf(‘circle-nw‘)>-1) {
                oDiv.style.width = oldWidth - (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.height=oldHeight-(oEv.clientY-oldY)+‘px‘;
                oDiv.style.left = oldLeft + (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.top = oldTop + (oEv.clientY - oldY) + ‘px‘;
            }
            else if (classname.indexOf(‘circle-sw‘)>-1) {
                oDiv.style.width = oldWidth - (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.height=oldHeight+(oEv.clientY-oldY)+‘px‘;
                oDiv.style.left = oldLeft + (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + ‘px‘;
            }
            else if (classname.indexOf(‘circle-ne‘)>-1) {
                oDiv.style.width = oldWidth + (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.height = oldHeight - (oEv.clientY - oldY)+‘px‘;
                oDiv.style.right = oldLeft - (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.top = oldTop + (oEv.clientY - oldY) + ‘px‘;
            }
            else if (classname.indexOf(‘circle-se‘)>-1) {
                oDiv.style.width = oldWidth + (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.height = oldHeight + (oEv.clientY - oldY)+‘px‘;
                oDiv.style.right = oldLeft - (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + ‘px‘;
            }
            else if (classname.indexOf(‘line-n‘)>-1) {
                oDiv.style.height=oldHeight-(oEv.clientY-oldY)+‘px‘;
                oDiv.style.top = oldTop + (oEv.clientY - oldY) + ‘px‘;
            }
            else if (classname.indexOf(‘line-s‘)>-1) {
                oDiv.style.height = oldHeight + (oEv.clientY - oldY)+‘px‘;
                oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + ‘px‘;
            }
            else if (classname.indexOf(‘line-w‘)>-1) {
                oDiv.style.height = oldHeight + ‘px‘;
                oDiv.style.width = oldWidth - (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.left = oldLeft + (oEv.clientX - oldX) + ‘px‘;
            }
            else if (classname.indexOf(‘line-e‘)>-1) {
                oDiv.style.height = oldHeight + ‘px‘;
                oDiv.style.width = oldWidth + (oEv.clientX - oldX) + ‘px‘;
                oDiv.style.right = oldLeft - (oEv.clientX - oldX) + ‘px‘;
            }
        };

        document.onmouseup = function () {
            document.onmousemove = null;
        };
        return false;
    };
}

<meta charset="UTF-8">
<div class="feifei" id="feifei">
    <div class="element-box" style="">
        <div class="element-box-contents" style="width: 100%; height: 100%">

            <div class="element comp_image editable-image" style="
    background-size: cover;
    background-image: url(public/images/luopan_bg.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
"></div>
        </div>
    </div>

    <div class="eqc-select ng-isolate-scope" comp-resize="n,ne,e,se,s,sw,w,nw,r">
        <div class="rotate-circle"></div>
        <div class="rotate-line"></div>
        <div class="bar bar-m-line"></div>
        <div class="line-n line resizable" style="cursor: ns-resize; z-index: 3;">
            <div class="circle"></div>
        </div>
        <div class="line-e line resizable" style="cursor: ew-resize;">
            <div class="circle"></div>
        </div>
        <div class="line-s line resizable" style="cursor: ns-resize;">
            <div class="circle"></div>
        </div>
        <div class="line-w line resizable" style="cursor: ew-resize;">
            <div class="circle"></div>
        </div>
        <div class="circle-nw circle resizable" style="cursor: nwse-resize; z-index: 4111;"></div>
        <div class="circle-ne circle resizable" style="cursor: nesw-resize; z-index: 41111;"></div>
        <div class="circle-se circle resizable" style="cursor: nwse-resize;"></div>
        <div class="circle-sw circle resizable" style="cursor: nesw-resize;"></div>
    </div>
</div>

<script src="mytest/drag.js"></script>
<script src="mytest/drag2.js"></script>
<script>
    $(function(){

        $(‘.circle-nw‘).click(function () {


        });

        function getPos(obj) {
            var pos = $(obj).offset();
            return [pos.left, pos.top];
        }

        function moveto(x, y) {
            $img2.css({
                top: px(-y),
                left: px(-x)
            });
            $sel.css({
                top: px(y),
                left: px(x)
            });
        }

        function resize(w, h) {
            $sel.width(Math.round(w)).height(Math.round(h));
        }

        function refresh() {
            var c = Coords.getFixed();
            Coords.setPressed([c.x, c.y]);
            Coords.setCurrent([c.x2, c.y2]);
            updateVisible();
        }

        function update(select) {
            var c = Coords.getFixed();

            resize(c.w, c.h);
            moveto(c.x, c.y);
            if (options.shade) Shade.updateRaw(c);

            awake || show();

            if (select) {
                options.onSelect.call(api, unscale(c));
            } else {
                options.onChange.call(api, unscale(c));
            }
        }
    })

</script>

.eqc-select {
    z-index: 103;
    position: absolute;
    pointer-events: none;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.eqc-select .rotate-circle {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    top: -35px;
    left: 50%;
    margin-left: -6px;
    background-color: #44cb83;
    border: none;
    cursor: url(mouserotate.ico) 10 10,default;
}
.eqc-select .rotate-line {
    width: 2px;
    height: 31px;
    top: -25px;
    left: 50%;
    margin-left: -1px;
    background-color: #44cb83;
}
.eqc-select .bar-m-line {
    height: 100%;
    border-left: 1px dashed #44cb83;
    top: 0;
    left: 50%;
    margin-left: -.5px;
    display: none;
}
.eqc-select .line-n {
    width: 100%;
    height: 5px;
    top: -4px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFW…MAAAAGUExURQih7wAAAIpv3OoAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=) repeat-x bottom;
}
.eqc-select>div {
    position: absolute;
    pointer-events: auto;
}
.eqc-select .line {
    z-index: 2;
}
.eqc-select .line-e {
    width: 5px;
    height: 100%;
    top: 0;
    right: -4px;
    background: url(corssbg.png) repeat-y 0;
}
.eqc-select .line-e div {
    position: absolute;
    top: 50%;
    right: -2px;
    margin-top: -5px;
}
.eqc-select .circle {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 1px solid #59c7f9;
    border-radius: 12px;
}
.eqc-select .circle {
    z-index: 4;
}
.eqc-select .line-s {
    width: 100%;
    height: 5px;
    bottom: -4px;
    background: url(linebg.png) repeat-x top;
}
.eqc-select .line-s {
    width: 100%;
    height: 5px;
    bottom: -4px;
    background: url(linebg.png) repeat-x top;
}
.eqc-select .circle-nw {
    top: -5px;
    left: -5px;
}
.eqc-select .circle-ne {
    top: -5px;
    right: -6px;
}
.eqc-select .circle-sw {
    bottom: -5px;
    left: -5px;
}
.eqc-select .line-n {
    width: 100%;
    height: 5px;
    top: -4px;
    background: url(linebg.png) repeat-x bottom;
}
.eqc-select .line-n div {
    position: absolute;
    left: 50%;
    top: -2px;
    margin-left: -6px;
}
.eqc-select .line-w div {
    position: absolute;
    top: 50%;
    left: -1px;
    margin-top: -5px;
}
.eqc-select .line-s div {
    position: absolute;
    left: 50%;
    bottom: -2px;
    margin-left: -6px;
}
.eqc-select .line-w div {
    position: absolute;
    top: 50%;
    left: -1px;
    margin-top: -5px;
}
.eqc-select .circle-nw {
    top: -5px;
    left: -5px;
}
.eqc-select .circle-ne {
    top: -5px;
    right: -6px;
}
.eqc-select .circle-se {
    bottom: -5px;
    right: -6px;
}
.eqc-select .circle-sw {
    bottom: -5px;
    left: -5px;
}
.eqc-select .line-w {
    width: 5px;
    height: 100%;
    top: 0;
    left: -4px;
    background: url(corssbg.png) repeat-y 100%;
}
.eqc-select .line-s {
    width: 100%;
    height: 5px;
    bottom: -4px;
    background: url(linebg.png) repeat-x top;
}
.feifei{
    width: 223px;
    height: 413px;
    left: 366px;
    top: 188px;
    z-index: 12;
    transform: rotateZ(0deg);
    opacity: 1;
    position: absolute;
    border-width: 0px;
}
.comp_image{
    width:100%;
    height:100%;
}
.element-box{
    width: 100%; height: 100%;
    color: rgb(103, 103, 103); transform: none; text-align: left; border-width: 0px; border-style: solid;
    border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; margin-top: 0px; margin-bottom: 0px;
}