Android中实现Bitmap在自定义View中的放大与拖动

一：基本实现思路

基于View类实现自定义View –MyImageView类。在使用View的Activity类中完成OnTouchListener接口，实现对自定义View的触摸事件监听

放大与拖动

基于单点触控实现Bitmap对象在View上的拖动、并且检测View的边缘，防止拖动过界。基于两个点触控实现Bitmap对象在View上的放大、并且检测放大倍数。基于Matrix对象实现对Bitmap在View上放大与平移变换

Bitmap对象在View中的更新与显示

通过重载onDraw方法，使用canvas实现绘制Bitmap对象、通过view.invalidate()方法实现View的刷新。

MyImageView类的重要方法说明：

initParameters（）初始化所有需要用到的参数

setStartPoint（）设置图像平移的开始点坐标

setMovePoint（）设置图像平移的移动点坐标，然后集合开始点位置，计算它们之间的距离，从而得到Bitmap对象需要平移的两个参数值sx、sy。其中还包括保证图像不会越过View边界的检查代码。

savePreviousResult（） 保存当前的平移数据，下次可以继续在次基础上平移Bitmap对象。

zoomIn（）根据两个点之间的欧几里德距离，通过初始距离比较，得到放大比例，实现Bitmap在View对象上的放大

Matrix.postScale方法与Matrix.postTranslate方法可以不改变Bitmap对象本身实现平移与放大。

OnTouchListener支持以下的触摸事件处理：

ACTION_DOWN事件，记录平移开始点

ACTION_UP事件，结束平移事件处理

ACTION_MOVE事件，记录平移点，计算与开始点距离，实现Bitmap平移，在多点触控时候，计算两点之间的距离，实现图像放大

ACTION_POINTER_DOWN事件，计算两点之间的距离，作为初始距离，实现图像手势放大时候使用。

ACTION_POINTER_UP事件，结束两点触控放大图像处理

二：代码实现

自定义View的在layout中的使用xml如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <com.example.matrixdemo.MyImageView
        android:id="@+id/myView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/hello_world" />

</RelativeLayout>

自定义View类的实现代码如下：

package com.example.matrixdemo;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Point;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

public class MyImageView extends View {
	private Paint mPaint;
	private Bitmap bitmap;
	private Matrix matrix;

	// 平移开始点与移动点
	private Point startPoint;
	private Point movePoint;
	private float initDistance;

	// 记录当前平移距离
	private int sx;
	private int sy;

	// 保存平移状态
	private int oldsx;
	private int oldsy;

	// scale rate
	private float widthRate;
	private float heightRate;

	public MyImageView(Context context) {
		super(context);
	}

	public MyImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public void setBitmap(Bitmap bitmap) {
		this.bitmap = bitmap;
	}

	private void initParameters() {
		// 初始化画笔
		mPaint = new Paint();
		mPaint.setColor(Color.BLACK);
		matrix = new Matrix();
		if(bitmap != null)
		{
			float iw = bitmap.getWidth();
			float ih = bitmap.getHeight();
			float width = this.getWidth();
			float height = this.getHeight();
			// 初始放缩比率
			widthRate = width / iw;
			heightRate = height / ih;
		}

		sx = 0;
		sy = 0;

		oldsx = 0;
		oldsy = 0;

	}

	public void setStartPoint(Point startPoint) {
		this.startPoint = startPoint;
	}

	public void setInitDistance(float initDistance) {
		this.initDistance = initDistance;
	}

	public void zoomIn(float distance)
	{
		float rate = distance / this.initDistance;
		float iw = bitmap.getWidth();
		float ih = bitmap.getHeight();
		float width = this.getWidth();
		float height = this.getHeight();
		// get scale rate
		widthRate = (width / iw ) * rate;
		heightRate = (height / ih) * rate;

		// make it same as view size
		float iwr = (width / iw );
		float ihr = (height / ih);
		if(iwr >= widthRate)
		{
			widthRate = (width / iw );
		}
		if(ihr >= heightRate)
		{
			heightRate = (height / ih);
		}

		// go to center
		oldsx = (int)((width - widthRate * iw) / 2);
		oldsy = (int)((height - heightRate * ih) / 2);
	}

