僅當按下 [CTRL] 鍵並使用 panzoom 自動重新定位圖像時才縮放 - Angular

Question

我可以使用鼠標滾動放大和縮小圖像，但我只想在按下 [CTRL] 鍵並使用鼠標滾動的情況下進行縮放。 我還希望我的圖像 go 在縮小到一個點並通過平移移動它之后恢復到其初始屬性

這是我迄今為止嘗試過的，但它不起作用：

zoomToggle(zoomIn: boolean) {
    const idx = this.zoomLevels.indexOf(this.currentZoomLevel);
    
    if (zoomIn) {
      if (typeof this.zoomLevels[idx + 1] !== 'undefined') {
        if(this.evente.ctrlKey == true){

        
        this.currentZoomLevel = this.zoomLevels[idx + 1];
        }
      }
    } else {
      if (typeof this.zoomLevels[idx - 1] !== 'undefined') {
        if(this.evente.ctrlKey == true){
        this.currentZoomLevel = this.zoomLevels[idx - 1];
      }
    }
    }
    if (this.currentZoomLevel >= 4) {
      
    } else {
      this.zoom();
    }

所以這里是沒有錯誤的代碼：

組件.ts：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import panzoom from "panzoom";

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html', 
  
  styleUrls: ['./hello.component.css']
})

export class HelloComponent implements AfterViewInit {

  clicked:boolean = false;
  evente : KeyboardEvent;

  @ViewChild('scene', { static: false }) scene: ElementRef;
  panZoomController;
  zoomLevels: number[];

  currentZoomLevel: number;

  changeState(){
    this.clicked = !this.clicked;
  }

  zoom() {
    const isSmooth = false;
    const scale = this.currentZoomLevel;


    if (scale) {
      const transform = this.panZoomController.getTransform();
      const deltaX = transform.x;
      const deltaY = transform.y;
      const offsetX = scale + deltaX;
      const offsetY = scale + deltaY;

      if (isSmooth) {
        this.panZoomController.smoothZoom(0, 0, scale);
      } else {
        this.panZoomController.zoomTo(offsetX, offsetY, scale);
      }
    }

    this.ngAfterViewInit()

  }

  zoomToggle(zoomIn: boolean) {
    const idx = this.zoomLevels.indexOf(this.currentZoomLevel);
    
    if (zoomIn) {
      if (typeof this.zoomLevels[idx + 1] !== 'undefined') {

        
        this.currentZoomLevel = this.zoomLevels[idx + 1];
        }
      
    } else {
      if (typeof this.zoomLevels[idx - 1] !== 'undefined') {
    
        this.currentZoomLevel = this.zoomLevels[idx - 1];
      
    }
    }
    if (this.currentZoomLevel >= 4) {
      
    } else {
      this.zoom();
    }

    this.ngAfterViewInit()
  }

  ngAfterViewInit() {

    this.zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
    this.currentZoomLevel = this.zoomLevels[4];
    // panzoom(document.querySelector('#scene'));
    this.panZoomController = panzoom(this.scene.nativeElement);
  }
}

模板.hmtl：

<div style="overflow: hidden">

    <img id="scene" #scene 
    src="https://c4.wallpaperflare.com/wallpaper/738/62/544/naruto-chidori-naruto-naruto-uzumaki-rasengan-naruto-sasuke-uchiha-hd-wallpaper-preview.jpg"
    >

  </div>

<br/>
      <button class="transparent-button" (click)="zoomToggle(false)">-</button>
      <span>{{currentZoomLevel * 100}}%</span>
      <button class="transparent-button" (click)="zoomToggle(true)">+</button>
      <button (click)="changeState()">Expand</button>

Answer 1

我知道了。 我所要做的就是在 panZoomObject 選項中添加：包含：“外部”