正文
js css3 固定点拖拽旋转
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、直接上效果图：
然后是代码：
一共两种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.box {
width: 200px;
height:100px;
background: #cccccc;
position: absolute;
top: 30%;
left: 40%;
transform-origin: 50% 50% 0;
}
</style>
</head>
<body>
<div id="box" class="box"></div> <script> // 第一种
var isMove = false;
$('#box').mousedown(function (event) {
const element = event.target;
const rect = element.getBoundingClientRect();
element.dataset.centerX = rect.left + rect.width / 2;
element.dataset.centerY = rect.top + rect.height / 2;
element.dataset.angle = getDragAngle(event);
isMove = true;
}); $('#box').mousemove(function (event) {
if (isMove) {
var angle = getDragAngle(event);
event.target.style.transform = 'rotate(' + angle + 'rad)';
}
}); $('#box').mouseup(function (event) {
isMove = false;
event.target.dataset.angle = getDragAngle(event);
}); function getDragAngle(event) {
var element = event.target;
var startAngle = parseFloat(element.dataset.angle) || 0;
var center = {
x: parseFloat(element.dataset.centerX) || 0,
y: parseFloat(element.dataset.centerY) || 0,
};
var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);
return angle - startAngle;
}
// 第二种
// $(document).on('mousemove',function(e){
// var x = e.clientX;
// var y = e.clientY;
// var origin = {x:950,y:190} // 先手动指定当前中心点，也可以根据当前元素的left+width/2 的到x top+height/2 得到y值// // 计算出当前鼠标相对于元素中心点的坐标
// x = x - origin.x; // 因为x大于origin.x 是在y轴右边，直接减就行了
// y = origin.y - y;// 但是y如果要在x轴上方，它是比origin.y要小的，所以这里就需要反过来// // 然后计算就可以了
// var ele = document.getElementById('box')
// var deg = Math.atan2(y, x) / Math.PI * 180;
// ele.style.transform = 'rotate('+ -deg +'deg)'
// }); </script></body>
</html>
二、固定4个顶点
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
* {
user-select: none;
}
.box {
width: 200px;
height:100px;
background: #cccccc;
position: relative;
top: 30%;
left: 40%;
transform-origin: 50% 50% 0;
margin-top: 15%;
} .dot {
position: absolute;
width: 20px;
height: 20px;
background-color: #f60;
} .dot1 {
top: -10px;
left: -10px;
} .dot2 {
top: -10px;
right: -10px;
} .dot3 {
bottom: -10px;
right: -10px;
} .dot4 {
bottom: -10px;
left: -10px;
}
</style>
</head>
<body>
<div id="box" class="box">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
</div> <script> // 第一种
var isMove = false;
$('.dot').mousedown(function (event) {
const element = $('#box')[0]
const rect = element.getBoundingClientRect();
element.dataset.centerX = rect.left + rect.width / 2;
element.dataset.centerY = rect.top + rect.height / 2;
element.dataset.angle = getDragAngle(event);
isMove = true;
}); $(document).mousemove(function (event) {
if (isMove) {
var angle = getDragAngle(event);
$('#box')[0].style.transform = 'rotate(' + angle + 'rad)';
}
}); $(document).mouseup(function (event) {
if (isMove) {
isMove = false;
$('#box')[0].dataset.angle = getDragAngle(event);
}
}); function getDragAngle(event) {
var element = $('#box')[0];
var startAngle = parseFloat(element.dataset.angle) || 0;
var center = {
x: parseFloat(element.dataset.centerX) || 0,
y: parseFloat(element.dataset.centerY) || 0,
};
var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);
return angle - startAngle;
}
</script></body>
</html>
