React マウスホイールで画像拡大・縮小 - Elsaの技術日記(徒然なるままに)

今回はReactにてマウスホイールを動かすと画像拡大・縮小すようにしてみたいと思います。
完成イメージはこんな感じ。
f:id:Elsammit:20200909231642g:plain

機能としては、
　・画像上でマウスホイールにより拡大・縮小が行える
　・画像上でマウスを動かすと画像が領域内で動く
です。

■マウスホイールでの拡大・縮小
■マウス移動に伴う画像の移動
■最後に

■マウスホイールでの拡大・縮小

マウスホイールを動かした際のイベントとして"OnWheel"があります。
こちらのイベントにマウスホイールを動かしたら画像の拡大・縮小を行えるようにすればOKです。

ソースはこちら。

zoom = (e) =>{
    const {zoom} = this.state;

    var buf;
    if(e.deltaY > 0){
        buf = zoom - 0.1;
    }else{
        buf = zoom + 0.1;
    }
   this.setState(()=>{
        return {
            zoom:buf
        }
    })

    document.getElementById("img01").style.zoom = buf;
}

render() {
    return(<div>
    	<div id="imgID" onWheel = {(e) => this.zoom(e)}  className="mouseImg">
        	<img src={Imagefile} id="img01" heigt="100px" width="100px"  />
       </div>
    <div>)
}

イベント発生時に渡されるe内のdeltaYにてマウススクロール時の移動量が格納されております。
deltaYは手前方向に回すとプラス、奥方向に回すとマイナスになります。

今回は手前方向に回した場合に縮小してほしいため、deltaYがプラスであればzoomをマイナスにしています。
そして、imgタグのidを指定してzoom値をセットしています。

■マウス移動に伴う画像の移動

所定領域に収める形で画像の拡大を行うと画像が見切れてしまいます。
そこで、マウスを動かした際に画像が動くようにしました。

マウスを動かした際のイベントは、”onMouseMove”なのでこちらを用います。

ソースコードはこちら。

onMouseMove = (e) =>{
    var element = document.getElementById("imgID");
    element.scrollTop = element.scrollTop - e.movementY*10;
    element.scrollLeft = element.scrollLeft - e.movementX*10;
}
render() {
    return(<div>
    	div id="imgID" onWheel = {(e) => this.zoom(e)} onMouseMove = {(e) => this.onMouseMove(e)} className="mouseImg">
        	<img src={Imagefile} id="img01" heigt="100px" width="100px"  />
       </div>
    <div>)
}

イベント発生時に渡されるe内には現在のスクロールの位置を示すscrollTop 、scrollLeft や
マウスの移動量を示すmovementY、movementXがあります。

これらを用いて、マウスを動かした方向に応じてスクロールの位置(scrollTop 、scrollLeft)を変化させればOKです。