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