	public void setMovePoint(Point movePoint) {
		this.movePoint = movePoint;
		sx = this.movePoint.x - this.startPoint.x;
		sy = this.movePoint.y - this.startPoint.y;

		float iw = bitmap.getWidth();
		float ih = bitmap.getHeight();

		// 检测边缘
		int deltax = (int)((widthRate * iw) - this.getWidth());
		int deltay = (int)((heightRate * ih) - this.getHeight());
		if((sx + this.oldsx) >= 0)
		{
			this.oldsx = 0;
			sx = 0;
		}
		else if((sx + this.oldsx) <= -deltax)
		{
			this.oldsx = -deltax;
			sx = 0;
		}

		if((sy + this.oldsy) >= 0)
		{
			this.oldsy = 0;
			this.sy = 0;
		}
		else if((sy + this.oldsy) <= -deltay)
		{
			this.oldsy = -deltay;
			this.sy = 0;
		}

		float width = this.getWidth();

		// 初始放缩比率
		float iwr = width / iw;
		if(iwr == widthRate)
		{
			sx = 0;
			sy = 0;
			oldsx = 0;
			oldsy = 0;
		}
	}

	public void savePreviousResult()
	{
		this.oldsx = this.sx + this.oldsx;
		this.oldsy = this.sy + this.oldsy;

		// zero
		sx = 0;
		sy = 0;
	}

	@Override
	protected void onDraw(Canvas canvas) {
		if(matrix == null)
		{
			initParameters();
		}
		if(bitmap != null)
		{
			matrix.reset();
			matrix.postScale(widthRate, heightRate);
			matrix.postTranslate(oldsx+sx, oldsy + sy);
			canvas.drawBitmap(bitmap, matrix, mPaint);
		}
		else
		{
			// fill rect
			Rect rect = new Rect(0, 0, getWidth(), getHeight());
			mPaint.setAntiAlias(true);
			mPaint.setColor(Color.BLACK);
			mPaint.setStyle(Style.FILL_AND_STROKE);
			canvas.drawRect(rect, mPaint);
		}
	}
}

MainActivity的代码如下：

package com.example.matrixdemo;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class MainActivity extends Activity implements OnTouchListener {

	public static final int SCALE_MODE = 4;
	public static final int TRANSLATION_MODE = 2;
	public static final int NULL_MODE = 1;
	private MyImageView myView;
	private int mode;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		startMyImageView();
	}

	private void startMyImageView() {
		myView = (MyImageView) this.findViewById(R.id.myView);
		Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),
				R.drawable.flower_001);
		myView.setBitmap(bitmap);
		myView.setOnTouchListener(this);
		myView.invalidate();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onTouch(View view, MotionEvent event) {
		Log.i("touch event","touch x = " + event.getX());
		switch (MotionEvent.ACTION_MASK & event.getAction()) 
		{
			case MotionEvent.ACTION_DOWN:
				mode = TRANSLATION_MODE;
				myView.setStartPoint(new Point((int)event.getX(), (int)event.getY()));
				break;
			case MotionEvent.ACTION_POINTER_UP:
			case MotionEvent.ACTION_OUTSIDE:
			case MotionEvent.ACTION_UP:
				mode = NULL_MODE;
				myView.savePreviousResult();
				break;
			case MotionEvent.ACTION_POINTER_DOWN:
				mode = SCALE_MODE;
				myView.setInitDistance(calculateDistance(event));
				break;
			case MotionEvent.ACTION_MOVE:
				if(mode == SCALE_MODE)
				{
					float dis = calculateDistance(event);
					myView.zoomIn(dis);
				}
				else if(mode == TRANSLATION_MODE)
				{
					myView.setMovePoint(new Point((int)event.getX(), (int)event.getY()));
				}
				else
				{
					Log.i("unknow mode tag","do nothing......");
				}
				break;
		}
		myView.invalidate();
		return true;
	}

	private float calculateDistance(MotionEvent event) {
		float dx = event.getX(0) - event.getX(1);
		float dy = event.getY(0)  - event.getY(1);
		float distance = (float)Math.sqrt(dx*dx + dy*dy);
		return distance;
	}

}

运行截图如下：

时间： 2024-12-20 02:43:15

Android中实现Bitmap在自定义View中的放大与拖动的相关文章

Android查缺补漏（View篇）--自定义 View 中 wrap_content 无效的解决方案

