AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

图片缩放，拖拽等操作

2014-01-08 1464
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <p style="text-align:center">之前做项目要对图片的查看，然后就自己写了一个，适合对图片的浏览，跟系统图库的效果一样哦，先贴一张美女图片，听说有美女，男人就会多看一眼，不知道是不是真的，哈哈<img src="http://img.my.csdn.net/uploads/201304/20/1366425339_3000.png" alt="" height="4

之前做项目要对图片的查看，然后就自己写了一个，适合对图片的浏览，跟系统图库的效果一样哦，先贴一张美女图片，听说有美女，男人就会多看一眼，不知道是不是真的，哈哈

布局文件需要注意的一点是 scaleType一定要是 matrix，这样才能对图片进行一系列的矩阵操作，例如放大缩小，拖拽，等等

[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent" >  
  5.   
  6.     <ImageView  
  7.         android:id="@+id/imageView1"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:scaleType="matrix" />  
  11.   
  12. </RelativeLayout>  

代码我都有注释，直接上代码咯
[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. package com.example.zoomanddrafting;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.content.Intent;  
  6. import android.graphics.Bitmap;  
  7. import android.graphics.BitmapFactory;  
  8. import android.graphics.Matrix;  
  9. import android.graphics.PointF;  
  10. import android.graphics.RectF;  
  11. import android.os.Bundle;  
  12. import android.util.DisplayMetrics;  
  13. import android.util.FloatMath;  
  14. import android.view.MotionEvent;  
  15. import android.view.View;  
  16. import android.view.View.OnTouchListener;  
  17. import android.widget.ImageView;  
  18.   
  19.   
  20.   
  21. public class PhotoViewer extends Activity implements OnTouchListener {  
  22.   
  23.     private static final String TAG = "PhotoViewer";  
  24.     public static final int RESULT_CODE_NOFOUND = 200;  
  25.       
  26.       
  27.     Matrix matrix = new Matrix();  
  28.     Matrix savedMatrix = new Matrix();  
  29.     DisplayMetrics dm;  
  30.     ImageView imgView;  
  31.     Bitmap bitmap;  
  32.   
  33.     /** 最小缩放比例*/  
  34.     float minScaleR = 1.0f;  
  35.     /** 最大缩放比例*/  
  36.     static final float MAX_SCALE = 10f;  
  37.   
  38.     /** 初始状态*/  
  39.     static final int NONE = 0;  
  40.     /** 拖动*/  
  41.     static final int DRAG = 1;  
  42.     /** 缩放*/  
  43.     static final int ZOOM = 2;  
  44.       
  45.     /** 当前模式*/  
  46.     int mode = NONE;  
  47.   
  48.     PointF prev = new PointF();  
  49.     PointF mid = new PointF();  
  50.     float dist = 1f;  
  51.   
  52.       
  53.     @Override  
  54.     public void onCreate(Bundle savedInstanceState) {  
  55.         super.onCreate(savedInstanceState);  
  56.         // 获取图片资源  
  57.         bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.item);  
  58.           
  59.         setContentView(R.layout.activity_main);  
  60.         imgView = (ImageView) findViewById(R.id.imageView1);// 获取控件  
  61.         imgView.setImageBitmap(bitmap);// 填充控件  
  62.         imgView.setOnTouchListener(this);// 设置触屏监听  
  63.         dm = new DisplayMetrics();  
  64.         getWindowManager().getDefaultDisplay().getMetrics(dm);// 获取分辨率  
  65. //        minZoom();  
  66.         center();  
  67.         imgView.setImageMatrix(matrix);  
  68.           
  69.     }  
  70.   
  71.     public void SureOnClick(View v)  
  72.     {  
  73.           
  74.     }  
  75.       
  76.     /** 
  77.      * 触屏监听 
  78.      */  
  79.     public boolean onTouch(View v, MotionEvent event) {  
  80.   
  81.         switch (event.getAction() & MotionEvent.ACTION_MASK) {  
  82.         // 主点按下  
  83.         case MotionEvent.ACTION_DOWN:  
  84.             savedMatrix.set(matrix);  
  85.             prev.set(event.getX(), event.getY());  
  86.             mode = DRAG;  
  87.             break;  
  88.         // 副点按下  
  89.         case MotionEvent.ACTION_POINTER_DOWN:  
  90.             dist = spacing(event);  
  91.             // 如果连续两点距离大于10，则判定为多点模式  
  92.             if (spacing(event) > 10f) {  
  93.                 savedMatrix.set(matrix);  
  94.                 midPoint(mid, event);  
  95.                 mode = ZOOM;  
  96.             }  
  97.             break;  
  98.         case MotionEvent.ACTION_UP:  
  99.         case MotionEvent.ACTION_POINTER_UP:  
  100.             mode = NONE;  
  101.             //savedMatrix.set(matrix);  
  102.             break;  
  103.         case MotionEvent.ACTION_MOVE:  
  104.             if (mode == DRAG) {  
  105.                 matrix.set(savedMatrix);  
  106.                 matrix.postTranslate(event.getX() - prev.x, event.getY()  
  107.                         - prev.y);  
  108.             } else if (mode == ZOOM) {  
  109.                 float newDist = spacing(event);  
  110.                 if (newDist > 10f) {  
  111.                     matrix.set(savedMatrix);  
  112.                     float tScale = newDist / dist;  
  113.                     matrix.postScale(tScale, tScale, mid.x, mid.y);  
  114.                 }  
  115.             }  
  116.             break;  
  117.         }  
  118.         imgView.setImageMatrix(matrix);  
  119.         CheckView();  
  120.         return true;  
  121.     }  
  122.   
  123.     /** 
  124.      * 限制最大最小缩放比例，自动居中 
  125.      */  
  126.     private void CheckView() {  
  127.         float p[] = new float[9];  
  128.         matrix.getValues(p);  
  129.         if (mode == ZOOM) {  
  130.             if (p[0] < minScaleR) {  
  131.                 //Log.d("", "当前缩放级别:"+p[0]+",最小缩放级别:"+minScaleR);  
  132.                 matrix.setScale(minScaleR, minScaleR);  
  133.             }  
  134.             if (p[0] > MAX_SCALE) {  
  135.                 //Log.d("", "当前缩放级别:"+p[0]+",最大缩放级别:"+MAX_SCALE);  
  136.                 matrix.set(savedMatrix);  
  137.             }  
  138.         }  
  139.         center();  
  140.     }  
  141.   
  142.     /** 
  143.      * 最小缩放比例，最大为100% 
  144.      */  
  145.     private void minZoom() {  
  146.         minScaleR = Math.min(  
  147.                 (float) dm.widthPixels / (float) bitmap.getWidth(),  
  148.                 (float) dm.heightPixels / (float) bitmap.getHeight());  
  149.         if (minScaleR < 1.0) {  
  150.             matrix.postScale(minScaleR, minScaleR);  
  151.         }  
  152.     }  
  153.   
  154.     private void center() {  
  155.         center(true, true);  
  156.     }  
  157.   
  158.     /** 
  159.      * 横向、纵向居中 
  160.      */  
  161.     protected void center(boolean horizontal, boolean vertical) {  
  162.   
  163.         Matrix m = new Matrix();  
  164.         m.set(matrix);  
  165.         RectF rect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());  
  166.         m.mapRect(rect);  
  167.   
  168.         float height = rect.height();  
  169.         float width = rect.width();  
  170.   
  171.         float deltaX = 0, deltaY = 0;  
  172.   
  173.         if (vertical) {  
  174.             // 图片小于屏幕大小，则居中显示。大于屏幕，上方留空则往上移，下方留空则往下移  
  175.             int screenHeight = dm.heightPixels;  
  176.             if (height < screenHeight) {  
  177.                 deltaY = (screenHeight - height) / 2 - rect.top;  
  178.             } else if (rect.top > 0) {  
  179.                 deltaY = -rect.top;  
  180.             } else if (rect.bottom < screenHeight) {  
  181.                 deltaY = imgView.getHeight() - rect.bottom;  
  182.             }  
  183.         }  
  184.   
  185.         if (horizontal) {  
  186.             int screenWidth = dm.widthPixels;  
  187.             if (width < screenWidth) {  
  188.                 deltaX = (screenWidth - width) / 2 - rect.left;  
  189.             } else if (rect.left > 0) {  
  190.                 deltaX = -rect.left;  
  191.             } else if (rect.right < screenWidth) {  
  192.                 deltaX = screenWidth - rect.right;  
  193.             }  
  194.         }  
  195.         matrix.postTranslate(deltaX, deltaY);  
  196.     }  
  197.   
  198.     /** 
  199.      * 两点的距离 
  200.      */  
  201.     private float spacing(MotionEvent event) {  
  202.         float x = event.getX(0) - event.getX(1);  
  203.         float y = event.getY(0) - event.getY(1);  
  204.         return FloatMath.sqrt(x * x + y * y);  
  205.     }  
  206.   
  207.     /** 
  208.      * 两点的中点 
  209.      */  
  210.     private void midPoint(PointF point, MotionEvent event) {  
  211.         float x = event.getX(0) + event.getX(1);  
  212.         float y = event.getY(0) + event.getY(1);  
  213.         point.set(x / 2, y / 2);  
  214.     }  
  215.       
  216.     
  217. }  

