【vue+svg实现多边形战士】

最新推荐文章于 2024-07-24 14:47:53 发布

Qiuc315

最新推荐文章于 2024-07-24 14:47:53 发布

阅读量415

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38690432/article/details/135391236

版权

效果图

<template>
  <div class="app-container">
    <svg width="200" height="200">
      <g>
        <polygon :points="points" />
        <circle cx="100" cy="100" r="80" />
      </g>
    </svg>
  </div>
</template>

<script>
function valueToPoint(value, index, total) {
  var x = 0
  var y = -value * 0.8
  var angle = ((Math.PI * 2) / total) * index
  var cos = Math.cos(angle)
  var sin = Math.sin(angle)
  var tx = x * cos - y * sin + 100
  var ty = x * sin + y * cos + 100
  return {
    x: tx,
    y: ty
  }
}
export default {
  data() {
    return {
      newLabel: '',
      stats: [
        { label: 'A', value: 90 },
        { label: 'B', value: 70 },
        { label: 'C', value: 100 },
        { label: 'D', value: 100 },
        { label: 'E', value: 100 }
      ]
    }
  },

  computed: {
    points() {
      var total = this.stats.length
      return this.stats
        .map(function(stat, i) {
          var point = valueToPoint(stat.value, i, total)
          return point.x + ',' + point.y
        })
        .join(' ')
    }
  }
}
</script>

<style lang="scss" scoped>

polygon {
  fill: #42b983;
  opacity: 0.75;
}

circle {
  fill: transparent;
  stroke: #999;
}

</style>