vue放大缩小div_vue 放大缩小 svg 图形（原理类似整个列表更新）

原料 ：vue+element-ui+svg

目的：让svg 图形在点击按钮后放大和缩小

html

style="fill:#7daf7d;stroke:#b5acac;stroke-width:2"/>

1

script

//stations： 需要绘制的站台

export default {

name: 'svgMap',

data() {

return {

stations:[ {num:1,x:50,y:20,w:20,h:40},{x:75,y:20,w:20,h:40},{x:100,y:20,w:20,h:40},

{x:125,y:20,w:20,h:40},{x:150,y:20,w:20,h:40},{x:175,y:20,w:20,h:40},

{x:200,y:20,w:20,h:40},{x:225,y:20,w:20,h:40}]

}

},

methods: {

zoomin(){//放大

this.stations = this.draw(this.stations,1.1);

},

zoomout(){//缩小

this.stations = this.draw(this.stations,0.9);//同时更新站台信息，才会更新页面

},

draw(pointArray,factor){//根据变化倍数更新svg的坐标

var newPointArray = [];

for(var i=0;i

var point = {};

point.x = pointArray[i].x*factor;

point.y = pointArray[i].y*factor;

point.w = pointArray[i].w*factor;

point.h = pointArray[i].h*factor;

newPointArray.push(point);

}

return newPointArray;

}

}

}

注意

直接更新vue的数据列表，页面的数据是不会更新的。需要一起同时更新，才会更新页面数据

以下是不会更新页面的写法

for(var i=0;i

this.stations[i].x = this.station[i].x*factor

this.stations[i].y = this.station[i].y*factor

this.stations[i].w = this.station[i].w*factor

this.stations[i].h = this.station[i].h*factor

}