空间 >博客>

原 Android基础入门教程——8.3.7 Paint API之—— Xfermode与PorterDuff详解(四)

呵 发表于 5天前 (2015-10-27 14:43:33)  |  评论（0）  |  阅读次数（20）| 0 人收藏此文章,     

Android基础入门教程——8.3.7 Paint API之—— Xfermode与PorterDuff详解(四)

标签（空格分隔）： Android基础入门教程

本节引言：

上节我们写了关于Xfermode与PorterDuff使用的第一个例子：圆角&圆形图片ImageView的实现，
我们体会到了PorterDuff.Mode.DST_IN给我们带来的好处，本节我们继续来写例子练练手，
还记得Android基础入门教程——8.3.2 绘图类实战示例给大家带来的拔掉美女衣服的实现吗？

当时我们的实现方案是，将手指触碰区域附近的20*20个像素点设置为透明，效果图是这样的：

不知道你有没有发现一个问题，我们擦美女衣服的时候，擦拭的时候都是方块的，但是我们画图板
画图的时候，划线都是很平滑的，有没有办法将两者结合起来，我们擦衣服时也是圆滑的呢？
答案肯定是有的，就是使用Xfermode咯！本节我们使用另一个模式，DST_OUT模式！
在不相交的地方绘制目标图

如果你忘记了某个模式或者连18种模式都没见过的话，那么请移步：
Android基础入门教程——8.3.5 Paint API之—— Xfermode与PorterDuff详解(二)
另外，还是要贴下PorterDuff.Mode的效果图：

嗯，话不多说，开始本节内容~

1.要实现的效果图以及实现流程分析：

要实现的效果图：

嗯，不知道你看了那个Gif图多少次了呢？不知道图中是否适合大家的口味，小猪
是从别人的APP上扒下来的，别问我番号或者留邮箱什么的，我什么都不知道~找番什么的，
问群里的老司机——基神吧，好的，我们来分析下实现流程吧~

可能看上去有点复杂，其实不然，代码超简单的说~

2.代码实现：

直接就一个自定义View——StripMeiZi.java

{ private Paint mPaint = new Paint(); private Path mPath = new Path(); private Canvas mCanvas; private Bitmap mBeforeBitmap; private Bitmap mBackBitmap; private int mLastX,mLastY; Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT); public StripMeiZi(Context context) { this(context, null); } public StripMeiZi(Context context, AttributeSet attrs) { super(context, attrs); screenW = ScreenUtil.getScreenW(context); screenH = ScreenUtil.getScreenH(context); init(); } public StripMeiZi(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } () { //背后图片，这里让它全屏 mBackBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.meizi_back); mBackBitmap = Bitmap.createScaledBitmap(mBackBitmap, screenW, screenH, false); //前面的图片，并绘制到Canvas上 mBeforeBitmap = Bitmap.createBitmap(screenW, screenH, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBeforeBitmap); mCanvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.meizi_before), null, new RectF(0, 0, screenW, screenH), null); //画笔相关的设置 mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND); // 圆角 mPaint.setStrokeCap(Paint.Cap.ROUND); // 圆角 mPaint.setStrokeWidth(80); // 设置画笔宽 } () { mPaint.setXfermode(mXfermode); mCanvas.drawPath(mPath, mPaint); } (Canvas canvas) { canvas.drawBitmap(mBackBitmap, 0, 0, null); drawPath(); canvas.drawBitmap(mBeforeBitmap, 0, 0, null); } (MotionEvent event) { int action = event.getAction(); int x = (int) event.getX(); int y = (int) event.getY(); switch (action) { case MotionEvent.ACTION_DOWN: mLastX = x; mLastY = y; mPath.moveTo(mLastX, mLastY); break; case MotionEvent.ACTION_MOVE: int dx = Math.abs(x - mLastX); int dy = Math.abs(y - mLastY); if (dx > 3 || dy > 3) mPath.lineTo(x, y); mLastX = x; mLastY = y; break; } invalidate(); return true; } }