vue中SVG对图形视图的两种实现

左右对称

左右.png

<template>
  <div class="hello">
    <h3>左右并排</h3>
    <svg class="svg">
        <g>
          <circle :cx="first.cx" :cy="first.cy" :r="first.r"
          @click="circleClick"
          @mousedown="firstMousDown"
          @mouseup="firstMousUp"
          @mousemove="firstMousMove"
          class="first"
          fill= "#A4D3EE"></circle>
          <circle :key="index" v-for="(item, index) in rightends" :cx="item.cx" :cy="item.cy" :r="item.r"
          class="first"
          fill= "blue"></circle>
          <path :key="index*100+20" v-for="(reletion, index) in relations"
          :d="'M'+reletion.x1+','+reletion.y1+' '+'C'+reletion.x2+','+reletion.y2+' '+ reletion.x3+','+reletion.y3+' '+reletion.x4+','+reletion.y4"
          stroke="red" fill="none" :style="'stroke-width: '+width+'px;'" @mouseover="moseMovePath" @mouseout="moseOutPath"></path>
        </g>
    </svg>
    <!-- <div :key="index*100+20" v-for="(reletion, index) in relations">
      {{'M'+reletion.x1+','+reletion.y1+' '+'C'+reletion.x2+','+reletion.y2+' '+ reletion.x3+','+reletion.y3+' '+reletion.x4+','+reletion.y4}}
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'leftAndRight',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      width: 5,
      num: 0,
      relations: [],
      first: {},
      firstDx: 0,
      firstDy: 0,
      rightends: [],
      firstClickDown: {
        screenX: 0,
        screeny: 0
      },
      firstMouseState: false
    }
  },
  created () {
    this.first.cx = 400
    this.first.cy = 250
    this.first.r = 50
    let length = 5
    for (let i = 0; i < length; i++) {
      this.rightends.push({
        cx: 300 + this.first.cx,
        cy: 500 / (length + 1) * (i + 1),
        r: this.first.r * 0.7
      })
    }
    let that = this
    this.rightends.forEach(function (val) {
      that.relations.push({
        x1: that.first.cx + that.first.r,
        y1: that.first.cy,
        x2: that.first.cx + (val.cx - that.first.cx) / 2,
        y2: that.first.cy,
        x3: that.first.cx + (val.cx - that.first.cx) / 2,
        y3: val.cy,
        x4: val.cx - val.r,
        y4: val.cy
      })
    })
    console.log(this.relations)
  },
  methods: {
    circleClick () {
      console.log(222)
    },
    moseMovePath () {
      this.width = 10
    },
    firstMousDown (e) {
      console.log(e)
      console.log(this.first)
      this.firstClickDown.screenX = e.screenX
      this.firstClickDown.screenY = e.screenY
      this.firstMouseState = true
    },
    firstMousUp (e) {
      console.log(e)
      this.firstMouseState = false
    },
    firstMousMove (e) {
      if (this.firstMouseState) {
        let dx = e.screenX - this.firstClickDown.screenX
        let dY = e.screenY - this.firstClickDown.screenY
        this.first.cx = this.first.cx + dx
        this.first.cy = this.first.cy + dY
        this.endComputed()
        if (this.width > 10) {
          this.width--
        } else {
          this.width++
        }
        this.firstClickDown.screenX = e.screenX
        this.firstClickDown.screenY = e.screenY
      }
    },
    moseOutPath () {
      this.width = 4
    },
    endComputed () {
      let length = 5
      let that = this
      this.rightends.forEach((val, i) => {
        val.cx = 300 + this.first.cx
        val.cy = 500 / (length + 1) * (i + 1)
        val.r = this.first.r * 0.7
        that.relations[i].x1 = that.first.cx + that.first.r
        that.relations[i].y1 = that.first.cy
        that.relations[i].x2 = that.first.cx + (val.cx - that.first.cx) / 2
        that.relations[i].y2 = that.first.cy
        that.relations[i].x3 = that.first.cx + (val.cx - that.first.cx) / 2
        that.relations[i].y3 = val.cy
        that.relations[i].x4 = val.cx - val.r
        that.relations[i].y4 = val.cy
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .svg{
   height: 500px;
   width: 800px;
   border: 1px solid #ccc;
 }
 .first{
  stroke:red;
  stroke-width:2px
 }
 .relation-line{
   stroke:rgb(99,99,99);
   stroke-width:2px
 }
</style>

环形排列

<template>
  <div class="hello">
    <h3>环形排列</h3>
    <svg class="svg">
        <g>
          <circle :cx="first.cx" :cy="first.cy" :r="first.r"
          @click="circleClick"
          @mousedown="firstMousDown"
          @mouseup="firstMousUp"
          @mousemove="firstMousMove"
          class="first"
          fill= "#A4D3EE"></circle>
          <circle :key="index" v-for="(item, index) in ends" :cx="item.cx" :cy="item.cy" :r="item.r"
          class="first"
          fill= "blue"></circle>
          <line :key="index*100+100" v-for="(relation, index) in relations" :x1="relation.x1" :y1="relation.y1" :x2="relation.x2" :y2="relation.y2" style="stroke:rgb(99,99,99);stroke-width:2"/>
        </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      width: 5,
      num: 0,
      relations: [],
      first: {},
      firstDx: 0,
      firstDy: 0,
      ends: [],
      firstClickDown: {
        screenX: 0,
        screeny: 0
      },
      firstMouseState: false
    }
  },
  created () {
    this.first.cx = 400
    this.first.cy = 250
    this.first.r = 50
    let length = 8
    for (let i = 0; i < length; i++) {
      this.ends.push({
        cx: Math.sin((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cx,
        cy: Math.cos((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cy,
        r: this.first.r * 0.7
      })
    }
    let that = this
    this.ends.forEach(function (val, i) {
      that.relations.push({
        x1: Math.sin((Math.PI * 2 / length) * i) * that.first.r + that.first.cx,
        y1: Math.cos((Math.PI * 2 / length) * i) * that.first.r + that.first.cy,
        x2: Math.sin((Math.PI * 2 / length) * i) * val.r * -1 + val.cx,
        y2: Math.cos((Math.PI * 2 / length) * i) * val.r * -1 + val.cy
      })
    })
    console.log(this.ends)
  },
  methods: {
    circleClick () {
      console.log(222)
    },
    moseMovePath () {
      this.width = 10
    },
    firstMousDown (e) {
      console.log(e)
      console.log(this.first)
      this.firstClickDown.screenX = e.screenX
      this.firstClickDown.screenY = e.screenY
      this.firstMouseState = true
    },
    firstMousUp (e) {
      console.log(e)
      this.firstMouseState = false
    },
    firstMousMove (e) {
      if (this.firstMouseState) {
        let dx = e.screenX - this.firstClickDown.screenX
        let dY = e.screenY - this.firstClickDown.screenY
        this.first.cx = this.first.cx + dx
        this.first.cy = this.first.cy + dY
        this.endComputed()
        if (this.width > 10) {
          this.width--
        } else {
          this.width++
        }
        this.firstClickDown.screenX = e.screenX
        this.firstClickDown.screenY = e.screenY
      }
    },
    moseOutPath () {
      this.width = 4
    },
    endComputed () {
      let length = 8
      let that = this
      this.ends.forEach((val, i) => {
        val.cx = Math.sin((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cx
        val.cy = Math.cos((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cy
        val.r = this.first.r * 0.7
        that.relations[i].x1 = Math.sin((Math.PI * 2 / length) * i) * that.first.r + that.first.cx
        that.relations[i].y1 = Math.cos((Math.PI * 2 / length) * i) * that.first.r + that.first.cy
        that.relations[i].x2 = Math.sin((Math.PI * 2 / length) * i) * val.r * -1 + val.cx
        that.relations[i].y2 = Math.cos((Math.PI * 2 / length) * i) * val.r * -1 + val.cy
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .svg{
   height: 500px;
   width: 800px;
   border: 1px solid #ccc;
 }
 .first{
  stroke:red;
  stroke-width:2px
 }
 .relation-line{
   stroke:rgb(99,99,99);
   stroke-width:2px
 }
</style>