我也将工程上传了，不要积分哦，欢迎下载 代码下载
文章标签：
Android开发
Java
编解码
ctrip_xzh
目录
相关文章
刻刻帝的海角
|
6月前
|
前端开发 JavaScript
拖拽旋转相册
拖拽旋转相册
刻刻帝的海角
45 0
爱你三千遍斯塔克
|
4月前
|
前端开发
Canvas之拖拽方块并实时重绘
Canvas之拖拽方块并实时重绘
爱你三千遍斯塔克
21 0
你挚爱的强哥
|
6月前
|
索引
【sgPhotoPlayer】自定义组件：图片预览，支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件：图片预览，支持点击放大、缩小、旋转图片
你挚爱的强哥
50 1
小粉蛋
|
6月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路：富文本加载后，dom出全部img元素，然后各自单独添加点击事件
小粉蛋
247 3
咖啡机（K.F.J）
|
Web App开发 移动开发 前端开发
移动端图片操作（二）——预览、旋转、合成
在上一节中已经提到了预览，预览可以通过data: URL格式或URL对象。
咖啡机（K.F.J）
509 0
移动端图片操作（二）——预览、旋转、合成
你挚爱的强哥
|
6月前
|
测试技术 定位技术
【sgDragMoveTile】自定义组件：拖拽瓦片图、地图、大图，滚动条对应同步滚动
【sgDragMoveTile】自定义组件：拖拽瓦片图、地图、大图，滚动条对应同步滚动
你挚爱的强哥
47 0
时义龙
|
11月前
qrc-标签和按钮、调色板加载图片
qrc-标签和按钮、调色板加载图片
时义龙
53 0
田八
|
JavaScript 前端开发 容器
手写图片拖拽、鼠标点位缩放
如题，无关技术背景，什么vue、react自己想用就用，这就是js加一点点css实现，意思就是可以任意迁。
田八
194 0
空洞啊
图片和文件预览组件(部分源码)，可拖动，缩小，放大。 #41
图片和文件预览组件(部分源码)，可拖动，缩小，放大。 #41
空洞啊
146 0
游客5iyiu2o7vjvko
|
前端开发 容器
使用resize实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能，使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样：
游客5iyiu2o7vjvko
121 0

