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)获取实际像素值。

如何以模态显示原始图像尺寸？

1 个答案: