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


Introduction à cette section :

Je ne sais pas si vous connaissez ces deux choses dans le titre. Si vous avez implémenté des coins arrondis ou des images circulaires, je vous crois. connaissent ces deux termes. Ce n'est pas un modèle. Vous ne vous en souvenez pas depuis un moment ? Ce n’est pas grave, avez-vous vu la photo ci-dessous ?

1.png

PS : C'est dit sur Internet : samplesandroid-XXlegacyApiDemossrccomexampleandroidapisgraphics Je peux trouver cette image - -, mais elle n'est pas là. Je ne sais pas si c'est parce que mon exemple est Android-22. Je n'ai trouvé qu'un fichier Java de Xfermodes.java ici ! Ici, je publierai directement ce que j'ai trouvé sur Internet~

Eh bien, en parlant de ça, je crois que la plupart de mes amis ont vu cette photo. Ce n'est pas grave si vous ne l'avez pas fait dans cette section. nous vous emmènerons apprendre un peu. Cette chose ~, revenez à notre précédent Tutoriel d'introduction de base Android - 8.3.1 Explication détaillée de trois classes d'outils de dessin

setXfermode(Xfermode xfermode) : Définir des graphiques Méthodes de traitement des chevauchements, telles que fusion, intersection ou union, Souvent utilisé pour créer des effets de gomme !

On arrive au document officiel : Xfermode, et on constate qu'il a trois fils :

2.png

Dans cette section nous découvrirons ses deux premiers fils ~


Fils aîné : éviterXfermode

Eh bien, comme les deux sous-classes de MaskFilter apprises plus tôt, il ne prend pas en charge l'accélération matérielle, donc s'il s'agit d'une version au-dessus de l'API 14, Vous devez désactiver l'accélération matérielle pour avoir un effet ! Comment se fermer ? Regardez la section précédente~

Jetons un œil à la méthode de construction qu'il nous a fournie ! Document officiel de l'API : AvoidXfermode

3.png

a trois paramètres, dans l'ordre :

opColor : une valeur hexadécimale avec transparence Valeur de couleur, telle comme 0x00C4C4;

tolérance : valeur de tolérance si vous avez étudié PS, vous avez peut-être utilisé l'outil baguette magique, qui consiste à définir la plage de valeurs de couleur sélectionnées, telles que La tolérance est de 0 et vous sélectionnez un petit point de noir pur. Lorsque la tolérance est ajustée à 40, la plage s'étend à une grande zone noire ! si Je ne comprends pas encore très bien, mais nous le saurons plus tard lorsque nous écrirons le code !

mode : mode ÉvitezXfermode, il existe deux types : TARGET et AVOID


Mode 1 :AvoidXfermode.Mode.TARGET

Ce mode déterminera s'il y a une couleur sur la toile qui est différente de la valeur de couleur que nous avons définie. Si tel est le cas, ces zones le seront. Tachez une couche de la couleur définie par le pinceau et laissez les autres zones intactes ! Écrivons le code à démontrer ci-dessous et laissons tout le monde le ressentir. Cette valeur de tolérance !

Exemple de code d'utilisation :

Exécutez le rendu :

Eh bien, commençons par l'image originale, le matériel vient from gank.io

4.jpg

Ensuite, utilisons simplement le sélecteur de couleur pour supprimer la couleur quelque part sur le mur, puis écrivons une simple vue !

PS : Vous devez ajouter au nœud d'application dans AndroidManifest.xml pour désactiver l'accélération matérielle : android:hardwareAccelerated="false"

/**
 * Created by Jay on 2015/10/22 0022.
 */
public class AvoidXfermodeView1 extends View {

    private Paint mPaint;
    private Bitmap mBitmap;
    private AvoidXfermode avoidXfermode;

    public AvoidXfermodeView1(Context context) {
        super(context);
        init();
    }

    public AvoidXfermodeView1(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  //抗锯齿
        avoidXfermode = new AvoidXfermode(0XFFCCD1D4, 0, AvoidXfermode.Mode.TARGET);
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.iv_meizi);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, 50, 50, mPaint);
        mPaint.setARGB(255, 222, 83, 71);
        mPaint.setXfermode(avoidXfermode);
        canvas.drawRect(50, 50, 690, 1010, mPaint);
    }
}

