我可以用鼠标滚动来放大和缩小我的图像，但我只想在按下[CTRL]键并使用鼠标滚动时进行缩放。我还希望我的图像在缩小到一个点后，通过平移移动后，回到其初始属性
这是我迄今为止尝试过的，但不起作用：
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>
我得到了它。我所要做的就是添加：contain:"外部"；到panZoomObject选项