vue3 svg图像 的实例

1、先上个图,来自官方:

2、说明:图形包括三个组件,一个是多边形、一个圆、一个text(A,B,C,D,E,F...)。

3、图形定义:

复制代码
<svg width="200" height="200">
    <PolyGraph :stats="stats"></PolyGraph>
  </svg>

这个PolyGraph是一个自定义SFC:

复制代码
<script setup>
import AxisLabel from './AxisLabel.vue'
import { computed } from 'vue'
import { valueToPoint } from './util.js'

const props = defineProps({
  stats: Array
})

const points = computed(() => {
  const total = props.stats.length
  return props.stats
    .map((stat, i) => {
      const { x, y } = valueToPoint(stat.value, i, total)
      return `${x},${y}`
    })
    .join(' ')
})
</script>

<template>
  <g>
    <polygon :points="points"></polygon>
    <circle cx="100" cy="100" r="80"></circle>
    <axis-label
      v-for="(stat, index) in stats"
      :stat="stat"
      :index="index"
      :total="stats.length"
    >
    </axis-label>
  </g>
</template>

说明:定义一个props: stats是一个数组,points:方法是将值转为坐标,并且用' '空格连接,这个与SVG中的多边形的points是一致。

polygon:svg中显示多边形的关键词。

circle:svg中的圆,由圆心(cx,cy),及半径r组成。

axis-label:是一组text,是自定义SFC:

复制代码
<script setup>
import { computed } from 'vue'
import { valueToPoint } from './util.js'

const props = defineProps({
  stat: Object,
  index: Number,
  total: Number
})

const point = computed(() =>
  valueToPoint(+props.stat.value + 10, props.index, props.total)
)
</script>

<template>
  <text :x="point.x" :y="point.y">{{stat.label}}</text>
</template>

4、函数说明:

复制代码
export function valueToPoint(value, index, total) {
  const x = 0
  const y = -value * 0.8
  const angle = ((Math.PI * 2) / total) * index
  const cos = Math.cos(angle)
  const sin = Math.sin(angle)
  const tx = x * cos - y * sin + 100
  const ty = x * sin + y * cos + 100
  return {
    x: tx,
    y: ty
  }
}

说明:

angle:(Math.PI * 2) / total),将一个圆周,分成total分。

cos0:1

sin0:0

将value值,通过index ,来转换为对应的坐标,这个100与圆有关系,可以加以修改,这样就会平移不同的value。

5、最后官方地址:https://cn.vuejs.org/examples/#svg

可以亲自测试下,然后想一想。

相关推荐
vvilkim17 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码21 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言30 分钟前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K31 分钟前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_37 分钟前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧1 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.1 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码2 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试