android实现图片触摸旋转

来源：互联网发布：exchange 587端口编辑：程序博客网时间：2024/09/21 08:15

1.先上一张模拟触摸旋转的效果图。

2.下面是具体的实现，自定义Rview控件类继承View,首先自定义Rview的属性，在项目文件的res/values目录下新建attr.xml文件。

attr.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="Rview">        <attr name="src" format="reference" />        <!-- 用于缩放旋转的图标 -->    </declare-styleable></resources>

其次，在Rview里重写构造函数，onDraw()，onTouchEvent()方法。

Rview.Java

<pre name="code" class="java">package com.example.liutao.test;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.PointF;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * Created by liutao on 2015/6/8. */public class Rview extends View {    private Bitmap mbitmap;//图片的位图    public float mdegree = 0;//图片旋转角度，初始化为0    private Matrix matrix = new Matrix();//用来旋转图片的矩阵    private float viewHalfWidth;//画布宽度的一半    private float viewHalfHeight;//画布高度的一半    private PointF mCurMove = new PointF();//触摸点现在的坐标    private PointF viewCenter = new PointF();//组件的中心点坐标    public Rview(Context context, AttributeSet attr) {        super(context, attr);        //mTyped获取布局文件中控件的属性参数数组        TypedArray mTyped = getContext().obtainStyledAttributes(attr, R.styleable.Rview);        //src获取数组中的图片参数        Drawable src = mTyped.getDrawable(R.styleable.Rview_src);        //获取图片的位图形式        if (src instanceof BitmapDrawable) {            BitmapDrawable bd = (BitmapDrawable) src;            this.mbitmap = bd.getBitmap();        }        //数组回收，以供下次使用        mTyped.recycle();    }    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (mbitmap == null) return;        //绘制图片        canvas.drawBitmap(mbitmap, matrix, null);        viewHalfWidth = canvas.getWidth() / 2;        viewHalfHeight = canvas.getHeight() / 2;        //画布的1/2宽度为中心点的X坐标，1/2高度为中心点的Y坐标        viewCenter.set(viewHalfWidth, viewHalfHeight);    }    //响应控件的触摸事件    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {            //如果手指按下或者移动，那么图片也随之相应地旋转            case MotionEvent.ACTION_DOWN:            case MotionEvent.ACTION_MOVE:                //设置现在手指触摸点的坐标                mCurMove.set(event.getX(), event.getY());                mDegree(mCurMove);                rotate(mdegree);                break;            //如果手指抬起，则停止响应触摸事件            case MotionEvent.ACTION_UP:                break;        }        return true;    }    //计算应该旋转的角度    public void mDegree(PointF cur) {        //mDegree是图片旋转角度        //获取触摸点和中心点分别在水平和竖直方向的距离        float x = cur.x - viewCenter.x;        float y = cur.y - viewCenter.y;        //特殊情况，y=0        if (y == 0) {            if (x > 0) {                mdegree = -90;            } else if (x < 0) {                mdegree = 90;            }        } else {            //tan(x/y)换算出角度edge            float edge = (float) (Math.atan(Math.abs(x / y)) / (Math.PI) * 180);            if (x >= 0 && y > 0) {                //触摸点在分析图的4位置                mdegree = -edge;            } else if (x > 0 && y < 0) {                //触摸点在分析图的2位置                mdegree = -180 + edge;            } else if (x <= 0 && y < 0) {                //触摸点在分析图的1位置                mdegree = 180 - edge;            } else if (x < 0 && y > 0) {                //触摸点在分析图的3位置                mdegree = edge;            }        }    }    //用matrix矩阵旋转图片    public void rotate(float degree) {        //设置图片缩放比例，这里是1:1        matrix.setScale(1.0f, 1.0f);        //绕图片中心点进行旋转，旋转角度为degree        matrix.postRotate(degree, mbitmap.getWidth() / 2, mbitmap.getHeight() / 2);        //请求重绘        invalidate();    }}

下面对于Rview类中的mDegree()和rotate()方法，给出一张分析图。

3.在布局文件中，使用Rview。

activity_main.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:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin"    tools:context=".MainActivity">    <com.example.liutao.test.Rview xmlns:app="http://schemas.android.com/apk/res-auto"        android:id="@+id/mView"        android:layout_centerHorizontal="true"        android:layout_centerVertical="true"        android:layout_width="240dp"        android:layout_height="240dp"        app:src="@drawable/chuyin" /></RelativeLayout>

4.在MainActivity.java中引用布局文件activity_main.xml。
MainActivity.java

package com.example.liutao.test;import android.support.v7.app.ActionBarActivity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;public class MainActivity extends ActionBarActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }}

5.chuyin.png图片放到res/drawable目录下。

6.运行APP后就可以触摸图片转动它啦！

0 0