Vue.js 円グラフタイマーを作る

Vue.js 円グラフタイマーを作る:

Vue.jsでちょっとしたゲームをつくっています。(Vueでつくるってどうなのという話はさておき)

制限時間内に何かをするという内容のゲームでして

制限時間が減少すると円グラフが増えていくようなタイマーを作成してみました。

完成イメージ


aaa_1_1.gif


ソースはこちらです。

<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> 
Codepenはこちら

※上記のコードをボタンでスタートするように変えてます。

See the Pen Vue Pie by AsaToBan (@AsaToBan) on CodePen.



SVGのPathタグは分かりづらいですね。

Canvasで作成するほうがどちらかというと直感的に操作できそうです。

こちらを改造したインフォグラフィックサイトなどでつかえそうなグラフ版も作成しましたので、

機会がありましたらご紹介します。

下記の記事を参考にしました。
https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936

コメント

このブログの人気の投稿

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2024-02-12 22:08:06 RSSフィード2024-02-12 22:00分まとめ(7件)