問題描述

我需要實(shí)現(xiàn)這么一個(gè)功能,點(diǎn)擊svg圓形生成一個(gè)新的svg并用線相連

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

1.點(diǎn)擊生成一個(gè)新的圓,怎么讓他相連的線不變形,x y我可以獲得;
2.怎么監(jiān)聽它超出屏幕,我動(dòng)態(tài)生成需要給限制; (這個(gè)我已經(jīng)解決.判斷他的x y減去個(gè)圓大概位置是不小于10,不大于90)
3.動(dòng)態(tài)生成的圓怎么不讓他們重疊;

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）

<svg class="svg" ref="svg" :viewBox="viewX,viewY,viewW,viewH">
  <!--繪制圓,rx,ry x y方向半徑,cx y坐標(biāo)點(diǎn)-->
  <circle v-for="(coord,index) in circleCoord" :cx="coord.cx + '%'" :cy="coord.cy + '%'" r="30" 
    ref="circle" :fill="coord.color" class='circle' :key='index' @click="newCircle(coord)">
    
  </circle>
</svg>

data () {
    return {
      viewX: 0,
      viewY: 0,
      viewW: 100 + '%',
      viewH: 100 + '%',
      circleCoord: [
        {cx: 50,cy: 50,color: "#" + Math.random().toString(16).slice(2,8)},
      ],
      cx: 50,cy: 50,
    }
},

methods: {
    newCircle (coord){
      console.log(coord);
      if(coord.cx > 10 && coord.cx < 90 && coord.cy > 10 && coord.cy < 90){
        
      }
      // console.log(this.$refs.svg.clientWidth);
      // console.log(this.$refs.circle.cx)
    }  
},

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

類似細(xì)胞圖,但區(qū)別是不是3D的