仁王2技能图 - 版本历史

Faxlok：已保护“仁王2技能图”：未完成，勿动（[编辑=仅允许管理员]（无限期）[移动=仅允许管理员]（无限期））

2022-05-24T14:21:22Z

已保护“仁王2技能图”：未完成，勿动（[编辑=仅允许管理员]（无限期）[移动=仅允许管理员]（无限期））

←上一版本	2022年5月24日 (二) 22:21的版本
（没有差异）

2022年5月24日 (二) 12:00 Faxlok

2022-05-24T12:00:19Z

←上一版本		2022年5月24日 (二) 20:00的版本
第10行：		第10行：
	html, body, #app{		html, body, #app{
	height: 100%;		height: 100%;
	color: white;		}
			#app {
			color: white;
	}		}

2022年5月24日 (二) 11:33 Faxlok

2022-05-24T11:33:30Z

←上一版本		2022年5月24日 (二) 19:33的版本
第61行：		第61行：
	<div class="out">		<div class="out">
	<div class="svg">		<div class="svg">
	<svg id="taidao" height="~~600~~" width="~~600~~" viewbox="0 0 600,600">		<svg id="taidao" height="100%" width="100%" viewbox="0 0 600,600">
	<template v-for="item in bigCircleConfig">		<template v-for="item in bigCircleConfig">
	<circle :cx="item.cx" :cy="item.cy" :r="item.r" :stroke="item.stroke" stroke-width="1"		<circle :cx="item.cx" :cy="item.cy" :r="item.r" :stroke="item.stroke" stroke-width="1"

2022年5月24日 (二) 11:31 Faxlok

2022-05-24T11:31:05Z

←上一版本		2022年5月24日 (二) 19:31的版本
第15行：		第15行：
	.out{		.out{
	display: flex;		display: flex;
			display: -webkit-flex; /* Safari */
			flex-wrap: wrap;
	.svg{		.svg{
	border: 1px solid #404040;		border: 1px solid #404040;

2022年5月24日 (二) 11:21 Faxlok

2022-05-24T11:21:56Z

←上一版本		2022年5月24日 (二) 19:21的版本
第10行：		第10行：
	html, body, #app{		html, body, #app{
	height: 100%;		height: 100%;
			color: white;
	}		}

第32行：		第33行：
	margin: 7px;		margin: 7px;
	border-radius: 4px;		border-radius: 4px;
	width: ~~190px~~;		width: 180px;
	}		}

2022年5月24日 (二) 11:16 Faxlok

2022-05-24T11:16:51Z

←上一版本		2022年5月24日 (二) 19:16的版本
第24行：		第24行：
	width: 190px;		width: 190px;
	border: 1px solid #404040;		border: 1px solid #404040;
	color: white;		color: white !important;
	}		}
	}		}

2022年5月24日 (二) 11:16 Faxlok

2022-05-24T11:16:16Z

←上一版本		2022年5月24日 (二) 19:16的版本
第10行：		第10行：
	html, body, #app{		html, body, #app{
	height: 100%;		height: 100%;
	~~background-color:#bfa;~~
	}		}

第33行：		第32行：
	margin: 7px;		margin: 7px;
	border-radius: 4px;		border-radius: 4px;
			width: 190px;
	}		}

2022年5月24日 (二) 11:14 Faxlok

2022-05-24T11:14:17Z

@@ 第7行： / 第7行： @@
    <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>

2022年5月24日 (二) 11:13 Faxlok

2022-05-24T11:13:04Z

←上一版本		2022年5月24日 (二) 19:13的版本
第1行：		第1行：
			<html lang="zh">
	<head>		<head>
	<meta charset="UTF-8">		<meta charset="UTF-8">
第455行：		第456行：
	</script>		</script>
	</body>		</body>
			</html>

Faxlok：测试技能图效果

2022-05-24T11:11:58Z

测试技能图效果

新页面

<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>
<div id="app">
<div class="out">
<div class="svg">
<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>
</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>


<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>

仁王2技能图 - 版本历史

Faxlok：​已保护“仁王2技能图”：未完成，勿动（[编辑=仅允许管理员]（无限期）[移动=仅允许管理员]（无限期））

2022年5月24日 (二) 12:00 Faxlok

2022年5月24日 (二) 11:33 Faxlok

2022年5月24日 (二) 11:31 Faxlok

2022年5月24日 (二) 11:21 Faxlok

2022年5月24日 (二) 11:16 Faxlok

2022年5月24日 (二) 11:16 Faxlok

2022年5月24日 (二) 11:14 Faxlok

2022年5月24日 (二) 11:13 Faxlok

Faxlok：​测试技能图效果

Faxlok：已保护“仁王2技能图”：未完成，勿动（[编辑=仅允许管理员]（无限期）[移动=仅允许管理员]（无限期））

Faxlok：测试技能图效果