【Android界面实现】使用Canvas对象实现“刮刮乐”效果
2023-09-14 09:10:09 时间
在淘宝、京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱。从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这样的刮刮乐的效果呢?当然能够,本篇文章将介绍使用Canvas这个对象,怎样实现“刮刮乐”的效果。
先看效果图
以下我们看一下怎样使用代码实现
布局文件
<FrameLayout 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" > <ImageView android:id="@+id/after" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/a" /> <ImageView android:id="@+id/before" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/b" /> </FrameLayout>
Activity代码
public class MainActivity extends Activity implements OnTouchListener { private ImageView imgafter; private ImageView imgbefore; private Canvas canvas; private Paint paint; private Bitmap bitmap; private Bitmap before; private Bitmap after; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imgafter = (ImageView) findViewById(R.id.after); imgbefore = (ImageView) findViewById(R.id.before); // 获得图片 after = BitmapFactory.decodeResource(getResources(), R.drawable.a); before = BitmapFactory.decodeResource(getResources(), R.drawable.b); imgafter.setImageBitmap(after); imgbefore.setImageBitmap(before); // 创建能够改动的空白的bitmap bitmap = Bitmap.createBitmap(before.getWidth(), before.getHeight(), before.getConfig()); imgbefore.setOnTouchListener(this); paint = new Paint(); paint.setStrokeWidth(5); paint.setColor(Color.BLACK); // 创建画布 canvas = new Canvas(bitmap); canvas.drawBitmap(before, new Matrix(), paint); } @Override public boolean onTouch(View arg0, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_MOVE: int newX = (int) event.getX(); int newY = (int) event.getY(); // 将滑过的地方变为透明 for (int i = -10; i < 10; i++) { for (int j = -10; j < 10; j++) { if ((i + newX) >= before.getWidth() || j + newY >= before.getHeight() || i + newX < 0 || j + newY < 0) { return false; } bitmap.setPixel(i + newX, j + newY, Color.TRANSPARENT); } } imgbefore.setImageBitmap(bitmap); break; } return true; } }
能够看到。代码非常easy。几十行代码就实现了简单的“刮刮乐”的效果。
原理是这种,一開始两张图片重叠。显示的还没有刮开的效果。
在Activity的onTouch方法中,我们对滑动事件进行监听。当用户用手指滑动屏幕的时候,我们将滑过的画布部分的颜色设置为透明,同一时候,把改变之后的bitmap对象设置为ImageView的背景,这样,隐藏在后面的图片就显示出来了,也就实现了刮刮乐的效果。
相关文章
- Android端谷歌账号无法登录
- android开机动画多长时间_Android开机动画原理分析
- android图片资源加密,Android平台图像文件加密
- android签名命令行,Android系统签名位置及命令
- java中的onresume_android onCreate onResume中获取 View 宽高为0分析
- android autosize原理,Android屏幕适配头条:autosize的原理
- strictmode android,(十三)Android 性能优化 StrictMode
- mac 电脑android环境变量设置,mac上Android环境变量配置[通俗易懂]
- 测试android sdk是否安装成功,配置Android SDK
- android短信验证码方案,Android开发之属于你的短信验证码(一)
- iphone4装android,iPhone4可安装Android实现双系统启动.pdf
- android telephony 原理解析与开发指南_Android逆向pdf
- Android n_android 反编译
- android 复制控件,Android长按复制文本功能[通俗易懂]
- 【Android FFMPEG 开发】FFMPEG 音视频同步 ( 音视频同步方案 | 视频帧 FPS 控制 | H.264 编码 I / P / B 帧 | PTS | 音视频同步 )
- 【Android 内存优化】Bitmap 图像尺寸缩小 ( 考虑像素密度、针对从不同像素密度资源中解码对应的 Bitmap 对象 | inDensity | inTargetDensity )
- 【Android 逆向】类加载器 ClassLoader ( 使用 DexClassLoader 动态加载字节码文件 | 拷贝 DEX 文件到内置存储 | 加载并执行 DEX 字节码文件 )
- 【错误记录】Android Studio 中 Gradle 面板 Task 不显示问题 ( 菜单栏 / File / Settings / Experimental 取消勾选 Do not bui )
- 【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 )
- 多图:开发者文档揭示 Android Auto 第三方应用 UI 规范