Introduction à cette section :

Bien, dans la section précédente, nous avons écrit un autre exemple de fusion d'images avec Xfermode — une démo d'effacement des vêtements d'une belle femme. Avec l'utilisation précédente de Xfermode pour implémenter des ImageViews arrondis ou circulaires, je pense que tout le monde n'est plus aussi peu familier avec Xfermode qu'avant, ou plutôt, quelque peu familier avec lui. Bon, dans cette section, nous allons écrire le dernier exemple de Xfermode, en utilisant le PorterDuff de Xfermode.SRC_INmode pour implémenter un effet de chargement de texte ! Nous devons encore coller le diagramme des modes de PorterDuff :

L'exemple de cette section provient de :Explication de setXfermode PorterDuffXfermode de Paint sur AndroidBon, sans plus tarder, commençons le contenu de cette section~

1. Image d'effet cible et analyse du processus d'implémentation :

Image d'effet cible：

Analyse du processus d'implémentation：

Étape 1.D'abord, une image de texte (fond transparent)

Étape 2.Initialiser le Paint, l'image d'arrière-plan (DST) et le rectangle Rect (SRC)

Étape 3.Sauvegardez d'abord le calque, puis dessinez l'image d'arrière-plan, définissez le mode de fusion, puis dessinez le Rect, effacez le mode de fusion, puis restaurez le calque sauvegardé, enfin modifiez la hauteur de la zone Rect, et appelez invalidate() pour que la View se redessine !

Si l'analyse du processus est un peu confuse, regardez simplement le code, c'est super simple~

2. Implémentation du code :

Tout d'abord, la classe utilitaire d'écran, ScreenUtil.java, ne sera pas publiée ici ; elle a été publiée dans les sections précédentes ! Ensuite, notre classe View personnalisée :LoadTextView.java：

/**
 * Created by Jay on 2015/10/26 0026.
 */
public class LoadTextView extends View {

    private PorterDuffXfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    private Bitmap backBitmap;
    private Paint mPaint;
    private int mBitW, mBitH;
    private int mCurW, mCurH, mCurTop;
    private Rect mDynamicRect;

    public LoadTextView(Context context) {
        this(context, null);
    }
    public LoadTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mCurW = ScreenUtil.getScreenW(context);
        mCurH = ScreenUtil.getScreenH(context);
        init();
    }
    public LoadTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    private void init() {
        //画笔初始化：
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setFilterBitmap(true);
        mPaint.setDither(true);
        mPaint.setColor(Color.RED);
        //背部图片的初始化
        backBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_string);
        mBitH = backBitmap.getHeight();
        mBitW = backBitmap.getWidth();
        //设置当前的高度
        mCurTop = mBitH;
        mDynamicRect = new Rect(0, mBitH, mBitW, mBitH);  //初始化原图
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int saveLayerCount = canvas.saveLayer(0, 0, mCurW, mCurH, mPaint, Canvas.ALL_SAVE_FLAG);
        canvas.drawBitmap(backBitmap, 0, 0, mPaint);// 绘制目标图
        mPaint.setXfermode(mXfermode);    //设置混排模式
        canvas.drawRect(mDynamicRect, mPaint);   //绘制源图
        mPaint.setXfermode(null);         //清除混排模式
        canvas.restoreToCount(saveLayerCount);    //恢复保存的图层
        // 改变Rect区域，假如
        mCurTop -= 2;
        if (mCurTop <= 0) {
            mCurTop = mBitH;
        }
        mDynamicRect.top = mCurTop;
        invalidate();    //重绘
    }

}

D'accord, c'est tout, le petit bout de code ci-dessus suffit à obtenir l'effet montré dans la figure. N'est-ce pas simple ?

Voulez-vous l'image de la police coder-pig ? La voici~

3. Téléchargement de l'exemple de code pour cette section :

XfermodeDemo3.zip

Résumé de cette section :

Très bien, dans cette section, nous avons de nouveau utilisé leSRC_INmode de PorterDuff pour créer un effet de chargement de texte, ainsi que le précédent :DST_INmode pour implémenter une ImageView circulaire et aux coins arrondis, etDST_OUTmode pour implémenter l'effacement des vêtements de la belle femme. Je pense que tout le monde a maintenant une idée de l'utilisation de Xfermode. Bien sûr, ces exemples n'ont pas beaucoup de sens ; en développement réel, ils ne seraient jamais utilisés, mais ils sont très utiles pour comprendre~ C'est comme pratiquer les arts martiaux : le maître vous conduit à la porte, mais le perfectionnement dépend de vous ! Le tutoriel de base n'est qu'un guide. Pour vraiment le maîtriser et appliquer ce que vous apprenez, vous devez compter sur vous-mêmes, lire plus de code excellent écrit par d'autres et pratiquer davantage ! Bon, c'est tout ce que j'avais à dire, merci~