svg を使用して vue2 で円形のプログレス バー コンポーネントを開発する方法を段階的に説明します。

この記事では、svg を使用して円形のプログレス バー vue2 コンポーネントを開発する方法について詳しく紹介します。皆様のお役に立てれば幸いです。

通常の長方形のプログレスバーは div css で簡単に実装できますが、円形のプログレスバーは少し面倒です。もちろん、background 属性を使用して div css を使用することもできます。ブラインドメソッドとしてcss3変数で実装することもできますが、互換性や制御が複雑で面倒なので、最良の効果を得るにはsvgを使用する必要があります。 [関連する推奨事項: "vue.js チュートリアル "]

Kangkang の最終的な効果から始めましょう:

自分自身を開発するコンポーネントの利点は、サイズ、色、厚さ、アニメーションなどを任意に拡張できることです。

<script>
export default {
  name: "CircleProgress",
  data() {
    return {     
      now: 0
    };
  },
  props: {
    // 进度值
    value: {
      type: [String, Number],
      default: 0
    },
    // 尺寸
    size: {
      type: [String, Number],
      default: 120
    },
    // 边框粗细
    strokeWidth:{
      type: [String, Number],
      default: 10
    },
    // 进度条颜色
    color: {
      type: String,
      default: "rgba(153,202,251,1)"
    },
    // 动画执行时间
    duration:{
      type: [String, Number],
      default: 1000
    }
  },
  computed: {
    percentage() {
      return this.value;
    },
    countDown() {
      return this.now;
    },
    // 圆心x轴坐标
    cx() {
      return this.size / 2;
    },
    // 圆心y轴坐标  
    cy() {
      return this.size / 2;
    },
    // 半径
    radius() {
      return (this.size - this.strokeWidth) / 2;
    },
    // 圆周长
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    // 进度长度  
    progress() {
      return (1 - this.now / 100) * this.circumference;
    }
  },
};
</script>

上記のコメントに基づいて、誰もがどのように開発するかを大まかに推測できると思います。私たちのコンポーネントは、サイズ、境界線の太さ、プログレスバーの色、0 からのレンダリングにかかる​​時間を設定できます。 . 進行状況の値のアニメーション期間。算出された属性については、後からSVGを描画する際に、コメントの一対一対応から目的を把握することは難しくありません。

2. 構造とスタイル

<template>
  <div class="circle-main">
    <div class="circle-main-box" :style="[{ &#39;width&#39;: size+&#39;px&#39;,&#39;height&#39;: size+&#39;px&#39;}]">
      <svg :width="size" :height="size" class="circle">
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          stroke="#EEEEEE"
          :stroke-width="strokeWidth"
        />
        <circle
          :r="radius"
          :cx="cx"
          :cy="cy"
          fill="transparent"
          :stroke="color"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="progress"
        />
      </svg>
      <span class="count-num" :style="[{ &#39;font-size&#39;: size*.3+&#39;px&#39;}]">{{countDown}}%</span>
    </div>
  </div>
</template>

実際、これは非常に簡単で、svg を使用して 2 つのリングを記述するだけです。最初のリングは下の灰色の円で、 2 つ目はプログレス バーで、サイズと中心半径の境界線の色を設定し、塗りつぶしの色を同じ名前に変更する必要があります。残りの 2 つの項目ストローク-dasharray とストローク-ダシュオフセットの書き込みが完了しました。 SVG プログレス バーの変更の核心は、今計算されたこれら 2 つの属性、リングの円周と現在の進行状況の長さです。現在の進行状況の値を使用して、現在の長さのパーセンテージを計算し、円形の進行状況バーの変化を実現します。これは非常に簡単です。

その後、CSS を記述する必要があります。SVG リングは私たちが考えているように 0 度から開始せず、90 度オフセットされているため、CSS を記述する必要があります。

つまり、CSS を使用して 90 度回転する必要があります。

.circle {
  transform: rotate(-90deg);
}

次に、テキストとメインフレームのいくつかのスタイルを記述します。

.circle-main-box {
  position: relative;
  display: block;
  margin: 0 auto;
}
.count-num {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  align-items: center;
  justify-content: center;
  display: flex;
  font-family: fantasy;
  font-size: 30px;
  color: #333;
  user-select: none;
}

#このようにして、静的な円形の進行状況バーが表示されます。

3. アニメーションと使用

<script>
export default {
  name: "CircleProgress",
  // ...
  mounted() {
    this.run();
  },
  methods: {
    run() {
      if (this.value == 0) return;
      let t = this.duration / this.value
      this.timer = setInterval(() => {
        if (this.now >= this.value) {
          return clearInterval(this.timer);
        }
        this.now++;
      }, t);
    }
  }
};

各数量 1 から現在のアニメーション実行時間と現在の値までの実行時間を計算し、それを実行します。 setInterval 、進行状況の値に達するまで。いよいよ、このコンポーネントの使用を開始します~~

<div id="app">
    <CircleProgress :value="60" :size="150" :color="&#39;#d36&#39;"  :duration="3000" />
</div>

結論

学習に失敗していませんか?次のことができます。将来的には同様のことが考えられますか? Completion のようなローダーに関する新しいアイデアはありますか? 円をベースにしていますが、他のグラフィックスはまだ怖いですか? どれだけ見たり話したりしても、試してすぐに行動する方が良いです。来てください。さあ、皆さん、さあ~~

プログラミング関連の知識については、プログラミング ビデオ

をご覧ください。 ！

以上がsvg を使用して vue2 で円形のプログレス バー コンポーネントを開発する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。