0
Я пытаюсь повернуть объект вокруг центра при перемещении мыши, все идет идеально, но когда я впервые нажимаю на этот объект, чтобы повернуть его, положение меняется.Поверните объект с чистым javascript
var el, offsetTop, offsetLft, offsetWdt,offsetHit , mouseDown;
el = document.getElementById('switcher');
var offset = getOffset(el);
offsetTop = offset.top;
offsetLft = offset.left;
offsetWdt = el.offsetWidth;
offsetHit = el.offsetHeight;
mouseDown = false;
function mouse(evt) {
var center_x, center_y, mouse_x, mouse_y, radians, degree;
evt.preventDefault();
if (mouseDown == true) {
center_x = (offsetLft) + (offsetWdt/2);
center_y = (offsetTop) + (offsetHit/2);
mouse_x = evt.pageX;
mouse_y = evt.pageY;
radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
degree = (radians * (180/Math.PI) * -1) + 90;
el.style.webkitTransform = 'rotate(' + degree + 'deg)';
el.style.MozTransform = 'rotate(' + degree + 'deg)';
el.style.msTransform = 'rotate(' + degree + 'deg)';
el.style.OTransform = 'rotate(' + degree + 'deg)';
el.style.transform = 'rotate(' + degree + 'deg)';
}
}
el.addEventListener("mousedown", function() {
mouseDown = true;
el.addEventListener("mousemove", mouse, false);
}, false);
el.addEventListener("mouseup", function() {
mouseDown = false;
})
function getOffset(el) {
var _x = 0;
var _y = 0;
while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}.content {
width: 900px;
margin: 0 auto;
border: 1px solid #DA574A;
}
.container {
position: relative;
width: 25em;
height: 25em;
padding: 2.8em;
background-color: #ccc;
margin: 0 auto;
}
.circle-24, .circle-12, .center, #switcher {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
border-radius: 50%;
}
.circle-24 {
width: 20em;
height: 20em;
z-index: 2;
background-color: #fff;
}
.circle-12 {
width: 15em;
height: 15em;
z-index: 3;
background-color: #ff0;
}
.center {
width: 0.5em;
height: 0.5em;
z-index: 5;
background-color: red;
}
#switcher {
height: 300px;
width: 300px;
z-index: 4;
background-color: #d6dceb;
}
.rotator {
position: absolute;
width: 150px;
height: 2px;
left: 150px;
top: 150px;
}
.rotator .hand {
position: absolute;
cursor: pointer;
width: 110px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 40, 160, 0.12);
transition: .4s;
}
.rotator .pointer {
position: absolute;
content: "";
height: 40px;
width: 40px;
right: 0px;
bottom: -20px;
border-radius: 40px;
background-color: rgba(0, 40, 160, 0.12);
}
.circle-12 div, .circle-24 div {
width: 2em;
height: 2em;
background-color: #DA574A;
}<div class="content">
<div class="container">
<div id="switcher">
<div id="rotator" class="rotator">
<div class="hand"></div>
<div class="pointer"></div>
</div>
</div>
<div id="center" class="center"></div>
<div class='circle-12'></div>
<div class='circle-24'></div>
</div>
</div>Пожалуйста, обратите внимание на эту jsfiddle,
https://fiddle.jshell.net/zoom2u/3nxyfhe3/
Большое спасибо заранее.
Пожалуйста, включите соответствующий код в ваш вопрос. См. [Ask] и [mcve]. –
Мне очень жаль @FelixKling, я думал, что ссылки достаточно ... извините снова – Basel