左右对称
左右.png
<template>
<div class="hello">
<h3>左右并排</h3>
<svg class="svg">
<g>
<circle :cx="first.cx" :cy="first.cy" :r="first.r"
@click="circleClick"
@mousedown="firstMousDown"
@mouseup="firstMousUp"
@mousemove="firstMousMove"
class="first"
fill= "#A4D3EE"></circle>
<circle :key="index" v-for="(item, index) in rightends" :cx="item.cx" :cy="item.cy" :r="item.r"
class="first"
fill= "blue"></circle>
<path :key="index*100+20" v-for="(reletion, index) in relations"
:d="'M'+reletion.x1+','+reletion.y1+' '+'C'+reletion.x2+','+reletion.y2+' '+ reletion.x3+','+reletion.y3+' '+reletion.x4+','+reletion.y4"
stroke="red" fill="none" :style="'stroke-width: '+width+'px;'" @mouseover="moseMovePath" @mouseout="moseOutPath"></path>
</g>
</svg>
<!-- <div :key="index*100+20" v-for="(reletion, index) in relations">
{{'M'+reletion.x1+','+reletion.y1+' '+'C'+reletion.x2+','+reletion.y2+' '+ reletion.x3+','+reletion.y3+' '+reletion.x4+','+reletion.y4}}
</div> -->
</div>
</template>
<script>
export default {
name: 'leftAndRight',
data () {
return {
msg: 'Welcome to Your Vue.js App',
width: 5,
num: 0,
relations: [],
first: {},
firstDx: 0,
firstDy: 0,
rightends: [],
firstClickDown: {
screenX: 0,
screeny: 0
},
firstMouseState: false
}
},
created () {
this.first.cx = 400
this.first.cy = 250
this.first.r = 50
let length = 5
for (let i = 0; i < length; i++) {
this.rightends.push({
cx: 300 + this.first.cx,
cy: 500 / (length + 1) * (i + 1),
r: this.first.r * 0.7
})
}
let that = this
this.rightends.forEach(function (val) {
that.relations.push({
x1: that.first.cx + that.first.r,
y1: that.first.cy,
x2: that.first.cx + (val.cx - that.first.cx) / 2,
y2: that.first.cy,
x3: that.first.cx + (val.cx - that.first.cx) / 2,
y3: val.cy,
x4: val.cx - val.r,
y4: val.cy
})
})
console.log(this.relations)
},
methods: {
circleClick () {
console.log(222)
},
moseMovePath () {
this.width = 10
},
firstMousDown (e) {
console.log(e)
console.log(this.first)
this.firstClickDown.screenX = e.screenX
this.firstClickDown.screenY = e.screenY
this.firstMouseState = true
},
firstMousUp (e) {
console.log(e)
this.firstMouseState = false
},
firstMousMove (e) {
if (this.firstMouseState) {
let dx = e.screenX - this.firstClickDown.screenX
let dY = e.screenY - this.firstClickDown.screenY
this.first.cx = this.first.cx + dx
this.first.cy = this.first.cy + dY
this.endComputed()
if (this.width > 10) {
this.width--
} else {
this.width++
}
this.firstClickDown.screenX = e.screenX
this.firstClickDown.screenY = e.screenY
}
},
moseOutPath () {
this.width = 4
},
endComputed () {
let length = 5
let that = this
this.rightends.forEach((val, i) => {
val.cx = 300 + this.first.cx
val.cy = 500 / (length + 1) * (i + 1)
val.r = this.first.r * 0.7
that.relations[i].x1 = that.first.cx + that.first.r
that.relations[i].y1 = that.first.cy
that.relations[i].x2 = that.first.cx + (val.cx - that.first.cx) / 2
that.relations[i].y2 = that.first.cy
that.relations[i].x3 = that.first.cx + (val.cx - that.first.cx) / 2
that.relations[i].y3 = val.cy
that.relations[i].x4 = val.cx - val.r
that.relations[i].y4 = val.cy
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.svg{
height: 500px;
width: 800px;
border: 1px solid #ccc;
}
.first{
stroke:red;
stroke-width:2px
}
.relation-line{
stroke:rgb(99,99,99);
stroke-width:2px
}
</style>
环形排列
环形.png
<template>
<div class="hello">
<h3>环形排列</h3>
<svg class="svg">
<g>
<circle :cx="first.cx" :cy="first.cy" :r="first.r"
@click="circleClick"
@mousedown="firstMousDown"
@mouseup="firstMousUp"
@mousemove="firstMousMove"
class="first"
fill= "#A4D3EE"></circle>
<circle :key="index" v-for="(item, index) in ends" :cx="item.cx" :cy="item.cy" :r="item.r"
class="first"
fill= "blue"></circle>
<line :key="index*100+100" v-for="(relation, index) in relations" :x1="relation.x1" :y1="relation.y1" :x2="relation.x2" :y2="relation.y2" style="stroke:rgb(99,99,99);stroke-width:2"/>
</g>
</svg>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
width: 5,
num: 0,
relations: [],
first: {},
firstDx: 0,
firstDy: 0,
ends: [],
firstClickDown: {
screenX: 0,
screeny: 0
},
firstMouseState: false
}
},
created () {
this.first.cx = 400
this.first.cy = 250
this.first.r = 50
let length = 8
for (let i = 0; i < length; i++) {
this.ends.push({
cx: Math.sin((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cx,
cy: Math.cos((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cy,
r: this.first.r * 0.7
})
}
let that = this
this.ends.forEach(function (val, i) {
that.relations.push({
x1: Math.sin((Math.PI * 2 / length) * i) * that.first.r + that.first.cx,
y1: Math.cos((Math.PI * 2 / length) * i) * that.first.r + that.first.cy,
x2: Math.sin((Math.PI * 2 / length) * i) * val.r * -1 + val.cx,
y2: Math.cos((Math.PI * 2 / length) * i) * val.r * -1 + val.cy
})
})
console.log(this.ends)
},
methods: {
circleClick () {
console.log(222)
},
moseMovePath () {
this.width = 10
},
firstMousDown (e) {
console.log(e)
console.log(this.first)
this.firstClickDown.screenX = e.screenX
this.firstClickDown.screenY = e.screenY
this.firstMouseState = true
},
firstMousUp (e) {
console.log(e)
this.firstMouseState = false
},
firstMousMove (e) {
if (this.firstMouseState) {
let dx = e.screenX - this.firstClickDown.screenX
let dY = e.screenY - this.firstClickDown.screenY
this.first.cx = this.first.cx + dx
this.first.cy = this.first.cy + dY
this.endComputed()
if (this.width > 10) {
this.width--
} else {
this.width++
}
this.firstClickDown.screenX = e.screenX
this.firstClickDown.screenY = e.screenY
}
},
moseOutPath () {
this.width = 4
},
endComputed () {
let length = 8
let that = this
this.ends.forEach((val, i) => {
val.cx = Math.sin((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cx
val.cy = Math.cos((Math.PI * 2 / length) * i) * this.first.r * 3 + this.first.cy
val.r = this.first.r * 0.7
that.relations[i].x1 = Math.sin((Math.PI * 2 / length) * i) * that.first.r + that.first.cx
that.relations[i].y1 = Math.cos((Math.PI * 2 / length) * i) * that.first.r + that.first.cy
that.relations[i].x2 = Math.sin((Math.PI * 2 / length) * i) * val.r * -1 + val.cx
that.relations[i].y2 = Math.cos((Math.PI * 2 / length) * i) * val.r * -1 + val.cy
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.svg{
height: 500px;
width: 800px;
border: 1px solid #ccc;
}
.first{
stroke:red;
stroke-width:2px
}
.relation-line{
stroke:rgb(99,99,99);
stroke-width:2px
}
</style>
网友评论