如何获得图像的缩放功能?
是否有一种常见的方法来显示大图像并允许用户放大、缩小和平移图像?
到目前为止,我找到了两种方法:
- 覆盖ImageView,对于这样一个常见问题来说,这似乎有点太多了。
- 使用 webview 但对整体布局等的控制较少。
Is there a common way to show a big image and enable the user to zoom in and out and pan the image?
Until now I found two ways:
- overwriting ImageView, that seems a little bit too much for such a common problem.
- using a webview but with less control over the overall layout etc.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(13)
更新
我刚刚给了 TouchImageView 一个新的更新。除了平移和捏合缩放之外,它现在还包括双击缩放和滑动。下面的代码非常过时了。您可以查看github项目以获取最新代码。
用法
将 TouchImageView.java 放入您的项目中。然后可以像下面一样使用它
图像视图。示例:
如果您在 xml 中使用 TouchImageView,那么您必须提供完整的包
名称,因为它是自定义视图。示例:
注意:我删除了之前的答案,其中包括一些非常旧的代码,现在直接链接到 github 上最新的代码。
ViewPager
如果您有兴趣将 TouchImageView 放入 ViewPager,请参阅此答案.
UPDATE
I've just given TouchImageView a new update. It now includes Double Tap Zoom and Fling in addition to Panning and Pinch Zoom. The code below is very dated. You can check out the github project to get the latest code.
USAGE
Place TouchImageView.java in your project. It can then be used the same as
ImageView. Example:
If you are using TouchImageView in xml, then you must provide the full package
name, because it is a custom view. Example:
Note: I've removed my prior answer, which included some very old code and now link straight to the most updated code on github.
ViewPager
If you are interested in putting TouchImageView in a ViewPager, refer to this answer.
我修改了一些代码来创建支持多点触控(>2.1)的 TouchImageView。
它的灵感来自于你好,Android! (第3版)
它包含在以下3个文件中
TouchImageView.java
WrapMotionEvent.java
EclairMotionEvent.java
TouchImageView.java
WrapMotionEvent.java
EclairMotionEvent.java
I adapted some code to create a TouchImageView that supports multitouch (>2.1).
It is inspired by the book Hello, Android! (3rd edition)
It is contained within the following 3 files
TouchImageView.java
WrapMotionEvent.java
EclairMotionEvent.java
TouchImageView.java
WrapMotionEvent.java
EclairMotionEvent.java
从内存加载图像
我使用了 WebView 并通过WebView 处理所有平移、缩放和滚动 。如果您使用wrap_content,则网络视图不会比图像大,并且不会显示白色区域。
WebView 是更好的 ImageView ;)
I used a WebView and loaded the image from the memory via
The WebView handles all the panning zooming and scrolling. If you use wrap_content the webview won't be bigger then the image and no white areas are shown.
The WebView is the better ImageView ;)
在回答 Janusz 最初的问题时,有几种方法可以实现这一目标,所有这些方法的难度级别各不相同,如下所述。使用网页视图固然很好,但在观感和可控性方面却非常有限。如果您从画布上绘制位图,则已提出的最通用的解决方案似乎是 MikeOrtiz 的、Robert Foss 的和/或 Jacob Nordfalk 建议的解决方案。 PaulBourke,非常适合多点触控支持和所有类型的自定义视图。
就我个人而言,如果您只是将画布绘制为位图,然后将其显示在 ImageView 中,并且希望能够使用多点触控进行放大和移动,我发现 MikeOrtiz 的解决方案是最简单的。但是,出于我的目的,他提供的 Git 中的代码似乎仅在他的 TouchImageView 自定义 ImageView 类是唯一的子类时才有效或提供布局参数为:
不幸的是,由于我的布局设计,我需要“layout_height”的“wrap_content”。当我将其更改为此图像时,图像在底部被裁剪,并且我无法滚动或缩放到裁剪区域。
所以我看了一下 Source for ImageView 只是为了了解 Android 如何实现“onMeasure”并更改 MikeOrtiz 来适应。
这里的resolveSize(int,int)是一个“使所需大小与MeasureSpec施加的约束相协调的实用程序,其中:
参数:
返回:
因此本质上提供了一种行为与加载图像时的原始 ImageView 类更相似。可以进行更多更改以支持修改宽高比的更多种类的屏幕,但现在我希望这会有所帮助,感谢 MikeOrtiz 的原始代码。 。
In Response to Janusz original question, there are several ways to achieve this all of which vary in their difficulty level and have been stated below. Using a web view is good, but it is very limited in terms of look and feel and controllability. If you are drawing a bitmap from a canvas, the most versatile solutions that have been proposed seems to be MikeOrtiz's, Robert Foss's and/or what Jacob Nordfalk suggested. There is a great example for incorporating the android-multitouch-controller by PaulBourke, and is great for having the multi-touch support and alltypes of custom views.
Personally, if you are simply drawing a canvas to a bitmap and then displaying it inside and ImageView and want to be able to zoom into and move around using multi touch, I find MikeOrtiz's solution as the easiest. However, for my purposes the code from the Git that he has provided seems to only work when his TouchImageView custom ImageView class is the only child or provide the layout params as:
Unfortunately due to my layout design, I needed "wrap_content" for "layout_height". When I changed it to this the image was cropped at the bottom and I couldn't scroll or zoom to the cropped region.
So I took a look at the Source for ImageView just to see how Android implemented "onMeasure" and changed MikeOrtiz's to suit.
Here resolveSize(int,int) is a "Utility to reconcile a desired size with constraints imposed by a MeasureSpec, where :
Parameters:
Returns:
So essentially providing a behaviour a little more similar to the original ImageView class when the image is loaded. Some more changes could be made to support a greater variety of screens which modify the aspect ratio. But for now I Hope this helps. Thanks to MikeOrtiz for his original code, great work.
您还可以尝试 http://code.google.com/p/android-multitouch -controller/
这个库真的很棒,尽管最初有点难以掌握。
You could also try out http://code.google.com/p/android-multitouch-controller/
The library is really great, although initially a little hard to grasp.
我刚刚集成了 Robert Foss 的 TouchImageView:它开箱即用,完美运行!谢谢!
我只是修改了一些代码,这样我就可以从我的layout.xml 中实例化它。
只需添加两个构造函数
并将旧的构造函数转换为 init 方法即可:
I just integrated Robert Foss's TouchImageView: it worked perfectly out of the box! Thanks!
I just modified a bit the code so I could be able to instantiate it from my layout.xml.
Just add two constructors
and transform the old constructor into an init method:
@Robert Foss、@Mike Ortiz,非常感谢你们的工作。我合并了你的工作,并完成了 Android 的罗伯特课程 > 2.0 与迈克的额外工作。
作为我工作的成果,我展示了基于 ViewPager 并使用修改后的 TouchImageView 的 Android Touch Gallery。通过 URL 加载图像,您可以缩放和拖动它们。您可以在这里找到它 https://github.com/Dreddik/AndroidTouchGallery
@Robert Foss, @Mike Ortiz, thank you very much for your work. I merged your work, and completed Robert classes for android > 2.0 with Mike additional work.
As result of my work I present Android Touch Gallery, based on ViewPager and used modificated TouchImageView. Images loading by URL and you can zoom and drag them. You can find it here https://github.com/Dreddik/AndroidTouchGallery
尝试使用
ZoomView
缩放任何其他视图。http://code.google.com/p/android-zoom-view/ 使用起来简单、免费且有趣!
Try using
ZoomView
for zooming any other view.http://code.google.com/p/android-zoom-view/ it's easy, free and fun to use!
添加到@Mike的答案。我还需要双击才能将图像恢复到第一次查看时的原始尺寸。所以我添加了一整堆“orig...”实例变量,并添加了 SimpleOnGestureListener 来实现这一点。
Adding to @Mike's answer. I also needed double tap to restore the image to the original dimensions when first viewed. So I added a whole heap of "orig..." instance variables and added the SimpleOnGestureListener which did the trick.
这是这个线程的一个很晚的补充,但我一直在研究一个支持缩放和平移的图像视图,并且有一些我在其他地方没有找到的功能。这最初是一种显示非常大的图像而不导致
OutOfMemoryError
的方法,通过在缩小时对图像进行二次采样并在放大时加载更高分辨率的图块。它现在支持在ViewPager< /code>,手动旋转或使用 EXIF 信息(90° 停止),使用
OnClickListener
或您自己的GestureDetector
或OnTouchListener
覆盖选定的触摸事件、子类化以添加叠加层、缩放时平移以及快速移动。它并不是作为
ImageView
的通用替代品,因此不会扩展它,也不支持显示资源中的图像,仅支持资产和外部文件。它需要 SDK 10。源代码位于 GitHub 上,并且有一个示例演示了在 ViewPager 中的使用。
https://github.com/davemorrissey/subsampling-scale-image-view
This is a very late addition to this thread but I've been working on an image view that supports zoom and pan and has a couple of features I haven't found elsewhere. This started out as a way of displaying very large images without causing
OutOfMemoryError
s, by subsampling the image when zoomed out and loading higher resolution tiles when zoomed in. It now supports use in aViewPager
, rotation manually or using EXIF information (90° stops), override of selected touch events usingOnClickListener
or your ownGestureDetector
orOnTouchListener
, subclassing to add overlays, pan while zooming, and fling momentum.It's not intended as a general use replacement for
ImageView
so doesn't extend it, and doesn't support display of images from resources, only assets and external files. It requires SDK 10.Source is on GitHub, and there's a sample that illustrates use in a
ViewPager
.https://github.com/davemorrissey/subsampling-scale-image-view
的 LayoutParams
您可以尝试使用此ZoomIn = Zoom(true);
缩小 = 缩放(假);
You can try using the LayoutParams for this
ZoomIn = zoom(true);
ZoomOut = zoom(false);
并且drawable文件夹应该有bticn图像文件。
完美运作:)
and drawable folder should have bticn image file.
perfectly works :)
像下面这样的东西就可以做到。
要查看完整的程序,请参阅此处: 缩放图像的程序在安卓中
Something like below will do it.
For viewing complete program see here: Program to zoom image in android