vue中我需要实现这么一个功能,点击svg圆形生成一个新的svg并用线相连

Question

问题描述

我需要实现这么一个功能,点击svg圆形生成一个新的svg并用线相连

问题出现的环境背景及自己尝试过哪些方法

1.点击生成一个新的圆,怎么让他相连的线不变形,x y我可以获得;
2.怎么监听它超出屏幕,我动态生成需要给限制; (这个我已经解决.判断他的x y减去个圆大概位置是不小于10,不大于90)
3.动态生成的圆怎么不让他们重叠;

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<svg class="svg" ref="svg" :viewBox="viewX,viewY,viewW,viewH">
  <!--绘制圆,rx,ry x y方向半径,cx y坐标点-->
  <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)
    }  
},

你期待的结果是什么？实际看到的错误信息又是什么？

类似细胞图,但区别是不是3D的

Answer 1

顺便求个,指定范围不重复随机数