easyTopo拓扑图vue+element ui组合可视化拖拽生成拓扑jstopo.top

个人网站展示地址：http://jstopo.top(有很多前端的canvas插件工具【easyEcharts图表折线line,柱状图bar，仪表盘…】)

easyTopo拓扑视频

<canvas 
    ref="canvas"
    @drop="drop($event)"
    @dragover="allowDrop($event)"
    @mousemove="onMouseMove"
    @mouseup="onMouseUp"
    @contextmenu.prevent="()=>{}"
    @mousewheel="onMouseWheel"
    @mousedown="onMouseDown">
</canvas>
init(){
   this.domRef = this.$refs.canvas;
   this.w = this.domRef.width = this.domRef.clientWidth,
   this.h = this.domRef.height = this.domRef.clientHeight;
   this.ctx = this.domRef.getContext("2d");
   this.ctx.textAlign = "center";
   this.ctx.textBaseline = "top";
   this.ctx.font = "18px 黑体";
   this.ctx.fillStyle = "#fff";
   this.ctx.strokeStyle = "#fff";        
},