Android PorterDuffXfermode 图像混合,实现字母书写

先来个效果样式，实现效果如下图所示：

效果图.gif

简单说效果主要是对图片做 mask（遮罩）实现，然后再实现可书写的效果。下面步入正题。

1.PorterDuffXfermode

做遮罩需要使用到 PorterDuffXfermode 的相关用法，下图来自网上：

PorterDuff.Mode展示


黄色的圆是DST下层，先进行绘制

蓝色的矩形是SRC上层，后进行绘制

由图可看出，PorterDuffXfermode 主要用于两种图型相互组合后形成所要的效果，使用方式就是调用Paint对象的setXfermode(PorterDuffXfermode model)方法即可。


pain.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

现在我们要实现效果图所展示的遮罩效果。

首先，初始化 paint 和 DST


@Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);
        int centerX = w/2;
        int centerY = h/2;
        int offset = width/4;
        srcRect = new RectF(centerX-offset, centerY-offset, centerX+offset, centerY+offset);
        dstRect = new RectF(centerX-offset, centerY-offset, centerX+offset, centerY+offset);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG ;
        mPaint.setColor(Color.GRAY);
        dstBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.dst_image);
        PorterDuff.Mode mPorterDuffMode = PorterDuff.Mode.SRC_IN;
        mXfermode = new PorterDuffXfermode(mPorterDuffMode)；

    }

代码很简单，就是简单的初始化变量，设置绘制区域范围。

然后就是开始绘制：


@Override

protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);
    //1. 为画布设置背景色
    canvas.drawColor(Color.WHITE);
    /** 2. 画布背景不是透明的，所以需要 saveLayer 方法为 canvas 创建一个新的透明图层，
      也就是所谓的 offscreen 离屏渲染方式, 简单来说就是新启图层绘制，绘制结束（restore）之后，再绘制到上一个图层
    **/
    int saveCount = canvas.saveLayer(srcRect, mPaint, Canvas.ALL_SAVE_FLAG);
    //3. 将 DST 绘制到新的图层上面
    canvas.drawBitmap(dstBmp, null, dstRect, mPaint);
    //4. 设置画笔混合模式和颜色，绘制 SRC
    mPaint.setXfermode(mXfermode);
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(srcRect,mPaint);
    mPaint.setXfermode(null);
    // 5. 绘制结束，将绘制的新图层绘制到图层
    canvas.restoreToCount(saveCount);

}

注释写的比较详细，就不再赘述了。下面实现书写控制。

2.手势交互

定义一个 Paint 实现书写功能：

 drawPaint = new Paint();
 drawPaint.setAntiAlias(true);
 //画笔粗细
 drawPaint.setStrokeWidth(20);
 //画笔圆角
 drawPaint.setStrokeCap(Paint.Cap.ROUND);
 drawPaint.setStyle(Paint.Style.STROKE);
 //设置混合模式，参照上图这地方设置为 DST_OUT
 drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

复写 View 的 onTouchEvent 代码如下：

@Override
public boolean onTouchEvent(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;
            path.moveTo(mLastX, mLastY);
            break;
        case MotionEvent.ACTION_MOVE:
            int dx = Math.abs(x - mLastX);
            int dy = Math.abs(y - mLastY);
            //滑动距离大于5个像素设置 path，然后重绘。
            if (dx > 5 || dy > 5)
                path.lineTo(x, y);
            mLastX = x;
            mLastY = y;
            break;
    }
    //重绘
    invalidate();
    return true;
}

然后修改 ondraw() 方法，在绘制结束前，绘制 path 路径，最后修改后为：

 //1. 为画布设置背景色
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(dstBmp, null, dstRect, mPaint);
...
canvas.drawPath(path,drawPaint); 
// 5. 绘制结束，将绘制的新图层绘制到图层
canvas.restoreToCount(saveCount);

以上就是简单的实现过程，有错误，请指出。

最后编辑于：2018.12.29 12:52:07