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

原理,通过偏移量

相关推荐
不坑老师7 分钟前
macOS、Linux上的WPS终于有不坑盒子了,安装很简单,一行命令完成!
vue.js·html
十年_H11 分钟前
Cesium 顶点着色器的数据来源
javascript·webgl·cesium
玉宇夕落13 分钟前
🌌用CSS3打造“星球大战”片头:前端是代码界的导演,让文字在星空中翻滚
前端·javascript
colorFocus15 分钟前
Promise与async/await的接口串联和并联
前端·javascript
Happy coder21 分钟前
【avalonia教程】17mvvm简介、command
前端·javascript·vue.js
老前端的功夫27 分钟前
Webpack 优化:你的构建速度其实还能快10倍
前端·javascript
Lsx_30 分钟前
ECharts 全局触发click点击事件(柱状图、折线图增大点击范围)
前端·javascript·echarts
不吃香菜的猪38 分钟前
构建时变量注入:Vite 环境下 SCSS 与 JavaScript 的变量同步机制
前端·javascript·scss
一枚前端小能手1 小时前
🚀 Node.js 25重磅发布!快来看看吧
前端·javascript·node.js
濑户川1 小时前
Vue3 项目创建指南(Vue-CLI vs Vite 对比)
前端·javascript·vue.js