匿名
未登录
创建账号
登录
仁王 wiki
搜索
查看“仁王2技能图”的源代码
来自仁王 wiki
命名空间
页面
讨论
更多
更多
语言
页面操作
阅读
查看源代码
历史
←
仁王2技能图
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
此页面已被保护以防止编辑或其他操作。
您可以查看和复制此页面的源代码。
<html lang="zh"> <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"> <style> html, body, #app{ height: 100%; } #app { color: white; } .out{ display: flex; display: -webkit-flex; /* Safari */ flex-wrap: wrap; .svg{ border: 1px solid #404040; } .remark{ display: flex; .show-box{ background-color: white; height: 300px; width: 190px; border: 1px solid #404040; color: white !important; } } } .infobox-skill, .infobox-skill-type, .infobox-detail, .infobox-instruct { margin: 7px; border-radius: 4px; width: 180px; } .infobox-skill { background-image: linear-gradient(to right,#eee,#404040); } .infobox-skill-type { background-image: linear-gradient(to left,white,#404040); } .infobox-detail { background-color: rgba(0,0,0,.82); } .infobox-instruct { background-image: linear-gradient(to left,white,#404040); } </style> </head> <body> <div id="app"> <div class="out"> <div class="svg"> <svg id="taidao" height="100%" width="100%" 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> </div> <div class="remark"> <div> <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"> <div v-show="isShowBox" class="transition-box show-box"> <div v-html="showMsg"></div> </div> </transition> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!-- import JavaScript --> <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: '<div class="infobox-skill">所需要学习的技能点2(合计)</div>'+ '<div class="infobox-skill-type">技能类型 武技</div>'+ '<div class="infobox-detail">将刀刺进地面,在拔起来的同时向上挑斩</div>' + '<div class="infobox-instruct">指令<br>L1 + 三角 (防御中三角)</div>' }, { label: '落饭纲', value: '<div class="luofangang">落饭纲</div>' }, { label: '总卷', value: '<div class="zongjuan">总卷</div>' }, { label: '夜叉一文字', value: '<div class="yechayiwenzi">夜叉一文字</div>' }, { label: '圆2(x:260)', value: '<div class="yechayiwenzi">圆2(x:260)</div>' }, { label: '圆2(x:160)', value: '<div class="yechayiwenzi">圆2(x:160)</div>' } ], 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> </html>
返回
仁王2技能图
。
导航
导航
首页
沙箱
最近更改
随机页面
战斗详解
机制杂谈
武器心得
按键和介绍
MediaWiki帮助
设定集OST资源
仁王系列主线年表
摇篮到地狱的窍门解说
编辑wiki入门
捐助网站
所有页面
仁王1
遗发
配装
地图
守护灵
技能树
秘传书/制作书
任务表
修行场
无间狱
词条库
pvp称号
良性bug
据点设施
武器资料
防具资料
消耗道具
装备词条
套装效果
家族效果
更新记录
仁王2
遗发
配装
魂核
守护灵
技能树
秘传书
任务表
修行场
词条库
奈落狱
技能图
良性bug
据点设施
武器资料
消耗道具
家族效果
更新记录
仁王2mod
仁王2全称号
小技巧和里技
本篇全收集地图
词条冲突表
百鬼夜行绘卷
太刀招式数据表
长枪招式数据表
人物属性加点详解
饰品特殊词条重炼表
防具资料和套装效果
敌人弱点属性与抗性
DLC木灵温泉道具收集
wiki工具
wiki工具
特殊页面
页面工具
页面工具
用户页面工具
更多
链入页面
相关更改
页面信息
页面日志