Исправьте масштаб по положению мыши колесом мыши - PullRequest
Новая
       25

Исправьте масштаб по положению мыши колесом мыши

0 голосов
/ 21 апреля 2020

У меня проблема с масштабированием элемента html вокруг позиции мыши. Я хочу масштабировать элемент и использовать положение мыши в качестве источника преобразования:

Я делаю пример на Angular, но довольно ясно, где Math делает: stackbiltz 

private mousewheelHandler = (ev:MouseEvent) => {

    //Notice ev.target is #deskArea
    // but I need zoom for #desk
    if(ev.ctrlKey){
      let  zoomFactor = 1;
      if( ev['deltaY']>0){
        zoomFactor = 0.9;
      } if( ev['deltaY']<0){
        zoomFactor = 1.1;
      }
      let b = this.nativeElement.getBoundingClientRect();
      this.calcScale(zoomFactor);

      const mouseX = ev.pageX * this.scale - b.left * this.scale;
      const mouseY = ev.pageY * this.scale - b.top * this.scale;
      this.renderer.setStyle(this.nativeElement, 'transform', `scale(${this.scale})`);
      this.renderer.setStyle(this.nativeElement, 'transform-origin', `${mouseX}px ${mouseY}px`);


    }

enter image description here Как вы можете видеть на примере stackBlitz, я называю c 'transform-origin' неправильным.

Можете ли вы указать правильный путь для вызова c «преобразование происхождения»

...