实现自定义拖拽、放大的imageview

这种控件很简单,基本上没什么难度,无非就是onTouch事件的处理:

我们先从简单的做起,实现自定义拖拽:

首先,你移动的过程中,你得记录一下你刚开始的位置,然后你移动完成后,需要记录一下终点,至于这个距离如何记录,onTouch正好给你API去获取移动的距离,然后学过数学的都知道,一个手机屏幕是一个二维坐标系统,你都知道了起点,知道了终点,然后你做一下加法,不就出来了。

getImageMatrix()你先获取手机屏幕的矩阵元素,然后通过MotionEvent获取起点的坐标,如下图所示:

然后你移动,产生距离,那距离就来搞一下下啊,你往前,就用终点减去起点,就是移动距离,你既然获得距离了,就来移动啊!

postTranslate(),使用这个方法就可以实现移动的功能了。

        然后接下来就得实现缩小放大的功能;一般你放大是不是得两根手指头,那触摸点是不是就得有两个了,那你如何获取放大的倍数?我给你一个思路:你手指动了,你是不是会产生缩放距离,同时在X或者Y轴或者同时,那你就会有一个产生的缩放距离,在X轴和Y轴上的,你都知道了X和Y的距离了,那来一个勾股定理,是不是就得算出来了斜边的距离,因为你动手指,产生了距离,不管你移动了多少,斜边都会产生移动。那你用初始的斜边长度去除以手势在屏幕上移动后产生的斜边长度,结果就是缩放的比例大小。这个比例你获取到了,但是你是不是得有一个缩放点,就是你根据哪个点进行缩放的,我们一般取缩放后的中间点,如果你取起点,那就是反向了,取终点,就缩放不正常,会产生二倍放大,这个是线性代数里面的一个基本的知识。然后你用postScale()方法进行缩放,第一个是X轴的缩放,第二个是Y轴的缩放,然后后面两个是中点,中间点就是你两个手指的中间点。思路都出来了,代码就出来了:

package com.ireader.plug.testapplication;

import android.content.Context;

import android.graphics.Matrix;

import android.graphics.PointF;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

import android.widget.ImageView;

public class BaseDragZoomImageViewextends ImageViewimplements View.OnTouchListener{

  private int mode =0;

  private static final int MODE_DRAG =1;

  private static final int MODE_ZOOM =2;

  private PointFstartPoint =new PointF();

  private Matrixmatrix =new Matrix();

  private MatrixcurrentMatrix =new Matrix();

  private float startDis;

  private PointFmidPoint;

  public BaseDragZoomImageView(Context context, AttributeSet attrs, int defStyle)

{

    super(context, attrs, defStyle);

    setOnTouchListener(this);

  }

  public BaseDragZoomImageView(Context context, AttributeSet attrs)

{

    this(context, attrs, 0);

    setOnTouchListener(this);

  }

  public BaseDragZoomImageView(Context context)

{

    this(context, null);

    setOnTouchListener(this);

  }

  @Override

  public boolean onTouch(View v, MotionEvent event) {

    switch (event.getAction() & MotionEvent.ACTION_MASK) {

      case MotionEvent.ACTION_DOWN:

        mode = MODE_DRAG;

        currentMatrix.set(getImageMatrix());

        startPoint.set(event.getX(), event.getY());

break;

      // 手指在屏幕上移动,改事件会被不断触发

      case MotionEvent.ACTION_MOVE:

        if (mode == MODE_DRAG) {

          float dx = event.getX() - startPoint.x;

          float dy = event.getY() - startPoint.y;

          matrix.set(currentMatrix);

          matrix.postTranslate(dx, dy);

        }

        else if (mode == MODE_ZOOM) {

          float endDis = distance(event);

          if (endDis > 10f) {

            float scale = endDis / startDis;

            matrix.set(currentMatrix);

            matrix.postScale(scale, scale,midPoint.x,midPoint.y);

          }

}

        break;

      case MotionEvent.ACTION_UP:

      case MotionEvent.ACTION_POINTER_UP:

        mode = 0;

break;

      case MotionEvent.ACTION_POINTER_DOWN:

        mode = MODE_ZOOM;

        startDis = distance(event);

        if (startDis > 10f) {

          midPoint = mid(event);

          currentMatrix.set(getImageMatrix());

        }

        break;

    }

setImageMatrix(matrix);

return true;

  }

  private float distance(MotionEvent event) {

    float dx = event.getX(1) - event.getX(0);

    float dy = event.getY(1) - event.getY(0);

    return (float) Math.sqrt(dx * dx + dy * dy);

  }

  private PointFmid(MotionEvent event) {

    float midX =(event.getX(1) + event.getX(0)) /2;

    float midY =(event.getY(1) + event.getY(0)) /2;

    return new PointF(midX, midY);

  }

}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342