Path sous Android — définition, méthodes de construction et comment dessiner

Qu'est-ce que Path sous Android ?

Path est une classe du package android.graphics qui représente une séquence de segments de chemin : lignes droites, courbes de Bézier quadratiques et cubiques. Chaque segment est ajouté en appelant l'une des méthodes moveTo/lineTo/quadTo/cubicTo.

Path fonctionne en étroite collaboration avec Canvas et Paint. Canvas.drawPath(path, paint) prend un Path prêt et le dessine avec les paramètres actuels du pinceau. C'est la méthode principale pour dessiner des formes arbitraires au-delà des rectangles et des cercles.

Chaque Path consiste en une séquence de points et de types de segments. Les points sont définis dans le système de coordonnées de Canvas, où l'axe X va vers la droite et l'axe Y vers le bas. Par défaut, l'origine est le coin supérieur gauche de la View, mais elle peut être déplacée via Canvas.translate.

Construction de lignes : moveTo et lineTo

La méthode moveTo déplace le stylo vers le point spécifié sans tracer de ligne. Elle définit la position de départ pour le segment suivant. Sans moveTo, Path commence au point (0,0).

lineTo — Ligne droite

lineTo ajoute un segment droit de la position actuelle du stylo au point spécifié. Après avoir appelé lineTo, la position actuelle se déplace au point d'arrivée du segment.

rLineTo et rMoveTo sont des versions relatives des méthodes. Elles acceptent des décalages dx et dy par rapport à la position actuelle plutôt que des coordonnées absolues.

val path = Path().apply {
    moveTo(100f, 100f)     // point de départ A
    lineTo(300f, 100f)     // A -> B
    lineTo(200f, 250f)     // B -> C
    close()                    // C -> A (fermer)
}

Courbes de Bézier : quadTo et cubicTo

quadTo ajoute une courbe de Bézier quadratique avec un point de contrôle. Une courbe quadratique est définie par trois points : début (position actuelle), contrôle et fin.

cubicTo — Courbe de Bézier cubique

cubicTo ajoute une courbe de Bézier cubique avec deux points de contrôle, offrant plus de flexibilité lors de la formation de contours complexes.

Pour plus de commodité, il existe des versions relatives rQuadTo et rCubicTo qui acceptent des décalages par rapport à la position actuelle.

Formes prêtes à l'emploi : cercles, rectangles et arcs

addCircle ajoute un cercle au Path comme nouveau contour. Paramètres : coordonnées du centre, rayon et direction (CW — horaire, CCW — antihoraire).

addRect et addOval

addRect ajoute un rectangle défini par les coordonnées des coins supérieur gauche et inférieur droit. addOval ajoute un ovale inscrit dans le rectangle donné. addRoundRect ajoute un rectangle aux coins arrondis.

arcTo ajoute un arc de cercle ou d'ellipse. Paramètres : rectangle englobant, angle de départ en degrés, angle d'arc et le drapeau forceMoveTo.

val path = Path().apply {
    addCircle(200f, 200f, 100f, Path.Direction.CW)
    addRect(50f, 50f, 150f, 150f, Path.Direction.CCW)
    addRoundRect(RectF(300f, 100f, 400f, 200f), 15f, 15f, Path.Direction.CW)
}

Opérations booléennes avec les contours (Path Op)

Path.Op est un mécanisme d'opérations booléennes sur deux contours, disponible depuis l'API 19. Opérations prises en charge : UNION, INTERSECT, DIFFERENCE et XOR.

Application de Path Op dans le design

UNION combine deux contours en un seul. INTERSECT conserve uniquement la zone appartenant aux deux contours. DIFFERENCE soustrait le second contour du premier. XOR conserve les zones appartenant à un seul des contours.

La méthode op prend deux Paths et une opération, retournant true si le résultat n'est pas vide. La complexité computationnelle est O(n*m), où n et m sont le nombre de segments dans chaque Path.

val circle = Path().apply { addCircle(0f, 0f, 100f, Path.Direction.CW) }
val square = Path().apply { addRect(RectF(-50f, -50f, 50f, 50f), Path.Direction.CW) }
val result = Path()
result.op(circle, square, Path.Op.DIFFERENCE) // cercle avec trou carré

Exemple de construction d'une forme complexe

Créons une icône de cœur personnalisée à l'aide de Path. La forme est construite à partir de deux arcs et de deux segments droits utilisant cubicTo.

class HeartShape {

    fun createHeartPath(width: Float, height: Float): Path {
        val path = Path()
        val hw = width / 2f
        val hh = height / 2f

        path.moveTo(hw, hh + hh * 0.3f)
        path.cubicTo(hw, hh + hh * 0.6f, hw + hw * 0.5f, hh + hh * 0.5f, hw + hw * 0.5f, hh)
        path.cubicTo(hw + hw * 0.5f, hh * 0.5f, hw + hw * 0.2f, 0f, hw, hh * 0.2f)
        path.cubicTo(hw - hw * 0.2f, 0f, hw - hw * 0.5f, hh * 0.5f, hw - hw * 0.5f, hh)
        path.cubicTo(hw - hw * 0.5f, hh + hh * 0.5f, hw, hh + hh * 0.6f, hw, hh + hh * 0.3f)
        path.close()
        return path
    }
}

Les courbes cubiques cubicTo permettent un contrôle précis de la forme de chaque moitié du cœur. La première courbe forme la moitié gauche, la seconde — la moitié droite. Les segments droits en bas relient les courbes au sommet du cœur.

Pour tester la forme, vous pouvez activer temporairement le rendu avec Paint.Style.STROKE — cela montrera tous les points de contrôle et segments du Path.