ペイントAPI - XfermodeとPorterDuffの詳しい解説(2)

このセクションの紹介:

前のセクションでは、Xfermode の 2 人の亡くなった (時代遅れの) 息子について学びました: AvoidXfermode、PixelXorXfermode、多少便利ではありますが、結局削除されました。このセクションでは、まだ生きている Xfermode の三男について学びます: PorterDuffXfermode
まず、公式 API ドキュメント:
PorterDuffXfermode に注目してみましょう。！ドキュメントには非常に少ないコンテンツが含まれています。その構築方法は
パラメーターは 1 つだけです:
PorterDuff.Mode モード。Android は 16 個の画像混合モードを提供します。 2 つのレイヤーを異なる結果に結合し、異なるモードに従って表示できることがわかります。 16 のミキシングモードの結果は次のとおりです:
ここには 2 つのレイヤーがあります: 最初の画像は
デスティネーションピクチャ (DST)、2 番目の画像は ソースピクチャ (SRC) です。
もちろん、ドキュメントでは、使用可能なモードは 16 ではなく 18 であることがわかりました。
ADD と OVERLAY という 2 つの新しいモードが追加されました
まあ、これ以上言っても無駄です。コードは次のとおりです。実際、このセクションでは、これら 18 のモードを検証するコードを作成します。
追記：ポーターダフという名前は、実際には2つの名前を組み合わせたものです：トーマス・プロターとトム・ダフ、彼らは最初に SIGGRAPH でグラフィックミキシングの概念を最初に提案した神レベルの人です。興味がある場合は、Baidu をご覧ください~

上の図を検証するための例を書いてください:

それでは、上記を検証するための例を書いてみましょう。さまざまなモードを変更して結果を比較および分析してください。

コード実装:

ステップ 1: まず、画面の幅と高さを取得するツールクラスを作成しましょう。 ScreenUtil.java:

/**
 * Created by Jay on 2015/10/23 0023.
 */
public class ScreenUtil {
    /**
     * 获取屏幕宽高，sdk17后不建议采用
     *
     * @param context
     */
    public static int[] getScreenHW(Context context) {
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Display display = manager.getDefaultDisplay();
        int width = display.getWidth();
        int height = display.getHeight();
        int[] HW = new int[] { width, height };
        return HW;
    }

    /**
     * 获取屏幕宽高，建议采用
     *
     * @param context
     */
    public static int[] getScreenHW2(Context context) {
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(dm);
        int width = dm.widthPixels;
        int height = dm.heightPixels;
        int[] HW = new int[] { width, height };
        return HW;
    }

    /**
     * 获取屏幕的宽度
     *
     * @param context
     * @return
     */
    public static int getScreenW(Context context) {
        return getScreenHW2(context)[0];
    }

    /**
     * 获取屏幕的高度
     *
     * @param context
     * @return
     */
    public static int getScreenH(Context context) {
        return getScreenHW2(context)[1];
    }
}

ステップ 2: カスタム View クラスを作成し、ここで実験してください。

XfermodeView.java:

/**
 * Created by Jay on 2015/10/23 0023.
 */
public class XfermodeView extends View {

    private PorterDuffXfermode pdXfermode;   //定义PorterDuffXfermode变量
    //定义MODE常量，等下直接改这里即可进行测试
    private static PorterDuff.Mode PD_MODE = PorterDuff.Mode.ADD;
    private int screenW, screenH; //屏幕宽高
    private int width = 200;      //绘制的图片宽高
    private int height = 200;
    private Bitmap srcBitmap, dstBitmap;     //上层SRC的Bitmap和下层Dst的Bitmap

    public XfermodeView(Context context) {
        this(context, null);
    }

    public XfermodeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        screenW = ScreenUtil.getScreenW(context);
        screenH = ScreenUtil.getScreenH(context);
        //创建一个PorterDuffXfermode对象
        pdXfermode = new PorterDuffXfermode(PD_MODE);
        //实例化两个Bitmap
        srcBitmap = makeSrc(width, height);
        dstBitmap = makeDst(width, height);
    }

    public XfermodeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    //定义一个绘制圆形Bitmap的方法
    private Bitmap makeDst(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(0xFF26AAD1);
        c.drawOval(new RectF(0, 0, w * 3 / 4, h * 3 / 4), p);
        return bm;
    }

    //定义一个绘制矩形的Bitmap的方法
    private Bitmap makeSrc(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(0xFFFFCE43);
        c.drawRect(w / 3, h / 3, w * 19 / 20, h * 19 / 20, p);
        return bm;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint();
        paint.setFilterBitmap(false);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawBitmap(srcBitmap, (screenW / 3 - width) / 2, (screenH / 2 - height) / 2, paint);
        canvas.drawBitmap(dstBitmap, (screenW / 3 - width) / 2 + screenW / 3, (screenH / 2 - height) / 2, paint);

        //创建一个图层，在图层上演示图形混合后的效果
        int sc = canvas.saveLayer(0, 0, screenW, screenH, null, Canvas.MATRIX_SAVE_FLAG |
                Canvas.CLIP_SAVE_FLAG |
                Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                Canvas.CLIP_TO_LAYER_SAVE_FLAG);

        canvas.drawBitmap(dstBitmap, (screenW / 3 - width) / 2 + screenW / 3 * 2,
                (screenH / 2 - height) / 2, paint);     //绘制i
        //设置Paint的Xfermode
        paint.setXfermode(pdXfermode);
        canvas.drawBitmap(srcBitmap, (screenW / 3 - width) / 2 + screenW / 3 * 2,
                (screenH / 2 - height) / 2, paint);
        paint.setXfermode(null);
        // 还原画布
        canvas.restoreToCount(sc);
    }
}

このコードは複雑に見えますが、実際はそうではありません。画面の幅と高さを取得して、長方形と円を描画するだけです。位置を計算し、下位レイヤー（固定書き込み方式）を設定し、下位ブラシsetXfermodeを設定し、キャンバス上に描画しているだけでは理解できないのですが、実際はどうやって位置を決めるのでしょうか？きっと大丈夫だよ！結果を 1 つずつ見てみましょう。

PD_MODE の値を変更するだけで、別のモードに設定できます。

オペレーションレンダリング: