Android刮刮乐效果-proterDuffXfermode的示例代码

先看看实现的效果

这个场景主要是模拟我们有些app里面的刮刮乐中奖的效果,主要是利用Android的proterDuffXfermode这个类去实现的。

proterDuffXfermode

在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果。PorterDuffXfermode的功能十分的强大,其他的应用场景这里就不多介绍,主要是看,刮刮乐的实现和原理。

public class PorterDuffXfermode extends Xfermode

PorterDuffXfermode 继承了Xfermode,使用的时候注意的API是Paint.setXfermode(Xfermode xfermode)。
PorterDuffXfermode支持以下十几种像素颜色的混合模式,分别为:CLEAR、SRC、DST、SRC_OVER、DST_OVER、SRC_IN、DST_IN、SRC_OUT、DST_OUT、SRC_ATOP、DST_ATOP、XOR、DARKEN、LIGHTEN、MULTIPLY、SCREEN。
这里是使用PorterDuff.Mode.DST_IN,取两层绘制交集,显示下层。这个模式,来进行操作的。

自定义view继承ImageView
代码比较少,我就直接来了

public class ProterDuffXfermodeView extends AppCompatImageView {
 private Bitmap mBgBitmap,mFgBitmap;
 private Paint mPaint;
 private Canvas mCanvas;
 private Path mPath;

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

  private void init() {
  //创建Paint
  mPaint=new Paint();
  //设置透明度
  mPaint.setAlpha(0);
  //设置Xfermode模式
  mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
  //Paint类型
  mPaint.setStyle(Paint.Style.STROKE);
  //Paint.Join.MITER-锐角,ROUND-圆弧,BEVEL-直线
  mPaint.setStrokeJoin(Paint.Join.ROUND);
  mPaint.setStrokeWidth(50);
  //线帽
  mPaint.setStrokeCap(Paint.Cap.ROUND);
  mPath=new Path();
  Drawable drawable =getDrawable();
  mBgBitmap=((BitmapDrawable)drawable).getBitmap();
  mFgBitmap=Bitmap.createBitmap(mBgBitmap.getWidth(),mBgBitmap.getHeight(),Bitmap.Config.ARGB_8888);
  mCanvas=new Canvas(mFgBitmap);
  mCanvas.drawColor(Color.GRAY);
 }
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    mPath.reset();
    mPath.moveTo(event.getX(), event.getY());
    break;
   case MotionEvent.ACTION_MOVE:
    mPath.lineTo(event.getX(), event.getY());
    break;
  }
  mCanvas.drawPath(mPath, mPaint);
  invalidate();
  return true;
 }
 @Override
 protected void onDraw(Canvas canvas) {
  canvas.drawBitmap(mBgBitmap, 0, 0,null);
  canvas.drawBitmap(mFgBitmap, 0, 0,null);
 }
}

首先有两个bitmap,一个是背景(刮刮乐的照片),一个是前置的(灰色遮挡)。
这里解释一下几个API

 //设置画笔的样式
  mPaint.setStyle(Paint.Style.FILL);//填充内容
  mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
  mPaint.setStyle(Paint.Style.STROKE);//描边
  //线帽
  mPaint.setStrokeCap(Paint.Cap.BUTT);//没有
  mPaint.setStrokeCap(Paint.Cap.ROUND);//圆的
  mPaint.setStrokeCap(Paint.Cap.SQUARE);//方形
	mPaint.setStrokeJoin(Paint.Join.MITER);//锐角
	mPaint.setStrokeJoin(Paint.Join.ROUND);//圆弧
	mPaint.setStrokeJoin(Paint.Join.BEVEL);//直线

别的API都好理解,这里就不介绍了。
onTouchEvent事件分发
主要使用了Path
Path封装了由直线和曲线(二次,三次贝塞尔曲线)构成的几何路径。你能用Canvas中的drawPath来把这条路径画出来(同样支持Paint的不同绘制模式),也可以用于剪裁画布和根据路径绘制文字。我们有时会用Path来描述一个图像的轮廓,所以也会称为轮廓线(轮廓线仅是Path的一种使用方法,两者并不等价)。
Path详解如果不了解可以看下这篇文章
moveTo 移动下一次操作的起点位置
lineTo 添加上一个点到当前点之间的直线到Path
主要用到了这两个api
最后就是onDraw().

XML直接引用自定义view即可。
当然,实现这个功能可能还有其它写法,这里只是提供一种思路,也是最简单的实现。

欢迎关注公众号 拖鞋王子猪 一起开心起来。

