삼각함수 - 원 배치

by jinam yu

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div id="app">
  <div class="p-3">
    <div class="input-group">
      <span class="input-group-text">갯수</span>
      <input type="number" class="form-control" v-model="count" />
    </div>
    <div class="input-group mt-2">
      <span class="input-group-text">지름</span>
      <input type="number" class="form-control" v-model="radius"  />
    </div>
  </div>
  <div class="view">
  <div class="circle">
    <span v-for="(item, index) in items" :key="index" :style="{ transform: 'translate('+item.x+'px, '+item.y+'px)' }"></span>
  </div>    
  </div>

</div>

CSS

body {
  background-color: #f7f7f7;
}

.view {
  position: relative;
  height: 250px;
}

div.circle {
  position: absolute;
  left: 50%;
  top: 50%;  
}

div.circle span {
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  position: absolute;
  border-radius: 50%;
  background-color: #0d6efd;
}

Vue

new Vue({
  el: "#app",
  data: {
    /*
     * sin = 높이/빗변
     * cos = 밑변/빗변
     * tan = 높이/밑변
     */
    count:20,
    radius:100,

  },
  computed: {
  	items() {
    	const len = parseInt(this.count);
    	return Array(len).fill(0)
        .map((v, i) => {
          const step = ((2 * Math.PI) / len) * i;
          return {
            x: Math.cos(step) * this.radius,
            y: Math.sin(step) * this.radius,
          };
        })
    }
  }
})