來自圖像對象的NativeScript全屏幕背景圖像

我嘗試在頁面上放置圖像，我需要將其拉伸至屏幕的全寬和高度（背景圖像）。圖像比屏幕尺寸大，並且是正方形的，所以我需要它是屏幕的高度並居中。來自圖像對象的NativeScript全屏幕背景圖像

我需要它作爲一個圖像，所以我可以稍後移動它並對其進行動畫處理。

到目前爲止，所有我能夠做的就是給我的第一個背景圖片：

#page : { 
    background-image: ~/Images/collage.jpg; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
}

來源

2016-08-04 developer82

您可以考慮使用App_Resources圖像提供所有不同的設備爲您的應用背景，應用程序圖標，和其他靜態resources.This，你將有適當的比例適當縮放圖像和漂亮的圖像（與他們的不同屏幕指標） - 例如查看用於Android和iOS的照片此演示應用程序https://github.com/NativeScript/sample-Groceries/tree/angular-end/app/App_Resources –

我有更大的背景，所以雙方將稍後動畫 – developer82

您的解決方案應該工作。但是另一種可能的解決方法如下：

page.xml

<Page> 
    <GridLayout> 
     <GridLayout id="background" scaleX="2" scaleY="2" /> 
     <!-- page content follows here --> 
    </GridLayout> 
</Page>

page.css

#background { 
    background-image: url("path-to-image"); 
}

使用相應的比例來拉伸圖像，然後您可以稍後輕鬆地爲背景圖像製作動畫。例如

page.getViewById("background").animate({ 
    scale: { x: 1.4, y: 1.4 }, 
    duration: 4000 
});

來源

2016-08-05 10:50:32

感謝您的答案，但規模不是我要找的。我爲100％身高looing和寬度將自動和中心的形象 – developer82

來自圖像對象的NativeScript全屏幕背景圖像

回答

相關問題