Android刮刮卡效果实现代码

本文实例为大家分享了Android刮刮卡效果，供大家参考，具体内容如下

android实现底层一张图片，上层一个遮罩层，触摸滑动按手指滑动路径实现去除遮罩效果，类似于抽奖的刮刮卡一样，不多说先上张效果图：

直接上代码：

XfermodeView.java

/**
 * Created by 57 on 2016-4-21.
 */
public class XfermodeView extends View{
 private Bitmap mBgBitmap,mFgBitmap;
 private Paint mPaint;
 private Canvas mCanvas;
 private Path mPath; 

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

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

 public XfermodeView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init();
 } 

 @Override
 protected void onDraw(Canvas canvas) { 

 canvas.drawBitmap(mBgBitmap,0,0,null);
 canvas.drawBitmap(mFgBitmap,0,0,null);
 } 

 private void init() {
 mPaint = new Paint();
 mPaint.setAlpha(0);
 mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setStrokeJoin(Paint.Join.ROUND);
 mPaint.setStrokeWidth(50);
 mPaint.setStrokeCap(Paint.Cap.ROUND);
 mPath = new Path();
 mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test5);
 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;
 }
}

Xfermode有三个子类 :
AvoidXfermode  指定了一个颜色和容差，强制Paint避免在它上面绘图(或者只在它上面绘图)。
PixelXorXfermode  当覆盖已有的颜色时，应用一个简单的像素异或操作。
PorterDuffXfermode  这是一个非常强大的转换模式，使用它，可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint

如何与已有的Canvas图像进行交互。

从上面我们可以看到PorterDuff.Mode为枚举类,一共有16个枚举值:
1.PorterDuff.Mode.CLEAR 
  所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
   显示上层绘制图片
