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 { CLEAR (0), class="lazy" data-src (1), DST (2), class="lazy" data-src_OVER (3), DST_OVER (4), class="lazy" data-src_IN (5), DST_IN (6), class="lazy" data-src_OUT (7), DST_OUT (8), class="lazy" data-src_ATOP (9), DST_ATOP (10), XOR (11), DARKEN (12), LIGHTEN (13), MULTIPLY (14), SCREEN (15), ADD (16), OVERLAY (17); Mode(int nativeInt) { this.nativeInt = nativeInt; } public final int nativeInt; }
class="lazy" data-src类,优先显示的是源图片。class="lazy" data-src_IN处理图片相交区域时,受到目标图片的Alpha值影响,当我们的目标图片为空白像素的时候,源图片也会变成空白,简单的来说就是用目标图片的透明度来改变源图片的透明度和饱和度,当目标图片的透明度为0时,源图片就不会显示。class="lazy" data-src_OUT用我们目标图片的透明度的补值来改变源图片的透明度和饱和度,当目标图片的透明度为不透明时,源图片就不会显示。class="lazy" data-src_ATOP当透明度为100%和0%时,class="lazy" data-src_IN和class="lazy" data-src_ATOP是通用的,当透明度不为上述的两个值时,class="lazy" data-src_ATOP比class="lazy" data-src_IN源图像的饱和度会增加,变得更亮一些。
DST类,优先显示的是目标图片。DST_IN在相交的时候以源图片的透明度来改变目标图片的透明度和饱和度,当源图片的透明度为0的时候,目标图片完全不显示。
其它的叠加效果,MULTIPLY可以把图片的轮廓取出来,LIGHTEN变亮效果。
三、刮刮卡效果
效果图
实现思路
利用PorterDuffXfermode中的模式class="lazy" data-src_OUT,先绘制最终呈现的图片并将图层保存起来,然后将手指移动的轨迹渲染到画布上,并绘制目标图片到画布上,最后用目标图片的透明度的补值来改变源图片的透明值,将最终呈现的图片显示在屏幕上。
代码实例
public class GuaCardView extends View { private Bitmap mclass="lazy" data-srcText; private Bitmap mclass="lazy" data-srcBitmap; 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); mclass="lazy" data-srcText = BitmapFactory.decodeResource(getResources(), R.drawable.guaguaka_text1); mclass="lazy" data-srcBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.guaguaka); mDstBitmap = Bitmap.createBitmap(mclass="lazy" data-srcBitmap.getWidth(),mclass="lazy" data-srcBitmap.getHeight(), Bitmap.Config.ARGB_8888); mPath = new Path(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //画最终呈现的图 canvas.drawBitmap(mclass="lazy" data-srcText,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); //利用class="lazy" data-src_OUT绘制原图 canvas.drawBitmap(mDstBitmap,0,0,mPaint); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.class="lazy" data-src_OUT)); canvas.drawBitmap(mclass="lazy" data-srcBitmap,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); }}以
上述内容就是Android中怎么实现一个刮刮卡效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341