javascript - 如何在 Angular wint Konva 中实现滚动缩放
问题描述
我尝试了几天来找到一种方法来为我的 Angular 应用程序放大 Konva。在我的 html 页面中,我的应用中有多个ko-image标签,它们具有不同的[config]。我想在ko-stage上放置一个轮子事件,让我放大或缩小。
这是我的 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);
}
}
解决方案
找到了 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);
}
}
推荐阅读
- laravel - Laravel excel导出如何导出条件数据?
- agda - 为什么 Agda 会针对某些参数减少我的函数应用程序,而不会针对其他参数减少我的函数应用程序?
- django - Django Uploaded images not displayed in production
- javascript - File Upload by js
- java - How to refer a folder inside the jar
- memory-management - Program segment fault around std::pmr::synchronized_pool_resource
- c# - C# ASP.NET MVC ERROR IN RETURNING VALUES IN VIEW
- kubernetes - status.lastScheduleTime 什么时候改变?
- python - 使用 buildozer 时如何更改 API 级别?
- jquery - Change the "clicked" current button background