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,用来标记鼠标按下状态(是否鼠标按下)。

原理,通过偏移量

相关推荐
豆苗学前端1 分钟前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
我命由我1234532 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO32 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了37 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅41 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
孤月葬花魂1 小时前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅1 小时前
Electron 应用打包全指南
前端·javascript·electron
shushushu1 小时前
Web如何自动播放音视频
前端·javascript
前端进阶者1 小时前
天地图InfoWindow插入React自定义组件
前端·javascript
扶我起来还能学_1 小时前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app