`
yidongkaifa
  • 浏览: 4060768 次
文章分类
社区版块
存档分类
最新评论

如何翻转一张图片

 
阅读更多

android中对图片操作的集中在变换矩阵Matrix和graphic.Camera上。Matrix提供了二维的变换translate平移,scale缩放,rotate旋转,skew倾斜;Camera提供了翻转等操作。

先看结果:

旋转图片

再看代码:

package org.daniel.android.suit.widget;

import org.daniel.android.suit.R;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Camera;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * 可以周期性翻转的图片
 * 
 * @author Daniel.J <br>
 *         email:yangjiao623@gmail.com
 * @version 创建时间: Jan 5, 2013 4:13:47 PM
 * */
public class RotateView extends View {
	private Camera mCamera;
	private Bitmap mBitmap;
	private Paint mPaint;
	private Matrix mMatrix;
	private int mDegree;
	private RollRunnable mRollRunnable;
	// 5秒转一圈
	private static final int INTERVAL = 5 * 1000 / 360;

	public RotateView(Context context) {
		super(context);
		init(context);
	}

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

	public RotateView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init(context);
	}

	private void init(Context context) {
		// android.graphics.Camera,别引用错了
		mCamera = new Camera();
		mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rain);
		// Paint可以设置透明度
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		// 变换矩阵
		mMatrix = new Matrix();
		// 做动画用的
		mRollRunnable = new RollRunnable();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		mMatrix.reset();

		mCamera.save();
		// mDegree是旋转的角度,随时间周期性变化。
		// 这里让图片围绕Y轴旋转,还可一围绕X轴和Z轴旋转
		mCamera.rotateY(mDegree);
		// 获得变换矩阵
		mCamera.getMatrix(mMatrix);
		mCamera.restore();

		// pre处理将要送给Camera变换的图片;post处理Camera变换之后的图片
		// 顺序:pre2 -> pre1 -> camera -> post1 -> post2

		// 在翻转前将图片移动到中心对应于原点的地方
		mMatrix.preTranslate(-mBitmap.getWidth() / 2, -mBitmap.getHeight() / 2);
		// 将翻转之后的图片移动到画布的中央
		mMatrix.postTranslate(getWidth() / 2, getHeight() / 2);

		canvas.drawBitmap(mBitmap, mMatrix, mPaint);
	}

	/**
	 * 开始旋转图片
	 * */
	public void start() {
		removeCallbacks(mRollRunnable);
		post(mRollRunnable);
	}

	/**
	 * 停止旋转图片
	 * */
	public void stop() {
		removeCallbacks(mRollRunnable);
	}

	/**
	 * android自带的动画都是通过向handler发送重绘请求来做的,<br>
	 * 感觉SurfaceView是给相机预览和openGL用的。普通动画用不上<br>
	 * 通过handler做动画的好处是开销小
	 */
	private class RollRunnable implements Runnable {

		@Override
		public void run() {
			// 周期性变换角度
			mDegree++;
			mDegree = mDegree == 360 ? 0 : mDegree;
			// 最终调用ViewRoot,给handler发送刷新请求。所以说,刷新也不是同步的
			invalidate();
			// 延时重绘,给handler发送下次重绘
			postDelayed(this, INTERVAL);
		}

	}
}



分享到:
评论

相关推荐

    jquery图片点击翻转效果(扑克牌翻转效果)

    jquery图片点击翻转效果,与扑克牌翻转效果一样,点击后图片翻转,显示背后的图片,效果不错,代码完整。

    android图片翻转动画

    实现android图片翻转效果,可先到我博客看看效果再下载

    jQuery马赛克图片翻转显示效果.rar

    jQuery马赛克图片翻转,图片与图片之间的切换以马赛克的方式进行,本效果可以应用于焦点图切换中,不过本效果只是使用马赛克完成图片的拼接显示,只是一张图片的显示效果,演示了jquery.flip.min.js插件的用法。

    翻转的图片切换flash html.rar

    图片翻转切换的图片导航特效Flash完整版,图片大小:120x75 一共可调用14张图片。打开运行页面会看到图片一张一张像翻牌一样反过来,切换至另外一张图片,形成一个很不错的整体效果。

    vue iview多张图片大图预览、缩放翻转

    主要为大家详细介绍了vue iview多张图片大图预览、缩放翻转,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    jQuery/CSS3图片翻转特效 可水平垂直翻转

    这是一款基于jQuery和CSS3的图片翻转特效,每一张图片都有文字标题悬浮在图片上,点击切换按钮,每一张图片均会进行水平或者垂直翻转,翻转效果非常酷,有3D立体的视觉效果。CSS3的运用让这些图片都显得十分精神。

    jQuery图片3d翻转切换展示幻灯片特效

    这是一款使用jQuery和css3制作的图片3d翻转切换展示幻灯片特效。该图片图片展示幻灯片特效中当鼠标点击图片时,图片以水平或垂直3d翻转的方式切换到下一张图片,还可以使用鼠标滚轮来前后切换图片。

    Wpf 实现图片分割、扩大、缩小、翻转、移动实例代码

    利用WPF技术实现的选择一张大图片后自动将其分解成您指定的块数,并可以显示在您指定的Element中,小图片间距可以自定义,该技术在代码中提供了动态库! 同时提供了图片的扩大、缩小、翻转实例代码,您可以在此基础...

    jQuery鼠标悬停翻转显示隐藏说明图片

     鼠标悬停在图片上后,显示隐藏的另外一张图片,鼠标移走后返回之前图片,整个过程带有翻转效果 原理:  附件提供了7个单元的翻转效果,其原理只有一个,其他的只是相对定位绝对定位实现而已。  ...

    js+html实现图片或者div模块的翻转效果

    js+html实现图片或者div模块的翻转效果。当前图片或者div点击之后翻转显示另一张图片或者div

    翻转年份背景的工作总结计划PPT模板.zip

    幻灯片模板封面,使用了一张写有年份的蓝色翻转立体方块作为背景图片,与年终工作总结、新年工作计划主题搭配。模板下方使用了多个蓝色六边形装饰。 PowerPoint模板内容页,使用了苹果电脑、iPad、手机、员工活动、...

    翻转数字方块背景的工作总结计划PPT模板.zip

    幻灯片模板封面,使用了一张2018-2019翻转的黄色立体方块组合作为素材。黄色与灰色交叉的三角形作为PPT背景图片。 PowerPoint模板内容页面,使用了黄色与灰色搭配,设计了25张扁平化幻灯片图表。方便制作工作总结...

    jQuery实现马赛克图片拼接翻转动画

    之前我们分享过很多炫酷的jQuery图片特效,有空大家可以看看...今天我们要再来分享一款基于jQuery的图片特效,它的效果是图片马赛克翻转动画,并且将这些马赛克块状图片拼接起来组成一张完整的图片,翻转动画非常的酷。

    CSS3 3D立体图片翻转焦点图

    这是一款看上去非常简易的图片播放焦点图插件,插件利用了CSS3相关属性,实现图片的翻转动画。之前我们也刚分享过一款基于CSS3的图片悬停翻转动画,利用的是相同的原理,不过这是在翻转的过程中切换成另外一张图片。

    VB图片翻转效果

    VB图片翻转效果,在代码编辑窗口中选择一张JPG或GIF图像,程序可把此图像进行水平翻转、垂直翻转,翻转过程中比例会失真,因此本程序还需要进一步处理,先发上来初级阶段的完整代码供参考吧。 运行环境:Windows/VB...

    Gitee开源一个react封装的图片预览组件

    可以使用键盘的箭头键进行上一张和下一张图片的切换,同时也支持使用键盘的上下箭头进行放大和缩小。 可以通过拖拽图片进行位置的调整,鼠标按下开始拖拽,松开结束拖拽。 可以进入全屏模式查看图片,再次点击退出...

    vue实现简易图片左右旋转,上一张,下一张组件案例

    主要介绍了vue实现简易图片左右旋转,上一张,下一张组件案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    C#2012写的WinForm版的图片查看编辑器

    用C#2012 .net4.5写的图片浏览器,支持png、jpg、bmp、gif的图片,功能有查看缩略图,显示上一张、下一张、图片放大与缩小、垂直翻转、水平翻转,旋转90、180、270度,关联图片格式(即双击图片会以该软件打开),...

    java课程设计图片浏览器

    图片浏览器最基本的功能是能浏览一个目录中的所有图片,并可以点击浏览上一张图片或者下一张图片,还有对图片放大与缩小,或者翻转图片等操作,在这里,实现了图片的浏览功能,导航功能(下一张、上一张),放大缩小...

Global site tag (gtag.js) - Google Analytics