Fabric.js+vue 实现鼠标滚轮缩放画布+移动画布

话不多说 直接贴代码

一、实现鼠标滚轮缩放画布

javascript 复制代码
// 可以实现鼠标滚轮缩放 最小为原来的百分之一,最大为原来的20倍
    canvas.on('mouse:wheel', function (opt) {
      var delta = opt.e.deltaY
      var zoom = canvas.getZoom()
      zoom *= 0.999 ** delta
      if (zoom > 20) zoom = 20
      if (zoom < 0.01) zoom = 0.01
      this.setZoom(zoom)
      opt.e.preventDefault()
      opt.e.stopPropagation()
    })

使用说明,我的canvas画布定义为 canvas,替他均不用额外设置变量。canvas = new fabric.Canvas('editorCanvas', {...

二、实现鼠标按下变抓手,并可移动画布中内容

javascript 复制代码
// 鼠标按下事件
    canvas.on('mouse:down', function (e) {
      this.panning = true
      canvas.selection = false
    })
    // 鼠标抬起事件
    canvas.on('mouse:up', function (e) {
      this.panning = false
      canvas.selection = true
    })
    // 移动画布事件
    canvas.on('mouse:move', function (e) {
      if (this.panning && e && e.e) {
        var delta = new fabric.Point(e.e.movementX, e.e.movementY)
        canvas.relativePan(delta)
      }
    })

使用说明:data中定义panning: false,用来标记鼠标按下状态(是否鼠标按下)。

原理,通过偏移量

相关推荐
lalalalalalalala1 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy2 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
星月日5 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子6 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试
今夜星辉灿烂18 分钟前
nestjs微服务-系列4
javascript·后端
吉吉安21 分钟前
两张图片对比clip功能
javascript·css·css3
布兰妮甜31 分钟前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
久爱@勿忘33 分钟前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021135 分钟前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依39 分钟前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui