1、将所有循环的坐标存在数组里,因为我们要画矩形,所以每个数组里面的坐标点应该有八个,几循环数组的形式:【 [x1 y1,x2 y2,x3 y3,x4 y4],[x1 y1,x2 y2,x3 y3,x4 y4],[x1 y1,x2 y2,x3 y3,x4 y4]......】;
2、代码: 数组 ratioPositionArr即为上面形式;
//将后端返回来的数据做处理:将每个数组里面的坐标等比例放大缩小,再存在一个新数组中。
locationsPosition(newVal, oldVal) {
this.activeIfSvg = ''
this.ratioPositionArr = []
// console.log(77, newVal)
// this.ratioPositionArr=newVal
const itemArr = []
this.eryArr = []
// console.log('eryArr', this.ratioWidth)
newVal.forEach((item, index) => {
item.forEach(itemevery => {
this.eryArr.push(itemevery / this.ratioWidth)
})
itemArr.push(this.eryArr)
this.eryArr = []
})
// console.log('itemArr', itemArr)
this.ratioPositionArr = itemArr
// console.log('99',this.ratioPositionArr)
},
<div
id="svgbox"
class="svgbox"
style="border: 2px solid white"
ref="svgcanvas"
@mousedown="move"
>
<svg
class="svgelement"
style="width: 100%; height: 100%; border: 1px solid white"
ref="svgcanvas"
>
<polygon
v-for="(item, index) in ratioPositionArr"
:points="item"
:key="index"
:class="activeIfSvg === index ? 'activeIfSvg' : ''"
@click="getClickSvg(index)"
></polygon>
</svg>
</div>
3、最终效果:蓝色边框即为 svg---polygon--points 根据数组中的坐标画出的多边形!