角度本机脚本中的图像缩放问题

时间:2019-02-11 15:27:18

标签: angular nativescript mobile-application angular-nativescript

我正在尝试使用“ nativescript-photo-zoom”和nativescript-image-zoom在我的角度应用程序中进行图像缩放,但抛出“ PhotoDraweeView不是构造函数错误”的人可以帮助我吗?

我的代码 的HTML:  

    <PhotoZoom [src]="photoUrl" (finalImageSet)="onFinalImageSet($event)" (failure)="onFailure($event)"  (scaleChanged)="onScaleChanged($event)"></PhotoZoom> 
    </GridLayout>

ts:

@Component({     选择器:“ ns-details”,     moduleId:module.id,     templateUrl:“ ./ item-detail.component.html”, }) 导出类ItemDetailComponent实现OnInit {

public photoUrl="https:// vignette.wikia.nocookie.net/inuyasha/images/b/b5/ Inuyasha.png";

constructor() { }

ngOnInit(): void {
    const id = +this.route.snapshot.params["id"];
    this.item = this.itemService.getItem(id);
}

onFinalImageSet(event) {
    console.log("onFinalImageSet: ", event);
}

onFailure(event) {
    console.log("onFailure: ", event);
}

onScaleChanged(event) {
    console.log("onScaleChanged: ", event.object.zoomScale);
}

}

app.module

从“ nativescript-photo-zoom / angular”导入{NativeScriptUIPhotoZoomModule};

@NgModule({

imports: [
    NativeScriptModule,
    AppRoutingModule,
    NativeScriptUIPhotoZoomModule
],

})

导出类AppModule {}

1 个答案:

答案 0 :(得分:0)

尝试使用 ng-img-magnifier npm 包。 非常容易实施且完全可定制。

<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
    [top]='top' [right]='right'
    [lensWidth]='lensewidth' [lensHeight]='lensheight'
    [resultWidth]='resultWidth' [resultHeight]='resultheight'
    [imgWidth]='imgWidth' [imgHeight]='imgheight'>
</ng-img-magnifier>