热门文章

最新文章

  • 1
    小技巧 - 怎样屏蔽群消息（包括 @全体成员）？
  • 2
    MAVEN简介之——settings.xml
  • 3
    RDS for SQL server 空间问题排查汇总
  • 4
    深度 ｜ 大数据算法应用的测试发展之路
  • 5
    JavaScript基本数据类型分析
  • 6
    【Linux】使用数字表示法和文件表示法修改文件权限（超详细）
  • 7
    艾伟：一个简单的关键字过滤算法
  • 8
    上海保交所发布区块链底层技术平台，为保险交易高效安全保驾护航
  • 9
    《程序员的修炼-培养思维潜能的9个习惯》 读书笔记
  • 10
    Swift析构器
  • 1
    `Object.create()` 方法的参数
    28
  • 2
    js中new和object.creat区别
    27
  • 3
    Kotlin - 运算符与中缀表达式
    30
  • 4
    除了 `addEventListener` 方法，还有哪些方式可以为元素添加事件监听器？
    26
  • 5
    如何同时在捕获阶段和冒泡阶段添加事件监听器？
    29
  • 6
    `addEventListener` 方法的第三个参数有什么作用？
    12
  • 7
    Kotlin - 运算符与中缀表达式
    12
  • 8
    除了点击事件，`addEventListener` 还能用于处理哪些事件类型？
    18
  • 9
    addEventlistener和正常的onclick=()=> 的区别
    13
  • 10
    除了性能，块级作用域和函数作用域对代码的可读性和可维护性有何影响？
    11

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月