仁王2技能图

来自仁王 wiki
Faxlok（讨论 | 贡献）2022年5月24日 (二) 19:11的版本 （测试技能图效果）
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

<head> 

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>svg</title>
 <link rel="stylesheet/less" type="text/css" href="css/skill.less"/>
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head> <body> 

     <svg id="taidao" height="600" width="600" viewbox="0 0 600,600">
       <template v-for="item in bigCircleConfig">
         <circle :cx="item.cx" :cy="item.cy" :r="item.r" :stroke="item.stroke" stroke-width="1"
                 :fill=item.fill></circle>
       </template>

       <template v-for="(item,index) in lineConfig">
         <line :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
               style="stroke:rgb(255,0,0);stroke-width:2"/>
       </template>

       <template v-if="isShowBox">
         <polyline :points="points"
                   style="fill:none;stroke:black;stroke-width:3" />
       </template>



       <template v-for="(item,index) in circleConfig">
         <circle @mouseover="selectStyle (item) "
                 @mouseout="outStyle(item)"
                 :cx="item.cx" :cy="item.cy" :r="item.r||15" :stroke="item.stroke||'black'" stroke-width="1"
                 :fill=item.fill||'#fff'></circle>
       </template>

     </svg>

       <el-select v-model="skillValue"  placeholder="请选择技能" @change="skillChange">
         <el-option
                 v-for="item in skillOptions"
                 :label="item"
                 :value="item">
         </el-option>
       </el-select>
       <transition name="el-zoom-in-center">

       </transition>



