码迷,mamicode.com
首页 > 其他好文 > 详细

矩阵代码

时间:2018-01-29 19:12:48      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:top   length   asi   tle   splay   class   base64   display   image   


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;
}

  

矩阵代码

标签:top   length   asi   tle   splay   class   base64   display   image   

原文地址:https://www.cnblogs.com/ffjiang/p/8378689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!