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

Question

我有一个应用程序，可以在屏幕宽度或更小的页面上绘制图像，但是如果我单击它们，我会打开一个模式以全尺寸显示图像。它在 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

Answer 1

您正在将设备独立像素与实际像素进行比较。

getActualSize()以DPI格式返回宽高，使用utils.layout. toDevicePixels(getActualSize().width) Or utils.layout. toDevicePixels(getActualSize().height)获取实际像素值。