如何在 Angular wint Konva 中实现滚动缩放

Question

我尝试了几天来为我的 Angular 应用找到放大 Konva 的方法。在我的 html 页面中，我的应用中有多个 ko-image 标签，它们具有不同的 [config]。我想在 ko-stage 上放置一个 wheel 事件，让我可以放大或缩小。

这是我的html文件

<ko-stage  [config]="configStage" >
    <ko-layer >
      <ko-image [config]="configImage[0]"> </ko-image>
      <ko-image [config]="configImage[1]"> </ko-image>
      <ko-image [config]="configImage[2]"> </ko-image>
      <ko-image [config]="configImage[3]"> </ko-image>
      <ko-image [config]="configImage[4]"> </ko-image>
    </ko-layer>
</ko-stage>

这是我的打字稿文件。这是我要为每个 konva 组件创建配置的地方。

import { Component, OnInit, EventEmitter } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Observable, of, config } from 'rxjs';

// declare window to remove typescript warning
interface Window {
  Image: any;
}
declare const window: Window;

@Component({
  selector: 'app-konva',
  templateUrl: './konva.component.html',
  styleUrls: ['./konva.component.css']
})
export class KonvaComponent implements OnInit {

  public count:number = 0;

  stageScale:number = 1;
  stageX:number = 0;
  stageY:number = 0;

  public configStage: Observable<any> = of({
    width: 700,
    height: 1000,
    scaleX:this.stageScale,
    scaleY:this.stageScale,
    x:this.stageX,
    y:this.stageY
  });

  public configImage:Array<EventEmitter<any>> = new Array<EventEmitter<any>>();

  constructor(private route: ActivatedRoute) { }

  showImage(src: string,x: number,y: number,id:number) {  
    const image = new window.Image();
    image.src = src;
    image.onload = () => {
      this.configImage[id].emit({
        image: image,
        width:100,
        height:100,
        x:x,
        y:y
      })
    }
  }

   change(){
     console.log(this.count);
     if(this.count == 0)
     this.showImage("../../assets/static/photos/star.png",20,30,1);
     if(this.count == 1)
     this.showImage("../../assets/static/photos/maps.png",120,30,2);
     if(this.count == 2)
     this.showImage("../../assets/static/photos/pass_icon.png",60,0,3);
     if(this.count == 3)
     this.showImage("../../assets/static/photos/user_icon.png",80,130,4);
     this.count++;
   }

  ngOnInit() {
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());

    this.showImage("../../assets/static/photos/fb.png",50,150,0);
  }
}

Answer 1

找到了 Angular 的答案：

import { Component, OnInit, EventEmitter } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Observable, of, config, BehaviorSubject } from 'rxjs';

// declare window to remove typescript warning
interface Window {
  Image: any;
}
declare const window: Window;

@Component({
  selector: 'app-konva',
  templateUrl: './konva.component.html',
  styleUrls: ['./konva.component.css']
})
export class KonvaComponent implements OnInit {

  public count:number = 0;

  stageScale:number = 1;
  stageX:number = 1;
  stageY:number = 1;

  public configStage= new BehaviorSubject({
      width: 700,
      height: 1000,
      scaleX:this.stageScale,
      scaleY:this.stageScale,
      x:this.stageX,
      y:this.stageY
  });

  public configImage:Array<EventEmitter<any>> = new Array<EventEmitter<any>>();

  constructor(private route: ActivatedRoute) { }

  showImage(src: string,x: number,y: number,id:number) {  
    const image = new window.Image();
    image.src = src;
    image.onload = () => {
      this.configImage[id].emit({
        image: image,
        width:100,
        height:100,
        x:x,
        y:y
      })
    }
  }

   change(){
     console.log(this.count);
     if(this.count == 0)
     this.showImage("../../assets/static/photos/star.png",20,30,1);
     if(this.count == 1)
     this.showImage("../../assets/static/photos/maps.png",120,30,2);
     if(this.count == 2)
     this.showImage("../../assets/static/photos/pass_icon.png",60,0,3);
     if(this.count == 3)
     this.showImage("../../assets/static/photos/user_icon.png",80,130,4);
     this.count++;
   }

  test(e){
    e.preventDefault();
    console.log(e.pageX);

    const scaleBy = 1.02;
    const oldScale =this.stageScale
    const mousePointTo = {
      x: e.layerX / oldScale - this.stageX / oldScale,
      y: e.layerY / oldScale - this.stageY / oldScale
    };

    const newScale = e.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;


    this.stageScale = newScale;


    this.stageX = -(mousePointTo.x - e.layerX / newScale) * newScale;
    this.stageY = -(mousePointTo.y - e.layerY / newScale) * newScale;

    this.configStage.next({
      width: 700,
      height: 1000,
      scaleX:this.stageScale,
      scaleY:this.stageScale,
      x:this.stageX,
      y:this.stageY
    });

    console.log(this.stageScale);

  }

  ngOnInit() {
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());
    this.configImage.push(new EventEmitter<any>());

    this.showImage("../../assets/static/photos/fb.png",50,150,0);
  }
}