API Paint - Explication détaillée de Xfermode et PorterDuff (5)


Introduction à cette section :

D'accord, dans la section précédente, nous avons écrit un autre exemple de mixage d'images Xfermode - la démo d'essuyage de beaux vêtements pour femmes, plus la précédente de Utilisez Xfermode pour implémenter ImageView arrondi ou circulaire. Je pense que tout le monde n'est plus aussi familier avec Xfermode qu'avant, ou. Cela semble un peu familier, eh bien, dans cette section, nous allons écrire le dernier exemple de Xfermode, en utilisant le mode ProterDuff.SRC_IN ​​​​de Xfermode pour obtenir l'effet de chargement de texte ! Il reste encore à publier le diagramme de modèle de ProterDuff :

1.png

Les exemples de cette section sont référencés à partir de : Explication setXfermode PorterDuffXfermode d'Android PaintEh bien, sans plus tarder, commençons cette section~


1. Les rendus à réaliser et l'analyse du processus de mise en œuvre :

Les rendus à réaliser :

2.gif

Mettre en œuvre l'analyse des processus :

Étape 1Tout d'abord, une image texte (fond transparent)

.

Étape 2. Initialisez le pinceau, l'image d'arrière-plan (DST), le rectangle rectangulaire (SRC)

Étape 3 Enregistrez d'abord le calque, puis dessinez l'arrière-plan. image d'abord, et définissez le mode aléatoire, puis dessinez Rect, effacez le mode aléatoire Restaurez ensuite le calque enregistré, modifiez enfin la hauteur de la zone Rect, et appelez invalidate() pour laisser la vue se redessiner !

Si vous ne comprenez pas l'analyse du processus, regardez simplement le code, c'est super simple~


Mise en œuvre du code :

La mise en œuvre du code : La. le premier est la classe d'outils d'écran, ScreenUtil .java, je ne la publierai pas ici, je l'ai publiée dans les sections précédentes ! Ensuite, il y a 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();    //重绘
    }

}

Eh bien, pas plus, juste le code ci-dessus, l'effet indiqué dans l'image est obtenu, n'est-ce pas très C'est simple~

Si vous voulez une photo de la police coder-pig, veuillez la poster~3.png


Téléchargez l'exemple de code dans cette section :

XfermodeDemo3.zip

Résumé de cette section :

D'accord, dans cette section, nous utilisons SRC_INMode pour écrire un effet de chargement de texte, plus le précédent : DST_IN ​​​​​​mode pour réaliser ImageView rond et arrondi, et

DST_OUT
mode pour réaliser l'effacement de vêtements de beauté, Je crois Tout le monde connaît déjà l’utilisation de Xfermode. Bien entendu, ces exemples ne sont pas très significatifs et un développement réel ne sera pas possible du tout. C'est utilisé, mais c'est facile à comprendre pour tout le monde ~ C'est comme pratiquer le kung-fu, le maître vous guide et vous comptez sur vous-même pour pratiquer ! Le tutoriel de base n'est qu'un guide C'est tout. Pour vraiment maîtriser et appliquer ce que vous avez appris, vous devez toujours compter sur vous-même, lire d'autres excellents codes des autres et en faire plus ! D'accord, c'est tout, merci~
<🎜><🎜>