Vue.js SVG로 원형 차트 타이머 만들기

<template>
  <div class="pieWp">
    <svg width="100%" height="100%" viewBox="-1 -1 2 2" class="donut">
      <!--背景-->
      <circle cx="0" cy="0" r="1" fill="#dddddd" />
      <path :d=calc :fill=color ></path>
    </svg>
    <p>{{nowTime}}</p>
  </div>
</template>

<style lang="stylus">
  .donut
    transform rotate(-90deg)
</style>

<script>
  import { TweenMax } from 'greensock';
  export default {
    data(){
      return {
        time: 6,
        percent:1,
        color: 'red',
        startX:1,
        startY:0,
        currentPercent:0
      }
    },
    methods: {
      getPieVal(per){
        const x = Math.cos(2 * Math.PI * per);
        const y = Math.sin(2 * Math.PI * per);
        return [x, y];
      },
      start(){
        TweenMax.to(this.$data, this.time, {
          currentPercent : this.$data.percent,
          onComplete:this.complete,
          ease: Power0.easeNone
        });
      },
      complete(){
        alert("Finish")
      }
    },
    computed : {
      calc(){
        const [endX, endY] = this.getPieVal(this.$data.currentPercent);
        const largeArcFlag = this.$data.currentPercent > .5 ? 1 : 0;
        const pathData = [
          `M ${this.$data.startX} ${this.$data.startY}`,
          `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`,
          `L 0 0`,
        ].join(' ');
        return pathData;
      },
      nowTime(){
        return Math.ceil(this.$data.time - this.$data.time * this.$data.currentPercent)
      }
    },
    mounted(){
      setTimeout(()=>{
        this.start()
      },100);
    }
  }
</script>

SVG의 Path 태그는 이해하기 어렵습니다.

Canvas로 작성하는 편이 어느 쪽인가라고 하면 직관적으로 조작할 수 있을 것 같습니다.

이쪽을 개조한 인포그래픽 사이트등에서 잡을 것 같은 그래프판도 작성했으므로,

기회가 있으면 소개합니다.

아래 기사를 참고했습니다.

h tps : //는 c r의 온. 코 m / 아시 MP