简单实现Android刮刮卡效果

本文实例为大家分享了Android仿刮刮卡效果展示的具体代码,供大家参考,具体内容如下

一、Xfermode

通过使用Xfermode将绘制的图形的像素和Canvas上对应位置的像素按照一定的规则进行混合,形成新的像素,再更新到Canvas中形成最终的图形,使用的时候都是通过Paint.setXfermode来实现。

二、混合模式分类

PorterDuff则是用于描述数字图像合成的基本手法,通过组合使用Porter-Duff操作,可完成任意2D图像的合成。

public class PorterDuff {

  // these value must match their native equivalents. See SkPorterDuff.h
  public enum Mode {
    /** [0, 0] */
    CLEAR    (0),
    /** [Sa, Sc] */
    SRC     (1),
    /** [Da, Dc] */
    DST     (2),
    /** [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] */
    SRC_OVER  (3),
    /** [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc] */
    DST_OVER  (4),
    /** [Sa * Da, Sc * Da] */
    SRC_IN   (5),
    /** [Sa * Da, Sa * Dc] */
    DST_IN   (6),
    /** [Sa * (1 - Da), Sc * (1 - Da)] */
    SRC_OUT   (7),
    /** [Da * (1 - Sa), Dc * (1 - Sa)] */
    DST_OUT   (8),
    /** [Da, Sc * Da + (1 - Sa) * Dc] */
    SRC_ATOP  (9),
    /** [Sa, Sa * Dc + Sc * (1 - Da)] */
    DST_ATOP  (10),
    /** [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc] */
    XOR     (11),
    /** [Sa + Da - Sa*Da,
       Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */
    DARKEN   (12),
    /** [Sa + Da - Sa*Da,
       Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */
    LIGHTEN   (13),
    /** [Sa * Da, Sc * Dc] */
    MULTIPLY  (14),
    /** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */
    SCREEN   (15),
    /** Saturate(S + D) */
    ADD     (16),
    OVERLAY   (17);

    Mode(int nativeInt) {
      this.nativeInt = nativeInt;
    }

    /**
     * @hide
     */
    public final int nativeInt;
  }

1、SRC类,优先显示的是源图片。SRC_IN处理图片相交区域时,受到目标图片的Alpha值影响,当我们的目标图片为空白像素的时候,源图片也会变成空白,简单的来说就是用目标图片的透明度来改变源图片的透明度和饱和度,当目标图片的透明度为0时,源图片就不会显示。SRC_OUT用我们目标图片的透明度的补值来改变源图片的透明度和饱和度,当目标图片的透明度为不透明时,源图片就不会显示。SRC_ATOP当透明度为100%和0%时,SRC_IN和SRC_ATOP是通用的,当透明度不为上述的两个值时,SRC_ATOP比SRC_IN源图像的饱和度会增加,变得更亮一些。

2、DST类,优先显示的是目标图片。DST_IN在相交的时候以源图片的透明度来改变目标图片的透明度和饱和度,当源图片的透明度为0的时候,目标图片完全不显示。

3、其它的叠加效果,MULTIPLY可以把图片的轮廓取出来,LIGHTEN变亮效果。

三、刮刮卡效果

1、效果图

2、实现思路
利用PorterDuffXfermode中的模式SRC_OUT,先绘制最终呈现的图片并将图层保存起来,然后将手指移动的轨迹渲染到画布上,并绘制目标图片到画布上,最后用目标图片的透明度的补值来改变源图片的透明值,将最终呈现的图片显示在屏幕上。

3、代码实例

public class GuaCardView extends View {

  private Bitmap mSrcText;
  private Bitmap mSrcBitmap;
  private Bitmap mDstBitmap;
  private Paint mPaint;
  private Path mPath;
  private float mStartX,mStartY;

  public GuaCardView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setLayerType(LAYER_TYPE_SOFTWARE,null);
    mPaint = new Paint();
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(45);
    mSrcText = BitmapFactory.decodeResource(getResources(), R.drawable.guaguaka_text1);
    mSrcBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.guaguaka);
    mDstBitmap = Bitmap.createBitmap(mSrcBitmap.getWidth(),mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);
    mPath = new Path();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //画最终呈现的图
    canvas.drawBitmap(mSrcText,0,0,mPaint);
    int layerId = canvas.saveLayer(0,0,getWidth(),getHeight(),null,Canvas.ALL_SAVE_FLAG);
    //把手指轨迹画到画布上
    Canvas c = new Canvas(mDstBitmap);
    c.drawPath(mPath,mPaint);
    //利用SRC_OUT绘制原图
    canvas.drawBitmap(mDstBitmap,0,0,mPaint);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
    canvas.drawBitmap(mSrcBitmap,0,0,mPaint);
    mPaint.setXfermode(null);
    canvas.restoreToCount(layerId);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    switch(event.getAction()){
      case MotionEvent.ACTION_DOWN:
        mPath.moveTo(event.getX(),event.getY());
        mStartX = event.getX();
        mStartY = event.getY();
        return true;
      case MotionEvent.ACTION_MOVE:
        float endX = (mStartX+event.getX())/2;
        float endY = (mStartY+event.getY())/2;
        mPath.quadTo(mStartX,mStartY,endX,endY);
        mStartX = event.getX();
        mStartY = event.getY();
        break;
      default:
        break;
    }
    postInvalidate();
    return super.onTouchEvent(event);
  }
}

以

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

(0)

相关推荐

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

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

  • Android刮刮卡效果实现代码

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

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

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

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

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

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

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

  • 简单实现Android弹出菜单效果

    本文实例为大家分享了Android弹出菜单效果的具体代码,供大家参考,具体内容如下 功能描述:用户单击按钮弹出菜单.当用户选择一个菜单项,会触发MenuItemClick事件并让弹出的菜单消失:如果用户在菜单外单击,则直接消失弹出的菜单.当菜单消失时,会引发DismissEvent事件(利用此事件可在菜单消失时做一些后续处理). 1.运行效果 2.添加菜单项 在Resources文件夹下添加一个menu子文件夹,然后在此子文件夹下添加一个名为demo07_popup_menu.xml的文件: <

  • 简单实现Android刮刮卡效果

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

  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

  • 分享Android仿刮奖效果控件

    本文实例为大家分享了Android刮刮卡效果控件,供大家参考,具体内容如下 刮刮卡类: package com.reyo.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Paint; import android.gr

  • javascript+canvas实现刮刮卡抽奖效果

    运用canvas做的简单刮刮卡效果,每次刷新可重新测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

  • jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】

    本文实例讲述了jQuery使用eraser.js插件实现擦除.刮刮卡效果的方法.分享给大家供大家参考,具体如下: jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件.jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小. 使用需知: 必须确保图片是完全加载之后调用eraser(),否则它不会工作.插件正常运行在Safari,Chrome OS X和Windows,Android

  • Android使用Canvas对象实现刮刮乐效果

    在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

随机推荐