Question d'animation de jauge Android

Question

D'accord, j'ai essayé de faire cela pendant quelques jours et je ne vais nulle part. J'ai donc les deux images suivantes:

La première est un compteur de RPM

La deuxième image est une image blanche représentant un compteur de RPM rempli:

Je veux faire ce qui suit:

1. Demander à l'utilisateur de saisir une entrée RPM, si par exemple ils saisissent 1,2, le compteur se remplira comme suit:

J'ai la saisie utilisateur qui fonctionne, j'ai besoin d'aide pour l'animation. Voici ce que j'ai essayé:

1. J'ai essayé d'utiliser PorterDuff mais cela clipse également le compteur en arrière-plan, pas seulement la barre blanche
2. J'ai essayé de diviser l'image en petits bitmaps et de les stocker dans des tableaux pour pouvoir rappeler les parties, mais c'était lent et plantait souvent
3. J'ai fait quelques progrès en appliquant d'abord le compteur sur le canevas, puis en sauvegardant le canevas: canvas.save(); puis en découpant un chemin sur l'image blanche puis en restaurant le canevas. Cependant, je ne sais pas comment découper de manière circulaire en partant du coin inférieur gauche jusqu'à 180 degrés vers le coin inférieur droit (sens des aiguilles d'une montre). Est-ce la meilleure façon de faire?

Je sais qu'il y a probablement un moyen plus facile ou plus efficace de faire cela, mais je n'en ai aucune idée. Quelqu'un a-t-il des bonnes idées?

*Remarque: toutes les images sont des PNG

Merci d'avance!

Answer 1

Comme vous l'avez déjà trouvé, j'utiliserais clip :

• dessiner l'image de fond
• définir le clip
• dessiner l'image de premier plan

Je utiliserais

Canvas.clipPath()

avec un chemin ressemblant à un arc de cercle partant du centre du cercle, comme ceci :

Pour créer un chemin de clip, utilisez quelque chose comme :

public class PieView extends View {

    private int width = 200;
    private int angleStart = 135;
    private int sweep = 270;

    private Path p;

    private Paint paint = new Paint();

    public PieView(Context context, AttributeSet attrs) {
    super(context, attrs);
        p = new Path();
        //déplacer vers le centre du cercle
        p.setLastPoint(width/2, width/2);
        //ajouter une ligne du centre à l'arc à l'angle spécifié
        p.lineTo(width/2+(float)Math.cos(Math.toRadians(angleStart))*(width/2), 
                 width/2+(float)Math.sin(Math.toRadians(angleStart))*(width/2));
        //ajouter un arc à partir de l'angle de départ avec l'amplitude spécifiée
        p.addArc(new RectF(0, 0, width, width), angleStart, sweep);
        //de la fin de l'arc revenir au centre du cercle
        p.lineTo(width/2, width/2);

        paint.setColor(Color.RED);
        paint.setStrokeWidth(1);
        paint.setStyle(Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0,0,width,width, paint);
        canvas.drawPath(p,paint);
    }
}

Answer 2

Voici comment dessiner des arcs, à partir des ApiDemos Android : http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Arcs.html

Ensuite, vous devez utiliser xfermode pour supprimer une partie de l'image supérieure en utilisant un canevas dérivé d'une bitmap. Vous pouvez voir un exemple de cette approche ici : Faire en sorte qu'une certaine zone d'une bitmap soit transparente au toucher