canvas实现鼠标滚轮滚动缩放画布

javascript 复制代码
const canvas = document.createElement('canvas')
canvas.width = 400
canvas.height = 400
canvas.className = 'main_canvas'
document.body.appendChild(canvas)
const ctx = canvas.getContext('2d')

const info = {
  offset: {x: 0, y: 0},
  scale: 1,
  scaleStep: 0.1,
  minScale: 0.5,
  maxScale: 2
}

// 获取鼠标在canvas画布上的坐标
const getCanvasPostion = (e) => {
  return {
    x: e.offsetX,
    y: e.offsetY,
  }
}

//计算呢两点之间的距离
const getDistance = (p1, p2) => {
  return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2)
}

//更新画布
const updateCanvas = () => {
  const backgroundImage = new Image() // 创建Image对象
  backgroundImage.src = 'https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0' //设置图片路径
  backgroundImage.onload = function(){
    console.log('图片加载完成');
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height)  //绘制背景图片
  }
}

updateCanvas()

//监听滚轮滚动缩放画布
canvas.addEventListener('wheel', (e) => {
  e.preventDefault()
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  const canvasPosition = getCanvasPostion(e)  //获取画布上的事件坐标
  console.log(canvasPosition)
  const realCanvasPosition = { //鼠标在画布上的坐标
    x: canvasPosition.x - info.offset.x,
    y: canvasPosition.y - info.offset.y
  }
  // 放缩时产生的偏移量
  const deltaX = realCanvasPosition.x / info.scale * info.scaleStep
  const deltaY = realCanvasPosition.y / info.scale * info.scaleStep
  if (e.wheelDelta > 0 && info.scale < info.maxScale) {
    console.log('上滚');
    info.offset.x  -= deltaX
    info.offset.y  -= deltaY
    info.scale += info.scaleStep
  }else if (e.wheelDelta <= 0 && info.scale > info.minScale){
    console.log('下滚');
    info.offset.x  += deltaX
    info.offset.y  += deltaY
    info.scale -= info.scaleStep
  }
  ctx.setTransform(info.scale, 0, 0, info.scale, info.offset.x, info.offset.y)
  updateCanvas()
})

canvas实现鼠标滚轮滚动缩放画布效果

相关推荐
gnip6 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫7 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel8 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼8 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法12 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku12 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript