nativescript - 如何在模态中显示原始图像大小？

问题描述

我有一个应用程序，其中在屏幕宽度或更小的页面上绘制图像，但如果我单击它们，我会打开一个模式以全尺寸显示图像。它在 ios 上运行良好，但由于某种原因，Android 不显示原始图像，而是显示小得多的图像。我一生都无法弄清楚为什么它不会显示来自 url 的原始图像。我正在为我的模态使用模板：

<ScrollView #imgScroll orientation="horizontal">
        <Image [src]="img" (loaded)="onImageLoaded($event);" (pinch)="onPinch($event)" #dragImage class="largeImage" stretch="none"></Image>
    </ScrollView>

然后在我的代码中，我设置了滚动条并允许用户能够拖动图像来检查整个图像。

onImageLoaded(args: EventData){
    let dragImage = <Image>args.object;
    if(dragImage){
        setTimeout(()=>{
            this.imgSize = dragImage.getActualSize();
            if(this.imgSize.width>this.imgSize.height){
                this.orientation = "landscape";
                this.imageScroller.scrollToHorizontalOffset(this.imgSize.width / 4, true);

            } else {
                this.orientation = "portrait";
                this.imageScroller.scrollToVerticalOffset(this.imgSize.width / 4, true);
            }
            console.log("Image Size: ", this.imgSize);
        },1500);
    }   
}

onImagePan(args: PanGestureEventData){
    if (args.state === 1){
    this.prevX = 0
    this.prevY = 0;
    }
    if (args.state === 2) // panning
    {
        this.dragImageItem.translateX += args.deltaX - this.prevX;
        this.dragImageItem.translateY += args.deltaY - this.prevY;
        this.prevX = args.deltaX;
        this.prevY = args.deltaY;
    } else if (args.state === 3){
        this.dragImageItem.animate({
            translate: { x: 0, y: 0 },
            duration: 1000,
            curve: AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
          });      
    }
}

onPinch(args: PinchGestureEventData) {
    console.log("Pinch scale: " + args.scale + " state: " + args.state);
    if(this.imgSize){
        if (args.state === 1) {
            var newOriginX = args.getFocusX() - this.dragImageItem.translateX;
            var newOriginY = args.getFocusY() - this.dragImageItem.translateY;
        }
    }

}

以下是记录到控制台的内容：

Image Size:  {
    "width": 533.3333333333334,
    "height": 127.33333333333333
}

实际图像尺寸为 900 x 600。

看起来Android正在缓存页面中的图像，而不是显示来自url的实际图像。我不明白为什么 iOS 可以工作，但 Android 不能。有人有想法么？

版本：1.17.0-v.2019.5.31.1（最新） NativeScript CLI 版本：5.4.2 CLI 扩展 nativescript-cloud 版本：1.17.6 CLI 扩展 nativescript-starter-kits 版本：0.3.5

标签： nativescriptnativescript-angular

nativescript - 如何在模态中显示原始图像大小？

问题描述

解决方案

推荐阅读