<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script> <script> 

 new Vue({
   el: '#app',
   data: function () {
     var _this = this;

     console.log(_this)
     return {
       bigCircleConfig: [
         {
           cx: 300,
           cy: 300,
           r: 250,
           stroke: 'black',
           fill: '#fff'
         },
         {
           cx: 300,
           cy: 300,
           r: 200,
           stroke: 'black',
           fill: '#fff'
         },
         {
           cx: 300,
           cy: 300,
           r: 150,
           stroke: 'black',
           fill: '#fff'
         },
         {
           cx: 300,
           cy: 300,
           r: 100,
           stroke: 'black',
           fill: '#fff'
         },
         {
           cx: 300,
           cy: 300,
           r: 60,
           stroke: 'black',
           fill: '#fff'
         }

       ],



       /*左侧技能圆配置*/
       circleConfig: [
         /*中心坐标为（300,300）*/
         /*cx范围300-r至300+r*/
         /*最外边圆r为250，故cx范围50至550*/
         /*最外圈技能*/
         {
           cx: 300,
           cy: _this.calcir(250, 300, false),
           remark: 
         },
         {
           cx: 180,
           cy: _this.calcir(250, 180, false),
           remark: '落饭纲',

         },
         {
           cx: 420,
           cy: _this.calcir(250, 420, false),
           remark: 
         },
         {
           cx: 120,
           cy: _this.calcir(250, 120, false),
           remark: 
         },
         {
           cx: 80,
           cy: _this.calcir(250, 80, false),
           remark: 
         },
         {
           cx: 50,
           cy: _this.calcir(250, 50, false),
           remark: 
         },
         {
           cx: 550,
           cy: _this.calcir(250, 550, false),
           remark: 
         },

         {
           cx: 450,
           cy: _this.calcir(250, 450, true),
           remark: 
         },
         {
           cx: 80,
           cy: _this.calcir(250, 80, true),
           remark: 
         },
         {
           cx: 120,
           cy: _this.calcir(250, 120, true),
           remark: 
         },
         {
           cx: 180,
           cy: _this.calcir(250, 180, true),
           remark: 
         },

         /*内圈技能r=200故cx范围100至500*/

         {
           cx: 260,
           cy: _this.calcir(200, 260, false),
           remark: '圆2（x:260）'
         },
         {
           cx: 210,
           cy: _this.calcir(200, 210, false),
           remark: '逆风剑'
         },
         {
           cx: 160,
           cy: _this.calcir(200, 160, false),
           remark: '圆2（x:160）'
         },
         {
           cx: 100,
           cy: _this.calcir(200, 100, false),
           remark: 
         },

         {
           cx: 100,
           cy: _this.calcir(200, 100, true),
           remark: 
         },

         {
           cx: 108,
           cy: _this.calcir(200, 108, true),
           remark: 
         },

         {
           cx: 125,
           cy: _this.calcir(200, 125, true),
           remark: 
         },

         {
           cx: 155,
           cy: _this.calcir(200, 155, true),
           remark: 
         },
         {
           cx: 210,
           cy: _this.calcir(200, 210, true),
           remark: 
         },
         {
           cx: 300,
           cy: _this.calcir(200, 300, true),
           remark: 
         },
         {
           cx: 365,
           cy: _this.calcir(200, 365, true),
           remark: 
         },

         {
           cx: 420,
           cy: _this.calcir(200, 420, true),
           remark: 
         },
         {
           cx: 460,
           cy: _this.calcir(200, 460, true),
           remark: 
         },
         {
           cx: 485,
           cy: _this.calcir(200, 485, true),
           remark: 
         },
         {
           cx: 500,
           cy: _this.calcir(200, 500, true),
           remark: 
         },

         {
           cx: 485,
           cy: _this.calcir(200, 485, false),
           remark: 
         },
         {
           cx: 460,
           cy: _this.calcir(200, 460, false),
           remark: 
         },
         {
           cx: 390,
           cy: _this.calcir(200, 390, false),
           remark: 
         },
         {
           cx: 340,
           cy: _this.calcir(200, 340, false),
           remark: 
         },

         /*内圈技能r=150故cx范围150至450*/

         {
           cx: 240,
           cy: _this.calcir(150, 240, false),
           remark: '总卷'
         },
       ],

       lineConfig:[

       ],

       skillValue: ,

       /*右侧下拉框的配置*/
       skillOptions: [
         '逆风剑',
         '落饭纲',
         '总卷',
         '夜叉一文字',
         '圆2（x:260）',
         '圆2（x:160）',
       ],
       /*技能说明配置*/
       skillConfig: [
         {
           label: '逆风剑',

value: '

所需要学习的技能点2(合计)

'+ '

技能类型 武技

'+ '

将刀刺进地面，在拔起来的同时向上挑斩

' + '

指令
L1 + 三角 (防御中三角)

' 

         },
         {
           label: '落饭纲',

value: '

落饭纲

' 

         },
         {
           label: '总卷',

value: '

总卷

' 

         },
         {
           label: '夜叉一文字',

value: '

夜叉一文字

' 

         },
         {
           label: '圆2（x:260）',

value: '

圆2（x:260）

' 

         },
         {
           label: '圆2（x:160）',

value: '

圆2（x:160）

' 

         }
       ],
       isShowBox: true,
       showMsg: ,
       points:

     }
   },
   mounted() {

     /*连线配置 有层级关系 */
     this.lineToCircle('落饭纲','逆风剑')
     this.lineToCircle('落饭纲','圆2（x:160）')
     this.lineToCircle('圆2（x:260）','总卷')
     this.lineToCircle('圆2（x:160）','总卷')
     this.lineToCircle('逆风剑','总卷')

   },
   methods: {

     /*r为外围圆环半径，x为技能圆 圆心变量坐标，isTrue为处于外围圆环的上边还是下边*/
     calcir(r, x, isTrue, a, b) {
       var a1 = a || 300
       var b1 = b || 300
       var y = 0;
       if (isTrue) {
         y = Math.sqrt(r * r - (x - a1) * (x - a1)) + b1
       } else {
         y = b1 - Math.sqrt(r * r - (x - a1) * (x - a1))
       }

       console.log(y)
       return y
     },
     lineToCircle(parent, children) {
       var x1=0,y1=0,x2=0,y2=0
       this.circleConfig.forEach(item => {
         if(item.remark==parent){
           x1=item.cx
           y1=item.cy
         }else if(item.remark==children){
           x2=item.cx
           y2=item.cy
         }
       })

       this.lineConfig.push({
         x1:x1,
         y1:y1,
         x2:x2,
         y2:y2,

         parent:parent,
         children:children
       })
     },
     skillChange(item) {
       console.log(item);
       this.skillConfig.forEach(item1 => {
         if (item1.label == item) {
           this.isShowBox = true;
           this.showMsg = item1.value
         }
       })
       this.circleConfig.forEach(item1 => {
         item1.fill = '#ffffff'
         if (item1.remark == item) {
           item1.fill = '#ff0000'
         }

         this.$forceUpdate()
       })

       this.points=
       this.lineSelect(item)
     },

     lineSelect(item){
       this.lineConfig.forEach(item1=>{
         if(item1.parent==item){
           this.points+=item1.x1+','+item1.y1+' '+item1.x2+','+item1.y2+' '

           if(item1.children){
             this.lineSelect(item1.children)
           }
         }
       })
     },
     selectStyle(item) {
       console.log(item)

       this.circleConfig.forEach(item1 => {
         item1.fill = '#ffffff'
       })
       item.fill = '#ff0000'
       this.isShowBox = true;

       this.skillConfig.forEach(item1 => {
         item1.fill = '#ffffff'
         if (item1.label == item.remark) {

           this.skillValue = item1.label
           this.showMsg = item1.value
         }
       })

       this.points=
       this.lineSelect(item.remark)

       this.$forceUpdate()
     },
     outStyle(item) {
       item.fill = '#ffffff';
       this.isShowBox = false;
       this.skillValue = 
       this.showMsg = 
       this.$forceUpdate()
     }
   }
 })

</script> </body>

取自“https://www.niohwiki.com/mediawiki/index.php?title=仁王2技能图&oldid=1155”