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 - 旋转图像和缩放以适应页面宽度

回答

相关问题