自定义 View 中 wrap_content 无效的解决方案 做过自定义 View 的童鞋都会发现,直接继承 View 的自定义控件需要重写 onMeasure() 方法,并设置 wrap_content 时的自身大小,否在在布局文件中对自定义控件在设置大小时,wrap_content 将等同于 match_parent. 其实在 Android 中自带的控件中,也都对 onMeasure() 方法进行了重写,对于 wrap_content 等情况做了特殊处理,在 wrap_content 时

Android软件开发之盘点自定义View界面大合集（二）

Android软件开发之盘点自定义View界面大合集(二) - 雨松MOMO的程序世界 - 51CTO技术博客 雨松MOMO带大家盘点Android 中的自定义View界面的绘制 今天我用自己写的一个Demo 和大家详细介绍一个Android中自定义View中的使用与绘制技巧. 1.自定义view绘制字符串 相信在实际开发过程中必然很多地方都须要用到系统字 为什么会用到系统字? 方便 省内存 我相信做过J2ME游戏开发的朋友应该深知内存有多么多么重要 而且使用它还可以带来一个更重要的好处就是很方

【Android】利用自定义View的重绘实现拖动移动，获取组件的尺寸

下面利用一个app来说明如何利用自定义View的重绘实现拖动移动,获取组件的尺寸. 如下图,触摸拖动,或者轻轻点击屏幕都能移动图片.如果碰到文字,则会弹出提示. 这里是利用自定义View的重绘来实现的.就是点击屏幕一次,这个自定义View就会重绘一次.虽然这个自定义View里面就只有一个图片. 1.首先在res\values\strings.xml中定义各个字体文件,修改之后如下: <?xml version="1.0" encoding="utf-8"?&g

Android 自定义view中的属性，命名空间，以及tools标签

昨日看到有人在知乎上问这3个琐碎的小知识点,今天索性就整理了一下,其实这些知识点并不难,但是很多开发者平时很少注意到这些, 导致的后果就是开发的时候 经常会被ide报错,开发效率很低,或者看开源代码的时候很多地方看不懂. 考虑到现在越来越多的人开发环境迁移到android studio,所以一切以android studio环境为准.和eclipse开发环境相比其实两者是差不多的, 偶有区别 主要也是android studio引入的gradle脚本造成差异. 首先来看看tools标签. 这个地

关于Android自定义View中的onTouchEvent(MotionEvent event)事件监听

今天做一个自定义ViewGroup,通过addView动态添加子控件,为了省事,直接在父控件里重写public boolean onTouchEvent(MotionEvent event){}方法来监听当前触碰是哪个按钮,遇到点问题,所以写下来. 首先是点击效果只有 MotionEvent.ACTION_DOWN,这个把返回改为return true;就行了 然后是 getX()和getRawX()的区别,这个这篇博文有写到 http://www.cnblogs.com/foura/artic

android 自定义view中findViewById为空的解决办法

网上说的都是在super(context, attrs);构造函数这里少加了一个字段, 其实根本不只这一个原因,属于view生命周期的应该知道,如果你在 自定义view的构造函数里面调用findViewById 铁定为空的,因为这个 时候view还在初始化阶段,还没有添加到activity的XML布局上,所以 你怎么调用都是没用的,解决办法就是把我们的findViewById方法换 一个生命周期上面调用就OK了,比如我就是在 protected void onAttachedToWindow()

自定义view中自定义属性的用法.

有时候我们自定义的view需要用到有自己定义的属性. 首先定义自己的属性,在res/values/attrs.xml中定义,xml文件如下: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name = "myView"> <attr name = "text" format = "s

自定义View 中一些方法的调用时机

onFinishInflate()函数的调用时机: onFinishInflate() 当View中所有的子控件均被映射成xml后触发 onMeasure(int, int) 确定所有子元素的大小 onLayout(boolean, int, int, int, int) 当View分配所有的子元素的大小和位置时触发 onSizeChanged(int, int, int, int) 当view的大小发生变化时触发 onDraw(Canvas) view渲染内容的细节 onKeyDown(int

自定义View中为什么需要重写onMeasure()方法？

不实现OnMeasure()方法的时候 首先自定义一个简单的view: public class myView extends View { public myView(Context context) { super(context); } public myView(Context context, AttributeSet attrs) { super(context, attrs); } } 在布局中使用: <RelativeLayout xmlns:android="http:/