原料 ：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
}
