Android - Webview - 旋轉圖像和縮放以適應頁面寬度

要顯示圖像，我選擇使用Webview組件，因爲它允許輕鬆進行交互式縮放。Android - Webview - 旋轉圖像和縮放以適應頁面寬度

我該如何首先旋轉圖像90，然後縮放結果以適應webview/screen的全部寬度？

這就是我所做的，但只顯示一個小圖像。全寬未使用。

WebView infoT = (WebView)rootView.findViewById(R.id.picture_show); 
infoT.getSettings().setDefaultTextEncodingName("utf-8"); 
infoT.getSettings().setSupportZoom(true); 
infoT.getSettings().setBuiltInZoomControls(true); 
infoT.loadDataWithBaseURL(null, "<html><head><style>img{ -webkit-transform: rotate(90deg); max-width: 100%; }</style></head><body><img src=\"file://" + pictureFile + "\"/></body></html>", "text/html", "utf-8", null);

片段的佈局文件是：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical"> 
<WebView 
    android:id="@+id/picture_show" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentLeft="true" 
    android:scrollbars="vertical" /> 
</RelativeLayout>

我也嘗試過類似的選項：

infoT.loadDataWithBaseURL(null,"<!DOCTYPE html><html><body style =\"text-align:center\"><img style=\"border-style:dotted;border-width:5px;border-color:black;width:99%;-webkit-transform: rotate(90deg);\" src=\"file://" + pictureFile + "\"/></body></html>","text/html", "UTF-8", null);

來源

2015-11-07 tjm1706

的解決方案是不容易的，但最後我發現它。 OK，這確實解決了我的問題。

作爲獎金，還有一個Html/Javascript按鈕來旋轉圖像。

它由（1）loadDataWithBaseUrl語句，（2）字符串部分組成。

負載部分：

WebView infoT = (WebView)rootView.findViewById(R.id.picture_show); 
infoT.getSettings().setDefaultTextEncodingName("utf-8"); 
infoT.getSettings().setSupportZoom(true); 
infoT.getSettings().setBuiltInZoomControls(true); 
infoT.getSettings().setJavaScriptEnabled(true); 
infoT.loadDataWithBaseURL(null, htmlTextPart1 + pictureFile + htmlTextPart2, "text/html", "utf-8", null);

的htmlTextPart1和htmlTextPart2串在下面給出。爲了便於閱讀，我只給你HTML代碼部分。你可以把它們放在字符串中。

字符串htmlTextPart1 =

<html> 
<head> 
<style> 
#container {width:100%;overflow:hidden;} 
#container.rotate90,#container.rotate270 {height:100%;} 
#image { 
    transform-origin: top left; 
    -webkit-transform-origin: top left; 
    -ms-transform-origin: top left; 
    -moz-transform-origin: top left; 
    -o-transform-origin: top left; 
    max-width: 100%; width:100%; height: auto; 
    // height: 1600 ... gives a large picture 
} 
#container.rotate90 #image { 
    transform: rotate(90deg) translateY(-100%); 
    -webkit-transform: rotate(90deg) translateY(-100%); 
    -moz-transform: rotate(90deg) translateY(-100%); 
    -o-transform: rotate(90deg) translateY(-100%); 
    -ms-transform: rotate(90deg) translateY(-100%); 
    max-height: 100%; height:100%; width: auto; 
} 
#container.rotate180 #image { 
    transform: rotate(180deg) translate(-100%,-100%); 
    -webkit-transform: rotate(180deg) translate(-100%,-100%); 
    -moz-transform: rotate(180deg) translate(-100%,-100%); 
    -o-transform: rotate(180deg) translate(-100%,-100%); 
    -ms-transform: rotate(180deg) translateX(-100%,-100%); 
    max-width: 100%; width:100%; height: auto; 
} 
#container.rotate270 #image { 
    transform: rotate(270deg) translateX(-100%); 
    -webkit-transform: rotate(270deg) translateX(-100%); 
    -moz-transform: rotate(270deg) translateX(-100%); 
    -o-transform: rotate(270deg) translateX(-100%); 
    -ms-transform: rotate(270deg) translateX(-100%); 
    max-height: 100%; height:100%; width: auto; 
} 
</style> 
<script> 
var angle = 0; 
function rotateImageClockwise() { 
    img = document.getElementById('container'); 
    angle = (angle+90)%360; 
    img.className = "rotate"+angle; 
} 
</script> 
</head> 
<body> 
<input id="clickMe" type="button" value="Rotate image" onclick="javascript:rotateImageClockwise();" /></br> 
<div id="container"><img src="file://"

字符串部分2：

id="image" /></div> 
</body> 
</html>

來源

2015-11-09 18:20:27 tjm1706

Android - Webview - 旋轉圖像和縮放以適應頁面寬度

回答

相關問題