react 图片加内容数据填充后鼠标滚轮缩放 + 拖拽

碰到一个需求，要求是底图用图片
然后接口获取的数据要填充到里面，然后要实现拖拽和缩放
其中缩放有个要求要鼠标滚轮缩放

用了一个拖拽的第三方包

import Dragger from 'react-dragger-r'

	<div style={{overflow: 'hidden'}}>
		<Dragger>
			<div className='cader_box' style={{transform: `scale(${deltaY}, ${deltaY})`, transformOrigin: '0 0'}} onWheel={(e) => handleScroll(e)}>
				内容全部走定位
			</div>
        </Dragger>
      </div>

cader_box的样式里面是放了一张图

.cader_box {
  width: 960px;
  background-image: url('/diantu.png');
  background-repeat: no-repeat;
  background-position: center 0px;
  background-size: 100%;
  height: 720px;
  color: #FFF;
  font-size: 10px;
  position: relative;
  font-weight: 500;
  }

handleScroll方法

const handleScroll = (e) => {
    let num = e.nativeEvent.deltaY	//	滚轮滚动数值分正负
    if (Math.abs(num) >= 100) {	//	防止数值太大把图片给倒转之类的bug
      let num = parseInt(Math.abs(num).toString().substr(0, 2))
    }
    if (num <= 1) {	//	缩小处理
      if (deltaY <= 0.5) {	//	防止缩小到0，就没了，什么都看不到做的处理
        return
      }
      num = Math.abs(num)
      num = num / 100
      dispatch ({	//	这个是dva的数据更新方式，用hooks直接更新deltaY这个变量也一样的
        type:'system/updateState',
        payload:{
          deltaY: deltaY - num,
        },
      })
    } else {	//	放大时候做的处理
      num = num / 100	//	这里都除了100，是为了防止缩小放大时候一下子跨度太大
      dispatch ({
        type:'system/updateState',
        payload:{
          deltaY: deltaY + num,
        },
      })
    }

由于第一次做这种需求，开始时候没有头绪找了很多资料，其实很简单