After spending days trying to figure out how to implement zoom functionality in Konva for my Angular app, I finally found a solution. On my html page, I have multiple ko-image tags with different [config]. My goal is to enable zoom in and zoom out actions using the wheel event on the ko-stage.
Here's a snippet from my HTML file:
<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>
In my TypeScript file, I define the configurations for each Konva component:
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);
}
}