android 关于正片叠底的继续

1.前言

  关于两张图片正片爹叠底的混合模式，主要是为了过滤白色。现在我要做的工作是：截取一张图片的某一部分然后和另外一张图片实现正片叠底的混合。有三张图片：第一张是我的图片，第二张是含有透明部分的白色图片，也叫蒙版图片，第三章是背景图片。
  具体做法：把我的图片通过蒙版图片的遮罩，截取到我所需要的图片，然后把这张图片和背景图片进行正片叠底的混合形成新的图片。

我的图片

蒙版图片。也就是遮罩图片

背景图片

先看一下经过PS处理后的结果：
第一步：我的图片经过遮罩图片的处理后的结果

第二步：然后和背景图片进行正片叠底的融合

可以看到上面已经实现了我所需要的结果，透过我的图片和蒙版图片的遮罩，选取我所需要的部分，然后和背景图片的正片叠底的混合。

2.android处理结果

代码比较简单,直接上代码：

为了查看正片叠底的效果，我先包ImageView的背景色设置为黑色（注意这是黑色）。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.test.wb.multiplyimage.MainActivity">

    <ImageView
        android:id="@+id/act_main_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:scaleType="fitXY"/>
</RelativeLayout>

public class MainActivity extends AppCompatActivity {

    private ImageView mImageView;
    private Bitmap mCartoonImage;//人物画
    private Bitmap mMaskImage;//蒙版画
    private Bitmap mBkgImage;//背景图

    private Paint mPaint;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();

    }

    private void initView() {
        mImageView = (ImageView) findViewById(R.id.act_main_iv);
    }

    private void initData() {
        mCartoonImage = BitmapFactory.decodeResource(getResources(), R.mipmap.iamge);
        mMaskImage = BitmapFactory.decodeResource(getResources(), R.mipmap.mask_image);
        mBkgImage = BitmapFactory.decodeResource(getResources(), R.mipmap.back_image);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setFilterBitmap(true);

        mixImage();
    }

    //图片的合成和正片叠底
    private void mixImage() {
        new Thread(new MyRunnable()).start();
    }

    //线程处理图片
    private class MyRunnable implements Runnable {
        @Override
        public void run() {
            //1.生成新的图片
            final Bitmap resultBitmap = Bitmap.createBitmap(mMaskImage.getWidth(), mMaskImage.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(resultBitmap);
            //2.先画人物画
            canvas.drawBitmap(mCartoonImage, 0, 0, mPaint);
            //3.再画蒙版画
            canvas.drawBitmap(mMaskImage, 0, 0, mPaint);
            //4.设置画笔的正片叠底的效果
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
            //5.最后画背景图片，实现效果
            canvas.drawBitmap(mBkgImage, 0, 0, mPaint);
            //6.清除画笔效果
            mPaint.setXfermode(null);
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    //通过ImageView显示出来
                    mImageView.setImageBitmap(resultBitmap);
                }
            });
        }
    }
}

看一下实现的效果：

这绝对不是我要的效果！竟然把ImageView背景的黑色部分显示出来了。而在PS中看到的效果是，透明的部分和背景画正片叠底融合后还是显示背景画的部分。而在android中使用画笔中的正片叠底效果后前景画的透明部分和背景画混合后竟然把背景图片也透明了。
  这样肯定是不对的，前景图片透明的部分必须也要显示出背景图片来，而在正片叠底中白色经过混合后才是透明色。新的思路：可以在遮罩后的形成的图片中，透明的部分添加白色。然后在和背景图片混合就出效果了。那么怎么添加白色呢？首先要新建一张白色的图片，然后把遮罩的图片绘制在白色的图片上，那么遮罩图片的透明颜色就被填充了白色了。马上行动修改代码。

3.修改

//线程处理图片
private class MyRunnable implements Runnable {
    @Override
    public void run() {
            //1.生成新的图片
            final Bitmap resultBitmap = Bitmap.createBitmap(mMaskImage.getWidth(), mMaskImage.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(resultBitmap);
            //2.先画人物画
            canvas.drawBitmap(mCartoonImage, 0, 0, mPaint);
            //3.再画蒙版画
            canvas.drawBitmap(mMaskImage, 0, 0, mPaint);

//新添加的代码，把这遮罩图绘制到白色的图片上
            final Bitmap resultBitmap2 = Bitmap.createBitmap(mMaskImage.getWidth(), mMaskImage.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas2 = new Canvas(resultBitmap2);
            canvas2.drawColor(Color.WHITE);
            canvas2.drawBitmap(resultBitmap,0,0,mPaint);

            //4.设置画笔的正片叠底的效果
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
            //5.最后画背景图片，实现效果
            canvas2.drawBitmap(mBkgImage, 0, 0, mPaint);
            //6.清除画笔效果
            mPaint.setXfermode(null);

            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    //通过ImageView显示出来
                    mImageView.setImageBitmap(resultBitmap2);
                }
            });
        }
    }

运行一下，看一下效果：

这样就和PS中的效果一样了！

源码下载