Question

要显示图像，我选择使用Webview组件，因为它允许轻松进行交互式缩放。

如何首先旋转图像90，然后缩放结果以适应webview /屏幕的整个宽度？

这就是我所做的，但只显示一个小图像。不使用全宽。

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);

Answer 1

解决方案并不容易，但最终我找到了它。好的，这确实解决了我的问题。

作为奖金，还有一个用于旋转图像的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代码部分。你可以把它们放在字符串中。

String 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>

Android - Webview - 旋转图像和缩放以适合页面宽度

1 个答案: