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