<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box{
width: 1280px;
height: 720px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -360px;
margin-left: -640px;
box-shadow: 0 0 10px rgba(0,0,0,.5);
}
#boxInner{
width: 100%;
height: 100%;
position: relative;
}
#divBox{
width: 200px;
height: 200px;
position: absolute;
top: 64px;
left: 128px;
background-color: olivedrab;
}
.inner{
width: 100%;
height: 100%;
position: relative;
}
.bot{
width: 14px;
height: 14px;
background-color: red;
position: absolute;
}
.bot1{
left: -14px;
top: -14px;
}
.bot2{
left: 50%;
margin-left: -7px;
top: -14px;
}
.bot3{
top: -14px;
right: -14px;
}
.bot4{
top: 50%;
margin-top: -7px;
left: -14px;
}
.bot5{
top: 50%;
margin-top: -7px;
right: -14px;
}
.bot6{
left: -14px;
bottom: -14px;
}
.bot7{
left: 50%;
margin-left: -7px;
bottom: -14px;
}
.bot8{
right: -14px;
bottom: -14px;
}
.rotate{
width: 14px;
height: 14px;
background-color: black;
position: absolute;
top: 50%;
margin-top: -7px;
right: -30px;
}
</style></head>
<body>
<div id="box">
<div id="boxInner">
<div id="divBox">
<div class="inner">
<div id="tl" class="bot bot1"></div>
<div id="tm" class="bot bot2"></div>
<div id="tr" class="bot bot3"></div>
<div id="ml" class="bot bot4"></div>
<div id="mr" class="bot bot5"></div>
<div id="bl" class="bot bot6"></div>
<div id="bm" class="bot bot7"></div>
<div id="br" class="bot bot8"></div>
<div class="rotate"></div>
</div>
</div>
</div>
</div>
<script>
$(function(){$('#divBox').on('mousedown',function(e){e.stopPropagation();
e.preventDefault()
$(this).css('cursor','move');
let isMove = true;
let x = e.clientX;
let y = e.clientY;
let l = parseInt($(this).css('left'));
let t = parseInt($(this).css('top'));
let moveEvent = null;
$('#box').on('mousemove',function(ev){
moveEvent = ev;
if(!isMove){return}
ev.stopPropagation()
ev.preventDefault();
let nx = ev.clientX;
let ny = ev.clientY;
let nl = nx-(x-l);
let nt = ny-(y-t);
$('#divBox').css({
top: nt+'px',
left: nl+'px'
})
})
$('#box').on('mouseup',function(event){event.preventDefault();
isMove = false;
$('#divBox').css('cursor','auto');
$(this).off(event)
$(this).off(moveEvent)
return false;
})
})
$('.bot').on('mousedown',function(e){e.stopPropagation()
e.preventDefault();
let isScale = true;
let rect = document.getElementById('divBox').getBoundingClientRect();
let oldWidth = $('#divBox').width();
let oldHeight = $('#divBox').height();
let oldX = e.clientX;
let oldY = e.clientY;
let oldLeft = parseInt($('#divBox').css('left'));
let oldTop = parseInt($('#divBox').css('top'));
let centerX = rect.left+rect.width/2;
let centerY = rect.top + rect.height / 2;
let moveEvent = null;
let w,h,t,l;
let ceterIns = GetDistance(centerX,centerY,oldX,oldY);
let angle = parseFloat($('#divBox')[0].dataset.angle) || 0;
let jd = (angle*180/Math.PI)<0?360+(angle*180/Math.PI):(angle*180/Math.PI);
let hd = jd*Math.PI/180;
let _id = $(this).attr('id');
$('#box').on('mousemove',function(ev){
moveEvent = ev;
if(!isScale){return}
let newIns = GetDistance(centerX,centerY,ev.clientX,ev.clientY);
let ins = GetDistance(oldX,oldY,ev.clientX,ev.clientY)
let isScaleBig = (newIns-ceterIns>=0)?true:false;// 判断放大还是放大
let dx = isScaleBig?ins:-ins;
switch (_id){
case 'tl':
var radioHd = 45*Math.PI/180;
var dxx = dx*Math.sin(radioHd);
var dl = dxx/2*(Math.sin(hd)-Math.cos(hd)-1);
var dh = dxx/2*(Math.cos(hd)+Math.sin(hd)+1);
w = oldWidth+dxx;
h = oldHeight+dxx;
l = oldLeft+dl;
t = oldTop-dh;
break;
case 'tm':
var dh = dx-((dx/2)-(dx/2)*Math.cos(hd));
var dl = ((dx/2)*Math.sin(hd));
w = oldWidth;
h = oldHeight+dx;
l = oldLeft+dl;
t = oldTop-dh
break;
case 'tr':
var radioHd = 45*Math.PI/180;
var dxx = dx*Math.sin(radioHd);
var dh = dxx/2*(Math.cos(hd)-Math.sin(hd)+1);
var dl = dxx/2*(Math.sin(hd)+Math.cos(hd)-1);
w = oldWidth+dxx;
h = oldHeight+dxx;
l = oldLeft+dl;
t = oldTop-dh;
break;
case 'ml':
var dh = (dx/2)*Math.sin(hd);
var dl = dx-(dx/2-(dx/2)*Math.cos(hd));
w = oldWidth+ dx;
h = oldHeight;
l = oldLeft-dl;
t = oldTop- dh;
break;
case 'mr':
var dh = (dx/2)*Math.sin(hd);
var dl = (dx/2)-((dx/2)*Math.cos(hd));
w = oldWidth+ dx;
h = oldHeight;
l = oldLeft-dl;
t = oldTop+ dh;
break;
case 'bl':
var radioHd = 45*Math.PI/180;
var dxx = dx*Math.sin(radioHd);
var dl = dxx/2*(Math.sin(hd)+Math.cos(hd)+1);
var dh = dxx/2*(Math.sin(hd)-Math.cos(hd)+1);
w = oldWidth+dxx;
h = oldHeight+dxx;
l = oldLeft-dl;
t = oldTop-dh;
break;
case 'bm':
var dh = (dx/2)-(dx/2)*Math.cos(hd);
var dl = ((dx/2)*Math.sin(hd));
w = oldWidth;
h = oldHeight+dx;
l = oldLeft-dl;
t = oldTop- dh;
break;
case 'br':
var radioHd = 45*Math.PI/180;
var dxx = dx*Math.sin(radioHd);
var dl = dxx/2*(Math.sin(hd)-Math.cos(hd)+1);
var dh = dxx/2*(Math.sin(hd)+Math.cos(hd)-1);
w = oldWidth+dxx;
h = oldHeight+dxx;
l = oldLeft-dl;
t = oldTop+dh;
break;
default:break;
}
$('#divBox').css({
top: t+'px',
left: l+'px',
width: w+'px',
height: h+'px'
})
})
$('#box').on('mouseup',function(event){event.preventDefault();
isScale = false;
$(this).off(event);
$(this).off(moveEvent);
return false;
})
})
$('.rotate').on('mousedown',function(e){e.stopPropagation()
e.preventDefault();
let rect = document.getElementById('divBox').getBoundingClientRect();
let centerX = rect.left+rect.width/2;
let centerY = rect.top + rect.height / 2;
let isMove = true;
$('#divBox')[0].dataset.centerX = centerX;
$('#divBox')[0].dataset.centerY = centerY;
$('#divBox')[0].dataset.angle = getDragAngle(e);
$('#box').on('mousemove',function(ev){
moveEvent = ev;
if(!isMove){return}
let angle = getDragAngle(ev);
// let jd = angle*180/Math.PI;
// console.log(jd)
$('#divBox').css({transform: `rotate(${angle}rad)`
})
})
$('#box').on('mouseup',function(event){event.preventDefault();
isMove = false;
$('#divBox')[0].dataset.angle = getDragAngle(event);
$(this).off(event)
$(this).off(moveEvent)
return false;
})
})
function GetDistance(lat1, lng1, lat2, lng2){dx = Math.abs(lat1 - lat2);
dy = Math.abs(lng1 - lng2);
var dis = Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
return parseInt(dis);
}
function getDragAngle(event){var startAngle = parseFloat($('#divBox')[0].dataset.angle) || 0;
var center = {x: parseFloat($('#divBox')[0].dataset.centerX) || 0,
y: parseFloat($('#divBox')[0].dataset.centerY) || 0,
};
var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);
return angle - startAngle;
}
})
</script></body>
</html>