vue使用zrender

 https://blog.csdn.net/monster123321/article/details/54409485

<el-row style="background:#fff;" @mousewheel.prevent>  禁止mousewheel事件
    <div id="canvas" :style="style"></div>
</el-row>


import zrender from 'zrender'
import pic from '@/assets/final.jpg'

mounted(){
  let that = this, img = new Image()
  img.src = pic
  img.onload = function () {
    that.init(img)
  }
},
methods:{
  init(img){
    this.style = `width:${img.width}px;height:${img.height}px;`
    this.$nextTick(() => {
      this.zr = zrender.init(document.getElementById('canvas'))
      this.group = new zrender.Group()
      this.zr.add(this.group)
      this.draw()
      //如果canvas宽度过长，重置width100%，这样就能出现x轴滚动条了
      this.canvasStyle = `width:100%;height:${img.height}px;overflow-x:auto;`
    })
  },
  draw() {
      //参数继承Displayable
      let img = new zrender.Image({ 
        style: {
          x: 0,
          y: 0,
          image: pic,
          width: this.zr.getWidth(),
          height: this.zr.getHeight()
        },
        draggable: true,
      })
      img.on('mousewheel',e=>{
        let v = e.wheelDelta/20
        img.attr('origin', [e.offsetX,e.offsetY])  //缩放中心点
        img.attr('scale',[img.scale[0]+v, img.scale[1]+v])
      })
      // 添加圆到group里
      this.group.add(img)
  } 
}

 

来源：oschina

链接：https://my.oschina.net/cectsky/blog/4330189