到此这篇关于Android刮刮乐效果-proterDuffXfermode的文章就介绍到这了,更多相关Android刮刮乐内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android实现刮刮乐示例分析

    微信公众号有很多都做刮刮乐的活动,本文就实现了刮刮乐的效果,具体代码如下: 首先要做一个类似橡皮擦的东西吧,然后才能把纸上的笔迹擦除 /** * FileName: SplashActivity.java * * @desc 橡皮擦功能,类似刮刮乐效果 * @author HTP * @Date 20140311 * @version 1.00 */ public class Text_Rubbler extends TextView { private float TOUCH_TOLERANC

  • Android studio实现刮刮乐的方法

    本文实例为大家分享了Android studio实现刮刮乐的具体代码,供大家参考,具体内容如下 MainActivity public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_mai

  • 基于Android自定义控件实现刮刮乐效果

    只是简单的实现了效果,界面没怎么做优化,不过那都是次要的啦!!相信大家都迫不及待的想看效果图了吧, 其中主要的彩票视图类和橡皮擦类都是通过代码的方式构建视图,布局文件就一个主activity_main 上代码!! 主activity: package com.guaguale; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; imp

  • Android刮刮乐效果-proterDuffXfermode的示例代码

    先看看实现的效果 这个场景主要是模拟我们有些app里面的刮刮乐中奖的效果,主要是利用Android的proterDuffXfermode这个类去实现的. proterDuffXfermode 在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果.PorterDuffXfermode的功能十分的强大,其他的

  • Android ItemDecoration 实现分组索引列表的示例代码

    本文介绍了Android ItemDecoration 实现分组索引列表的示例代码,分享给大家.具体如下: 先来看看效果: 我们要实现的效果主要涉及三个部分: 分组 GroupHeader 分割线 SideBar 前两个部分涉及到一个ItemDecoration类,也是我们接下来的重点,该类是RecyclerView的一个抽象静态内部类,主要作用就是给RecyclerView的ItemView绘制额外的装饰效果,例如给RecyclerView添加分割线. 使用ItemDecoration时需要继

  • Android 快速实现状态栏透明样式的示例代码

    在手机 app 开发过程中,经常会遇到一种需求,需要将 内容区域 顶到 状态栏 中去.这个时候,下面一段代码,就能很轻松解决问题了. 上代码之前先上效果图: 下面上一段代码: getWindow().requestFeature(Window.FEATURE_NO_TITLE); if(VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.

  • Android 实现无网络传输文件的示例代码

    最近的项目需要实现一个 Android 手机之间无网络传输文件的功能,就发现了 Wifi P2P(Wifi点对点)这么一个功能,最后也实现了通过 Wifi 隔空传输文件 的功能,这里我也来整理下代码,分享给大家. Wifi P2P 是在 Android 4.0 以及更高版本系统中加入的功能,通过 Wifi P2P 可以在不连接网络的情况下,直接与配对的设备进行数据交换.相对于蓝牙,Wifi P2P 的搜索速度和传输速度更快,传输距离更远 实现的效果如下所示: 客户端.png 服务器端.png 一

  • Android 带箭头的指引tipLayout实现示例代码

    本文介绍了Android 带箭头的指引tipLayout实现示例代码,分享给大家,具体如下: 如上是从UI接过来的设计图,要求三角形指示器需要动态对齐上面的文本,需要动态的实现对其三角形. 引用方式 compile 'com.xiaowei:TriangleTipLayout:1.0.0' 实现思路 准备一个三角形指引的图片即可. 先上代码 final TextPaint textPaint = mTextView.getPaint(); final int textHeight = (int)

  • Android PC投屏功能实现的示例代码

    本文介绍了Android PC投屏功能实现的示例代码,分享给大家,具体如下: 代码地址 :https://github.com/deepsadness/MediaProjectionDemo 效果预览 投屏效果预览 简单说明: 使用Android MediaProjection Api来完成视频的截图 通过WebSocket进行链接.将图片传递给网页 想法来源 看到vysor,觉得特别好玩,于是就想着自己能不能试着做一个类似的功能出来.搜索了相关实现.发现网上已经有网友针对vysor做了分析.于

  • Android Studio实现简单音乐播放功能的示例代码

    项目要求 基于Broadcast,BroadcastReceiver等与广播相关的知识实现简单的音乐播放功能,包括音乐的播放.暂停.切换.进度选择.音量调整. 设计效果 (进度条时间刷新功能还没有实现) 实现思路 音乐服务端负责播放音乐和收发广播的功能.当音乐服务端作为接收器时,只能接收到主页面广播的控制消息:作为发送器时,向主页面发送歌曲信息更新的消息 主页面负责进度条以及音量按钮的监听,同时也有收发广播的功能.当主页面作为接收器时,只能接收到音乐服务端广播的歌曲信息更新的消息:作为发送器时,

  • Android利用贝塞尔曲线绘制动画的示例代码

    目录 彩虹系列 弹簧动画 复杂立体感动画 总结 前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美.好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借由动画驱动贝塞尔曲线绘制看看动起来的贝塞尔曲线什么效果. 彩虹系列 通过动画控制绘制的结束点,就可以让贝塞尔曲线动起来.例如下面的动图展示的效果,看起来像搭了一个滑滑梯一样.实际上就是用7条贝塞尔曲线实现的,我们使用了 Animation 对象的值来控制绘制的结束点,从而实现了对应的动画效果. 具体源码如下

  • 基于Python实现开心消消乐小游戏的示例代码

    目录 前言 一.准备 1.1 图片素材 1.2 音频素材 二.代码 2.1 导入模块 2.2 游戏音乐设置 2.3 制作树类 2.4 制作鼠标点击效果 2.5 制作出现元素 2.6 数组 2.7 制作人物画板 三.效果展示(仅部分) 3.1 初始页面 3.2 第一关画面 3.3 失败画面 3.4 第十关画面 穿过云朵升一级是要花6个金币的,有的时候金币真的很重要 前言 嗨喽,大家好呀!这里是魔王~ 一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近. 种子落地后吸收了池塘的水

  • Android利用Flutter path绘制粽子的示例代码

    目录 前言 绘制 基本轮廓 粽叶 嘴巴 眼睛 腮红 手&脚 头巾 咸甜是一家 发声 动画控制嘴巴开合 用到的技术点 总结 前言 大家好,端午将至,首先提前祝小伙伴端午安康,端午作为中华民族的非常重要的传统节日,粽子那是必不可少的,但是你真的知道粽子的历史吗? 今天跟随本篇文章用Flutter path画一个会科普节日的的粽子吧- 绘制 基本轮廓 首先我们需要将粽子的基本轮廓绘制出来,通过图片可以看到粽子的轮廓是一个圆圆的三角形状, 本篇文章所有的图形都是用纯Path路径制作,这里我们可以将粽子的

随机推荐