Non-Centri c Увеличение / уменьшение контейнера - PullRequest
Новая
       39

Non-Centri c Увеличение / уменьшение контейнера

0 голосов
/ 13 февраля 2020

Я реализую функцию увеличения и уменьшения масштаба для контейнера. Функция увеличения, уменьшения масштаба выполняется относительно центра холста. Прокрутка вверх в любом месте увеличивает контейнер в соответствии с центром. хотите увеличить контейнер относительно позиции курсора. Ниже приведен мой код контейнера и функция увеличения и уменьшения 

state = {
        scale: 10,
        outstate:false
      }

      //disabled={this.state.outstate} 
      zoomState(e) {
        switch (e.deltaY > 0) {
          case true:
            //this.zoomOut();         
            if(!this.state.outstate){
              this.zoomOut();
            }
            break;
          default:
            this.zoomIn();
        }
      } 
      zoomIn = () => {
          this.setState({ scale: this.state.scale * 2});
          console.log(this.state.scale)
          this.setState({outstate:false})
      }
      zoomOut = () => {
          this.setState({ scale: this.state.scale / 2});    
          if(this.state.scale===2.5)
          {
              this.setState({outstate:true})
          } else {
              this.setState({outstate:false})
          }
          console.log(this.state.scale)
      }
      render() {
          return (
            <div className="container">          
              <div onWheel={(e)=>this.zoomState(e)}
                  className="bg-image-wrapper"
                  style={{ 'transform': `scale(${this.state.scale})` }}
                  //onWheel={()=>this.zoomIn()}
                  //onMouseUp={()=>this.zoomOut()}> 
              </div>
           </div>
         );
     }
...