3.PorterDuff.Mode.DST
  显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
  正常绘制显示，上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
  上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN
   取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN
  取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT
 取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
 取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
 取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
 取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR
  异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN
  取两图层全部区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
  取两图层全部，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
  取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
  取两图层全部区域，交集部分变为透明色

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 简单实现Android刮刮卡效果

    简单实现Android刮刮卡效果

    本文实例为大家分享了Android仿刮刮卡效果展示的具体代码,供大家参考,具体内容如下 一.Xfermode 通过使用Xfermode将绘制的图形的像素和Canvas上对应位置的像素按照一定的规则进行混合,形成新的像素,再更新到Canvas中形成最终的图形,使用的时候都是通过Paint.setXfermode来实现. 二.混合模式分类 PorterDuff则是用于描述数字图像合成的基本手法,通过组合使用Porter-Duff操作,可完成任意2D图像的合成. public class Porter

  • Android刮刮卡实现原理与代码讲解

    Android刮刮卡实现原理与代码讲解

    实现刮刮卡我们可以Get到哪些技能? * 圆形圆角图片的实现原理 * 双缓冲技术绘图 * Bitmap获取像素值数据 * 获取绘制文本的长宽 * 自定义View的掌握 * 获取屏幕密度 * TypeValue.applyDemension * Canvas的一些绘制方法 * Paint的一些常用的属性 * Path的一些方法 刮刮卡的实现原理图 这里用到了13中模式中的DstOut这种模式. 对于这幅图而言,首先绘制Dst,设置xfermode,再绘制Src. 刮刮卡的实现原理步骤 1.绘制显示

  • Android App中实现简单的刮刮卡抽奖效果的实例详解

    Android App中实现简单的刮刮卡抽奖效果的实例详解

    主要思想: 将一个view设计成多层:背景层,含中奖信息等: 遮盖层,用于刮奖,使用关联一个Bitmap的Canvas 在该Bitmap上,使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作) 使用paint.setXfermode 来进行消除手势滑动区域 public class GuaView extends View { private Bitmap mBitmap; //遮盖的图层 private Canvas mCanvas; //绘制遮盖图层 privat

  • Android开发之自定义刮刮卡实现代码

    Android开发之自定义刮刮卡实现代码

    关于刮刮卡的实现效果不需要做太多解释,特别是在电商APP中,每当做活动的时候都会有它的身影存在,趁着美好周末,来实现下这个效果,也算是对零碎知识点的一个整合. 所涉及的知识点: 1.自定义View的一些流程 2.双缓冲绘图机制 3.Paint的绘图模式 4.触摸事件的一些流程 5.Bitmap的相关知识 实现思路: 其实非常简单,首先我们需要确定所要绘图的区域,然后对这块区域进行多层的绘图(背景层,前景层),然后去监听触摸事件,把手指触摸的区域的前景层给消除即可. 首先我们先来实现一个简单版的

  • Android刮刮卡功能具体实现代码

    Android刮刮卡功能具体实现代码

    今天整理之前的代码,忽然看到之前自己写的一个刮刮卡,整理下以便以后使用,同时分享给需要的朋友,如有错误,还请多多指正. 实现的步骤,其实就是徒手画三个图层叠加在一起,最上层是绘制需要的问题,就是以上所述的"骚年,刮我吧",第二层就是覆盖宽高的灰层,第三层是结果层,多的不啰嗦了,具体实现如下,附上详细注释. /** * * created by zero on 2016-9-9 * * 刮刮卡 * */ public class ScratchView extends View { pu

  • Android DrawerLayout实现抽屉效果实例代码

    Android DrawerLayout实现抽屉效果实例代码

    官网:https://developer.android.com/training/implementing-navigation/nav-drawer.html 贴上主要的逻辑和布局文件: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schema

  • Android实现水波纹效果实例代码

    Android实现水波纹效果实例代码

    效果图 attrs.xml 自定义属性 <declare-styleable name="RippleAnimationView"> <attr name="ripple_anim_color" format="color" /> <!-- 水波纹填充类型 --> <attr name="ripple_anim_type" format="enum"> <

  • Android刮刮卡效果实现代码

    Android刮刮卡效果实现代码

    本文实例为大家分享了Android刮刮卡效果,供大家参考,具体内容如下 android实现底层一张图片,上层一个遮罩层,触摸滑动按手指滑动路径实现去除遮罩效果,类似于抽奖的刮刮卡一样,不多说先上张效果图: 直接上代码: XfermodeView.java /** * Created by 57 on 2016-4-21. */ public class XfermodeView extends View{ private Bitmap mBgBitmap,mFgBitmap; private P

  • Android GridView实现动画效果实现代码

    Android GridView实现动画效果实现代码

     Android GridView实现动画效果 项目中用到的一些动画,GridView的Item依次从屏幕外飞入到相应位置,附上相关代码: MainActivity.Java package com.mundane.gridanimationdemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.an

  • Android 实现伸缩布局效果示例代码

    Android 实现伸缩布局效果示例代码

    最近项目实现下面的图示的效果,本来想用listview+gridview实现,但是貌似挺麻烦的于是就用flowlayout 来addview实现添加伸缩的效果,实现也比较简单. mainActivity 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android控件Gallery3D效果实例代码

    Android控件Gallery3D效果实例代码

    贴上代码: 1.扩展Gallery: 复制代码 代码如下: public class GalleryFlow extends Gallery { private Camera mCamera = new Camera();//相机类 private int mMaxRotationAngle = 60;//最大转动角度 private int mMaxZoom = -300;////最大缩放值 private int mCoveflowCenter;//半径值 public GalleryFlo

  • Android 新手引导蒙层效果实现代码示例

    Android 新手引导蒙层效果实现代码示例

    先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLayout比较方便),然后把这个linearlayout的背景设置成#88000000,之后就是给这个linearlayout动态增加子view,初步效果就能达到. 下面直接上代码: public void showGuideView() { View view = getWindow().getDe

  • Android开发之毛玻璃效果实例代码

    Android开发之毛玻璃效果实例代码

    这是在网上找的,不过忘了在哪里找的,经过很多比较测试,发现这个方法不会 oom,目前来看 我一直没有遇过,今天才找到这个以前建立的工程,记录下来: 先给大家展示下效果图: public class FastBlur { public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) { // This is a compromise between Gaussian Blur and Box

  • Android 知乎广告效果实现代码

    Android 知乎广告效果实现代码

    知乎的广告效果一直想写,无奈最近才有时间. 先看效果: 肯定要自定义view了,一个类似imageView的控件,还要给它一个值用来指定广告图片的显示位置. 问题: 1.图片如何在范围内(单个item范围)上下移动,如窗户一般,后面的图是可以动的,但是窗户是固定的. 2.图片移动的时机肯定和recycleView滚动监听item有关,用哪些方法? 解决: 1.窗户问题首先想到imageView的scaleType属性,而scaleType中只有matrix和center可以在不缩放图片的情况下显

  • Android TextView 字体滚动效果

    Android TextView 字体滚动效果 实例代码: package com.godinsec.seland.ui.tools; import android.content.Context; import android.text.TextUtils.TruncateAt; import android.util.AttributeSet; import android.widget.TextView; public class MarqueTextView extends TextVi

随机推荐