Как показать исходный размер изображения в модальном режиме? - PullRequest
Новая
       13

Как показать исходный размер изображения в модальном режиме?

0 голосов
/ 09 июля 2019

У меня есть приложение, в котором изображения составляются на страницах с шириной экрана или меньше, но если я нажимаю на них, я открываю модальное изображение, чтобы показать изображение в полном размере. Он отлично работает на 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

1 Ответ

0 голосов
/ 09 июля 2019

Вы сравниваете независимые от устройства пиксели с фактическими пикселями.

getActualSize () возвращает ширину и высоту в формате DPI, используйте utils.layout.toDevicePixels (getActualSize (). width) или utils.layout.toDevicePixels (getActualSize (). height) для получения фактического значения пикселя.

...