API Paint - PathEffect (effet de chemin)


Introduction à cette section :

Cette section continue d'apprendre l'API de Paint - PathEffect (effet de chemin) Nous définissons le style du pinceau sur Stroke. Dessinez des graphiques composés de lignes, et ces lignes semblent parfois monotones, n'est-ce pas ? Par exemple, si vous souhaitez d'abord les remplacer par des lignes pointillées, alors ? Ou si vous souhaitez rendre les coins du chemin plus lisses, etc., vous pouvez envisager d'utiliser ce PathEffect pour y parvenir !

Document officiel de l'API : PathEffect Entrez et regardez le document, vous pouvez trouver ce PathEffect et le MaskFilter (masque) et ColorFilter (couleur) que nous avons appris plus tôt Filter), il n'y a quasiment pas de méthodes disponibles :

1.png

Nous utilisons généralement ses six sous-classes :

Analysons tour à tour leurs fonctions et méthodes de construction !


1. Analyse des fonctions de sous-classe et des paramètres de la méthode de construction :


1) CornerPathEffect

CornerPathEffect(float radius)

CornerPathEffect(float radius)


Connectez les angles entre les segments de ligne de connexion de Path d'une manière plus douce, similaire à l'effet des arcs et des tangentes. Radius spécifie le rayon de l'arc !

2)DashPathEffect

DashPathEffect (intervalles float[], phase float)


Modifier le segment de ligne des lignes pointillées du chemin, les intervalles sont des tableaux en pointillés ON et OFF, le nombre d'éléments dans le tableau doit être >= 2 ; Et la phase est le décalage lors du dessin !

3) DiscretePathEffect

DiscretePathEffect(float segmentLength, float déviation)


Découper les segments de ligne de Chemin, cela provoque l'effet de diffusion en fonction du chemin d'origine. segmentLength spécifie la longueur maximale du segment et l'écart est l'écart pendant le dessin.

4)PathDashPathEffect

<🎜>PathDashPathEffect (forme du chemin, avance flottante, phase flottante, style PathDashPathEffect.Style)<🎜><🎜>

est utilisé pour remplir le chemin actuel avec le graphique Chemin, la forme fait référence au graphique rempli et l'avance est l'intervalle entre chaque graphique. Le style est une valeur d'énumération libre de cette classe, avec trois cas : ROTATE, MORPH et TRANSLATE.

  • Dans le cas de ROTATE : la transformation graphique au niveau de la connexion du segment de ligne est pivotée selon un angle cohérent avec la direction de mouvement du segment suivant
  • Dans le cas de MORPH : le le graphique sera étiré ou Dans le cas de compression et autres déformations, il est connecté au segment suivant
  • Dans le cas de TRANSLATE : le graphique sera connecté au segment suivant par translation de position

5) ComposePathEffect

ComposePathEffect(PathEffect externalpe, PathEffect innerpe)

La fonction est : Le L'effet combiné réalisera d'abord l'intérieur, puis sur la base de l'intérieur, l'effet extérieur est ajouté !


6)SumPathEffect

SumPathEffect(PathEffect en premier, PathEffect en second)

La fonction est : effet de superposition , Contrairement à ComposePathEffect, les effets des deux paramètres seront affichés indépendamment lors de la présentation. Il suffit ensuite de superposer les deux effets pour les afficher !


2. Écrivez du code pour vérifier leurs effets respectifs

Il est inutile d'en dire plus. Écrire du code est le plus pratique. Écrivons le code pour tester les effets de. chacune de ces sous-catégories. L'effet!

Exécution des rendus :

2.gif

Code d'implémentation :

Nous l'écrirons nous-mêmes A Vue, l'effet du mouvement de la ligne à l'intérieur est provoqué par l'augmentation de phase, + 2 à chaque fois, Ensuite, invalidez simplement les redessins, alors ne soyez pas surpris ! PathEffectView.java:

/**
 * Created by Jay on 2015/10/30 0030.
 */
public class PathEffectView extends View {

    private Paint mPaint;
    private Path mPath;
    private float phase = 0;
    private PathEffect[] effects = new PathEffect[7];
    private int[] colors;

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

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

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

    //初始化画笔
    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //抗锯齿
        mPaint.setStyle(Paint.Style.STROKE);       //绘画风格:空心
        mPaint.setStrokeWidth(5);                  //笔触粗细
        mPath = new Path();
        mPath.moveTo(0, 0);
        for (int i = 1; i <= 15; i++) {
            // 生成15个点,随机生成它们的坐标,并将它们连成一条Path
            mPath.lineTo(i * 40, (float) Math.random() * 100);
        }
        // 初始化7个颜色
        colors = new int[] { Color.RED, Color.BLUE, Color.GREEN,
                Color.YELLOW, Color.BLACK, Color.MAGENTA, Color.CYAN };
    }


    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);
        //初始化其中路径效果:
        effects[0] = null;                                    //无效果
        effects[1] = new CornerPathEffect(10);                //CornerPathEffect
        effects[2] = new DiscretePathEffect(3.0f, 5.0f);      //DiscretePathEffect
        effects[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase);   //DashPathEffect
        Path p = new Path();
        p.addRect(0, 0, 8, 8, Path.Direction.CCW);
        effects[4] = new PathDashPathEffect(p, 12, phase,
                PathDashPathEffect.Style.ROTATE);             //PathDashPathEffect
        effects[5] = new ComposePathEffect(effects[2], effects[4]);    //ComposePathEffect
        effects[6] = new SumPathEffect(effects[2], effects[4]);   //SumPathEffect
        // 将画布移动到(10,10)处开始绘制
        canvas.translate(10, 10);
        // 依次使用7中不同的路径效果、7中不同的颜色来绘制路径
        for (int i = 0; i < effects.length; i++) {
            mPaint.setPathEffect(effects[i]);
            mPaint.setColor(colors[i]);
            canvas.drawPath(mPath, mPaint);
            canvas.translate(0, 60);
        }
        // 改变phase值,形成动画效果
        phase += 2;
        invalidate();
    }
}

D'accord, les commentaires du code sont très clairs, donc je n'entrerai pas dans les détails ici~


3. code dans cette section Télécharger :

PathEffectDemo.zip


Résumé de cette section

Il n'y a rien de difficile dans cette section , cela introduit simplement PathEffect. Les six sous-classes jouent un rôle en appelant simplement setPathEffect La méthode s'applique à l'objet Paint, c'est très simple~ Bon c'est tout, merci~