공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/JavaScript

javascript 원의 자취

serpiko 2017. 3. 20. 16:01

javascript로 만든 원의 자취 함수

원을 이용하여 애니메이션과 렌더링 작업에 사용했던 함수.

Result를 클릭하면 결과를 볼 수 있다.

 

 

script source)

<!DOCTYPE html>
<html>

  <head>
    <style>
      body {}

      #container {
        top: 10%;
        left: 10%;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        border-radius: 50%;
        position: absolute;
      }

      #pointer {
        position: absolute;
        top: 0;
        left: 150px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: black;
      }

    </style>
  </head>

  <body>
    <div id='container'>
      <div id='pointer'></div>
    </div>
    <script>
      var distance = 0;

      function circle($w_rad, $h_rad, $angle) {
        var temp_x = $w_rad * Math.cos($angle);
        var temp_y = $h_rad * Math.sin($angle);
        var point = new Object();
        point.x = temp_x;
        point.y = temp_y;
        return point;
      }
			
			// id: 움직일 엘리먼트 아이디
			// cx, cy: 원의 중심점
			// w_rad, h_rad: 원의 가로 세로 반지름
      function display($id, $cx, $cy, $w_rad, $h_rad) {
        const degree = distance-90; // 12시 방향부터 시작
        const radian = degree * Math.PI / 180;
        const point = circle($w_rad, $h_rad, radian);
        const x = Math.floor(point.x + $cx);
        const y = Math.floor(point.y + $cy);
				const pointer = document.querySelector(`#${$id}`);
				let pw = pointer.clientWidth/2; // 엘리먼트의 중심점x
				let ph = pointer.clientHeight/2; // 엘리먼트의 중심점y
        pointer.style.left = x - pw + "px";
        pointer.style.top = y - ph + "px";
        console.log(x, y);
      }
      setInterval(function() {
        display('pointer', 150, 150, 150, 150);
        distance += 5;
      }, 100);

    </script>
  </body>
</html>

 

 

아래 함수는 원안에 10개의 아이콘을 라디안으로 그리며 배치할때 사용하였다

script source)

/* --------------------------------------------------------
* circle, display
-----------------------------------------------------------*/
function circle($w_rad, $h_rad, $radian)
{
    var temp_x = $w_rad * Math.cos($radian);
    var temp_y = $h_rad * Math.sin($radian);
    var point = new Object();
    point.x = temp_x;
    point.y = temp_y;
    return point;
}

var nCount = 10;
function display($div, $cx, $cy, $w_rad, $h_rad)
{
    for(var i=0; i<nCount; i++)
    {
        var degree = 360 / nCount * i -90.5;
        var radian = degree * Math.PI / 180;
        var point = circle($w_rad, $h_rad, radian);
        var x = Math.floor(point.x + $cx);
        var y = Math.floor(point.y + $cy);

        var element = $($div + (i +1));
        element.css({ 'left': x, 'top': y });

        //var gap = element.find('h4').width()/2 - element.find('img').width()/2;
        //element.css('margin-left', -gap + 'px');
    }
}

display('#left_icon_box',145, 145, 175, 175);
저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

2017.07 자바스크립트 프레임워크 트렌드차트  (0) 2017.07.06
rgb를 16 진수로  (0) 2017.03.20
MakeChartDate : 차트 데이터를 클라이언트에서 생성합니다.  (0) 2017.02.22
ajax class - sendRequest-ajax.js  (0) 2016.12.02
javascript 클래스와 jquery prototype 클래스  (0) 2016.10.26
댓글