https://www.youtube.com/watch?v=4IwcqHazkfY
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
Math.atan2() - JavaScript | MDN
The Math.atan2() function returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for Math.atan2(y,x).
developer.mozilla.org
html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<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>atan2의 기본 원리</title>
<link href="atan2_click.css" rel="stylesheet" type="text/css"/>
<script src="atan2_click.js" defer></script>
</head>
<body>
<!-- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 -->
<div id="val_atan2">000</div>
<div id="canv">
<span id="dot_0" data-x="0" data-y="0"></span>
<span id="dot_m" data-x="0" data-y="0"></span>
<div id="arrow"></div>
</div>
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
display:flex;flex-wrap:wrap;flex-direction:column;
justify-content:center;align-items:center;
width:100%;min-height:100vh;
background:#eee;}
#val_atan2{
width:100%;
margin:2rem 0; padding:1em;
background:#000;
text-align:center;font-size:2rem;font-weight:bold;color:yellow;}
/* */
#canv{
position:relative;
width:min(80%,1200px);
aspect-ratio:16/9;
margin-bottom:3rem;
background:#fff; border:1px solid #ccc;}
#canv::before,#canv::after{
content:'';display:block;position:absolute;
background:#ccc;
pointer-events:none;}
#canv::before{
top:50%;left:0;
width:100%;height:1px;}
#canv::after{
top:0;left:50%;
width:1px;height:100%;}
[id ^= "dot_"]{
display:block;position:absolute; z-index:10;
width:10px;height:10px;
left:calc(50% - 5px); top:calc(50% - 5px);
background:blue;
pointer-events:none;}
[id="dot_m"]{
width:15px;height:15px;
background:red;
box-shadow:
0px 0px .25rem rgb(255, 255, 255),
0px 0px .5rem rgb(255, 200, 200),
0px 0px 1rem rgb(255, 108, 108),
0px 0px 2rem rgba(255,0,0,1);}
#arrow{
position:absolute;
width:30px;height:180px;
left:calc(50% - 15px); top:calc(50% - 90px);
background:linear-gradient(to top,blue,red);
clip-path: polygon(0% 30%, 50% 0, 100% 30%, 50% 100%);
transform-origin:center bottom;
pointer-events:none;
}
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
const val_atan2 = document.getElementById('val_atan2');
const canv = document.getElementById('canv');
const dot_m = document.getElementById('dot_m');
const arrow = document.getElementById('arrow');
let obj = {
wid : "",
hei : "",
x : "",
y : "",
dataX : "",
dataY : ""
}
canv.addEventListener('click',display_dot);
function display_dot(e){
e = e || window.event;
obj.wid = canv.offsetWidth;
obj.hei = canv.offsetHeight;
obj.x = e.offsetX;
obj.y = e.offsetY;
obj.dataX = obj.x - (obj.wid / 2);
obj.dataY = obj.y - (obj.hei / 2);
dot_m.style.transform = `translate(${obj.dataX}px, ${obj.dataY}px)`;
set_xy();
display_atan2();
}
function set_xy(){
dot_m.dataset.x = obj.dataX;
dot_m.dataset.y = obj.dataY * -1;
}
function display_atan2(){
const deg = Math.atan2(dot_m.dataset.y, dot_m.dataset.x) * (180 / Math.PI);
val_atan2.innerHTML = `${Math.floor(deg)} deg`;
rotate_arrow(deg);
}
function rotate_arrow(deg){
const nowDeg = -(deg - 90);
console.log(nowDeg);
arrow.style.transform = `rotate(${nowDeg}deg)`;
}
|
cs |
0,0을 기준으로 클릭한 좌표의 atan2 값을 얻고 싶을 떈 :
const deg = Math.atan2(dot_m.dataset.y, dot_m.dataset.x) * (180 / Math.PI);
클릭한 좌표 방향으로 rotate 회전 시키고 싶을 땐 :
const nowDeg = -(deg - 90);
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| (JS)wheel로 가로 스크롤 및 scroll indicator 만들기 (2) | 2021.07.01 |
|---|---|
| sin구하기 (0) | 2021.06.30 |
| (CSS)cornic-gradient로 파이 그래프(원 그래프) 구현하기 (0) | 2021.06.30 |
| (vanilla JS) 체크박스 전체 선택 / 전체 해제 (3) (0) | 2021.06.30 |
| vanilla JS Slider 1.2 (바닐라 자바스크립트 슬라이드 1.2) (0) | 2021.06.18 |