Le effet après avoir couru :

5.png

Voir si le tas de tantes sur le mur est rouge L'effet est génial Notre valeur de tolérance ne joue pas de rôle ici. changez-le. Les vêtements blancs de la fille se sont transformés en rouge tante !

Nous avons modifié la structure ci-dessus d'EvitementXfermode en :

avoidXfermode = new AvoidXfermode(0XFFD9E5F3, 25, AvoidXfermode.Mode.TARGET);

Ensuite, les vêtements blancs de la fille se sont transformés en rouge de tante...6.jpg, plein de culpabilité... .

7.png


Mode 2 : ÉvitezXfermode.Mode.AVOID

Contrairement au mode TARGET ci-dessus, la couleur n'est modifiée que lorsque la couleur est la pareil, ici la couleur est différente mais la couleur change. La valeur de tolérance donne également le résultat inverse. Lorsque la valeur de tolérance est 0, uniquement lorsque la valeur de couleur des pixels dans l'image est complètement différente de la valeur de couleur définie. Il sera teint lorsque la valeur de tolérance atteint la valeur maximale de 255, et il sera teint si la couleur est légèrement différente ! Il suffit de modifier simplement l'exemple ci-dessus. Il en va de même pour modifier le contenu de la construction d'AvoidXfermode! Nous l'avons modifié par la phrase suivante :

avoidXfermode = new AvoidXfermode(0XFFD9E5F3,230, AvoidXfermode.Mode.AVOID);

Rendu en cours d'exécution  :

8.png


Deuxième fils : PixelXorXfermode

Il s'agit d'un autre mode de brassage d'images, plus simple que le fils aîné. Sa méthode de construction est la suivante :

Document API officiel : PixelXorXfermode

9.png

Analyse des paramètres :

est juste une valeur de couleur hexadécimale avec une valeur transparente Quant au rôle de cette valeur, il existe un algorithme : PixelXorXfermode fonctionne en interne selon l'algorithme XOR de " opColor ^ src ^ dst ". Obtenez une valeur de couleur opaque (alpha = 255) et définissez-la sur l'image ! Ok, j'ai cherché ça en ligne Je ne connais pas les détails, je vais donc écrire un exemple pour essayer l'effet ~

Exemple de code :

Diagramme d'effet d'exécution  :

10.png

Code d'implémentation :

/**
 * Created by Jay on 2015/10/22 0022.
 */
public class PixelXorXfermodeView1 extends View{

    private Paint mPaint;
    private Bitmap mBitmap;
    private PixelXorXfermode pixelxorXfermode;

    public PixelXorXfermodeView1(Context context) {
        super(context);
        init();

    }

    public PixelXorXfermodeView1(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  //抗锯齿
        pixelxorXfermode = new PixelXorXfermode(0XFFD9E5F3);
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.iv_meizi);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, 50, 50, mPaint);
        mPaint.setARGB(255, 222, 83, 71);
        mPaint.setXfermode(pixelxorXfermode);
        canvas.drawRect(50, 50, 690, 1010, mPaint);
    }

}

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

XfermodeDemo. zip


Résumé de cette section :

D'accord, je suis plein de culpabilité, une très belle fille, mais j'ai fini par écrire une démo pour moi comme ça, ne me blâme pas, 11.gif Eh bien, au fait, j'ai oublié de mentionner que le fils aîné et le deuxième fils de Xfermode sont décédés (expirés dans les versions postérieures à l'API 16,). Il est expiré, ce qui veut dire que cette section ne sert à rien...

On ne peut pas dire qu'Apache ait été castré dans les versions postérieures à 4.4, mais certaines personnes utilisent encore HttpClient, ou Le framework de requête HTTP écrit par cette bibliothèque ~ Bien sûr, il y a fondamentalement très peu de personnes de ce type ! Mais ça ne fait jamais de mal d’en savoir plus, n’est-ce pas ? Le troisième fils de la section suivante, PorterDuffXfermode, est intemporel et très important. Eh bien, ne vous inquiétez pas, cela ne gâchera plus les photos ! Eh bien, c'est tout, merci~