Explication détaillée de trois classes d'outils de dessin

Introduction à cette section :

Dans les deux dernières sections, nous avons découvert Drawable et Bitmap, qui chargent tous deux des images, et dans cette section, nous allons en apprendre davantage sur le dessin. Certaines API, ce sont Canvas (canvas), Paint (pinceau), Path (path) ! Cette section est très importante et c'est aussi notre Les bases de la personnalisation de View~OK, sans plus tarder, commençons cette section~
Documentation officielle de l'API : Canvas Paint Path ; Définissez le style de dessin, tel que : la largeur de la ligne (épaisseur du trait), la couleur, la transparence et le style de remplissage, etc. Vous pouvez créer une instance Paint directement en utilisant le constructeur sans paramètre :
Paint paint = new Paint( );

Nous pouvons définir les propriétés pertinentes de Paint (pinceau) via les méthodes suivantes. De plus, Il existe deux types de cet attribut, Lié au dessin graphique et au dessin de texte :

setARGB(int a, int r, int g, int b) : Définissez la couleur du dessin, a représente la transparence, r, g, b représentent les valeurs de couleur.
setAlpha(int a) : Définissez la transparence des graphiques dessinés.
setColor(int color) : définit la couleur du dessin, représentée par une valeur de couleur, qui inclut la transparence et la couleur RVB.
setAntiAlias(boolean aa) : Définissez s'il faut utiliser la fonction d'anti-aliasing, qui consommera beaucoup de ressources et ralentira la vitesse de dessin des graphiques.
setDither(tramage booléen) : définissez s'il faut utiliser le traitement de tramage d'image, ce qui rendra la couleur de l'image dessinée plus lisse et plus complète, et l'image plus claire
setFilterBitmap(boolean filter) : Si cet élément est défini sur true, l'image filtrera l'opération d'optimisation de l'image Bitmap pendant l'animation. Pour accélérer l'affichage, ce paramètre dépend des paramètres de dither et xfermode
setMaskFilter(MaskFilter maskfilter) : Définissez MaskFilter, vous pouvez utiliser différents MaskFilter pour obtenir des effets de filtre, tels que le filtrage , Stéréo, etc.
setColorFilter(ColorFilter colorfilter) : définissez le filtre de couleur pour obtenir un effet de transformation sans couleur lors du dessin des couleurs
setPathEffect (Effet PathEffect) Définissez l'effet du dessin de chemins, tels que des lignes pointillées, etc.
setShader(Shader shader) : définissez l'effet d'image, utilisez Shader pour dessiner divers effets de dégradé
setShadowLayer(float radius, float dx, float dy, int color) : définissez un calque d'ombre sous le graphique pour produire un effet d'ombre. radius est l'angle de l'ombre, dx et dy sont la distance de l'ombre sur l'axe x et l'axe y, color est la couleur de l'ombre
setStyle(Paint. Style style) : Définissez le style du pinceau, pour FILL, FILL_OR_STROKE ou STROKE
setStrokeCap(Paint.Cap cap) : Lorsque le style de pinceau est STROKE ou FILL_OR_STROKE, définissez le graphique le style du pinceau, Tels que le style rond Cap.ROUND ou le style carré Cap.SQUARE
setSrokeJoin(Paint.Join join) : définissez la manière de combiner les graphiques lors du dessin, tels que les effets de lissage, etc.
setStrokeWidth(float width) : Lorsque le style de pinceau est STROKE ou FILL_OR_STROKE, définissez l'épaisseur du pinceau
setXfermode(Xfermode xfermode) : Définir les graphiques Les méthodes de traitement qui se chevauchent, telles que la fusion, l'intersection ou l'union, sont souvent utilisées pour créer des effets de gomme
setFakeBoldText(boolean fakeBoldText) : simule du texte en gras, défini dans L'effet sera être très mauvais sur les petites polices
setSubpixelText(boolean subpixelText) : définir cet élément sur true aidera l'affichage du texte sur l'écran LCD
setTextAlign(Paint.Align align) : définissez la direction d'alignement du texte dessiné
setTextScaleX(float scaleX) : définissez le rapport de mise à l'échelle de l'axe x du texte dessiné, qui peut réaliser le mise à l'échelle du texte Effet d'étirement
setTextSize(float textSize) : définir la taille de la police du texte dessiné
setTextSkewX(float skewX) : définir le texte en italique , Brochette
setUnderlineText(boolean underlineText) : définir l'effet du texte souligné
setStrikeThruText(boolean strikeThruText) : définir l'effet du texte barré
setStrokeJoin(Paint.Join join) : Définissez l'apparence du joint. Mitre : Le joint est un angle aigu. Rond : Le joint est un arc : BISEAU : Le joint est une ligne droite
setStrokeMiter(onglet flottant) : Réglez l'inclinaison de la brosse
setStrokeCap (Paint.Cap cap) : Définir le style du coin Autres méthodes couramment utilisées :
flotteur ascension( ) : mesurer la distance entre la ligne de base et le point le plus élevé du personnage

float descente() : La distance entre la ligne de base et le point le plus bas du caractère
int breakText(char [] texte, int index, int count, float maxWidth, float[] mesuréWidth) : Détecter la quantité de texte affiché dans une ligne
clearShadowLayer() : efface le calque d'ombre Merci de vous référer aux autres documents par vous-même~

2) Canvas :

Maintenant que vous avez le pinceau, allez ensuite au pinceau (Canvas ). Vous ne pouvez pas dessiner à partir de rien, n'est-ce pas~ Les méthodes courantes sont les suivantes :
La première est la méthode de construction Il existe deux méthodes de construction pour Canvas : <🎜. >
Canvas() : Créez un canevas vide Vous pouvez utiliser la méthode setBitmap() pour définir le canevas spécifique pour le dessin.
Canvas(Bitmap bitmap) : Créez un canevas avec un objet bitmap et dessinez le contenu sur le bitmap, donc le bitmap ne doit pas être nul.
Vient ensuite la famille de méthodes
1.drawXXX() : dessinez une image dans la zone de dessin actuelle avec une certaine valeur de coordonnées, et les calques seront superposés. Autrement dit, la couche peinte plus tard recouvrira la couche peinte précédemment. Par exemple :
drawRect(RectF rect, Paint paint) : zone de dessin, le paramètre un est une zone RectF
drawPath(Path path, Paint paint ) : Dessinez un chemin, le paramètre un est l'objet Path
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) : Texture, le premier paramètre est notre objet Bitmap habituel, le deuxième paramètre est la zone source (voici le bitmap), Le troisième paramètre est la zone cible (la position et la taille du canevas) et le quatrième paramètre est l'objet pinceau. En raison de la possibilité de mise à l'échelle et d'étirement, il y aura une perte de performances significative lorsque le Rect d'origine n'est pas égal au Rect cible.
drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) : Tracez une ligne, la position sur l'axe des x du point de départ du paramètre un, la position sur l'axe des y du point de départ du paramètre deux, la position horizontale sur l'axe des x du point final du paramètre trois, Les quatre paramètres sont la position verticale de l'axe y et le dernier paramètre est l'objet Pinceau.
drawPoint(float x, float y, Paint paint) : Pour dessiner des points, le premier paramètre est l’axe x horizontal, le deuxième paramètre est l’axe y vertical et le troisième paramètre est l’objet Paint.
drawText(String text, float x, floaty, Paint paint) : Pour restituer du texte, la classe Canvas peut également dessiner du texte en plus de ce qui précède. Le paramètre 1 est un texte de type String. Le deuxième paramètre est l'axe des x, le troisième paramètre est l'axe des y et le quatrième paramètre est l'objet Paint.
drawOval(RectF oval, Paint paint) : dessinez une ellipse, le premier paramètre est la zone de numérisation, le deuxième paramètre est l'objet de peinture
drawCircle(float cx, float cy, float radius,Paint paint) : dessinez un cercle, le paramètre un est l'axe x du point central, le paramètre deux est l'axe y du point central, le paramètre trois est le rayon, le paramètre quatre est l'objet peinture ;
drawArc(RectF ovale, float startAngle, float scanningAngle, boolean useCenter, Paint paint) : Pour dessiner un arc, le premier paramètre est l'objet RectF. Les limites d'une zone rectangulaire et d'une ellipse sont utilisées pour définir la forme, la taille et l'arc. Le deuxième paramètre est l'angle de départ. (Degrés) Au début de l'arc, le paramètre trois angle de balayage (degrés) commence à être mesuré dans le sens des aiguilles d'une montre, le paramètre quatre est si cela est vrai, y compris l'arc électrique au centre de l'ellipse Arc, et fermez-le, s'il est faux, ce sera un arc, le paramètre cinq est l'objet Paint
2.clipXXX()Famille de méthodes : Dans le courant The ; la zone de dessin est découpée pour créer une nouvelle zone de dessin. Cette zone de dessin est la toile. La zone de dessin actuelle de l'objet. Par exemple : clipRect(new Rect()), alors la zone rectangulaire est la zone de dessin actuelle du canevas
save() et restore()<🎜. > méthodes : save( ) : Utilisé pour sauvegarder l'état de Canvas. Après l'enregistrement, vous pouvez appeler les opérations de traduction, de mise à l'échelle, de rotation, de coupe transversale, de recadrage et d'autres opérations de Canvas ! restore() : utilisé pour restaurer l'état précédemment enregistré de Canvas. Empêche les opérations effectuées sur le canevas après l'enregistrement d'affecter le dessin ultérieur. save() et restaurer() doivent être utilisés par paires (la restauration peut être inférieure à la sauvegarde, mais pas plus). Si la restauration est appelée plus de fois que la sauvegarde, une erreur sera signalée !
4.traduire(float dx, float dy) : Traduisez, déplacez l'origine des coordonnées du canevas x vers la gauche et la droite, et y de haut en bas. La position par défaut du canevas est (0,0)
5.échelle(. float sx, float sy) : Développez, x est le facteur de grossissement dans la direction horizontale, y est le facteur de grossissement dans la direction verticale
6.rotation(degrés flottants) : Rotation, angle fait référence à l'angle de rotation, dans l'ordre Rotation de l'horloge

3) Chemin

Pour faire simple, cela signifie dessiner des points et des lignes de connexion ~ Après avoir créé notre chemin, nous pouvons appeler Canvas drawPath(path,paint) Dessinez les graphiques ~ Les méthodes courantes sont les suivantes :
addArc(RectF ovale, float startAngle, float scanningAngle : ajouter un polygone au chemin
addCircle (float x, float y, float radius, Path.Direction dir) : Ajouter un cercle au path
addOval(RectF ovale, Path.Direction dir) : Ajouter un ovale
addRect(RectF rect, Path.Direction dir) : Ajouter une région
addRoundRect(RectF rect, float[] radii , Path.Direction dir) : Ajouter une zone arrondie
isEmpty() : Déterminer si le chemin est vide
transformer(Matrice matricielle) : Appliquer la transformation matricielle
transform(Matrice matricielle, Path dst) : Appliquez la transformation matricielle et placez le résultat dans le nouveau chemin, qui est le deuxième paramètre Les effets avancés peuvent utiliser PathEffect. classe !
Plusieurs To :
moveTo
(float x, float y) : ne sera pas dessiné, utilisé uniquement Déplacer le pinceau mobile
lineTo
(float x, float y) : utilisé pour dessiner des lignes droites, à partir de (0, 0) par défaut, utilisez moveTo pour vous déplacer ! Par exemple mPath.lineTo(300, 300); canvas.drawPath(mPath, mPaint);
quadTo
(float x1, float y1, float x2, float y2) : Utilisé pour dessiner des courbes lisses, c'est-à-dire des courbes de Bézier, et peut également être utilisé avec moveTo !
rCubicTo
(flotteur x1, flotteur y1, flotteur x2, flotteur y2, flotteur x3, flotteur y3) Il est également utilisé pour implémenter les courbes de Bézier. (x1,y1) est le point de contrôle, (x2,y2) est le point de contrôle, (x3,y3) est le point final. Identique à cubiqueTo, mais les coordonnées sont considérées par rapport au point actuel sur ce contour Encore un point de contrôle~ Tracez la courbe ci-dessus : mPath.moveTo(100, 500); mPath.cubicTo(100, 500, 300, 100, 600, 500); Si vous n'ajoutez pas le moveTo ci-dessus : tracez une courbe de Bézier avec (0,0) comme point de départ, (100,500) et (300,100) comme points de contrôle
arcTo(RectF ovale, float startAngle, float scanningAngle) : Dessinez un arc (interceptant en fait une partie d'un cercle ou d'une ellipse) ovalRectF est le rectangle de l'ellipse, startAngle est l'angle de départ, SweepAngle est l'angle final.

2. Essayez-le :

Il y a tellement d'attributs, nous devons les parcourir étape par étape pour approfondir notre image~ Hé, vous devez dessiner des images sur View ou SurfaceView. Dessinons sur View ici. Nous définissons une classe View puis terminons le travail de dessin dans onDraw() !

/**
 * Created by Jay on 2015/10/15 0015.
 */
public class MyView extends View{

    private Paint mPaint;


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

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

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

    private void init(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);          //抗锯齿
        mPaint.setColor(getResources().getColor(R.color.puple));//画笔颜色
        mPaint.setStyle(Paint.Style.FILL);  //画笔风格
        mPaint.setTextSize(36);             //绘制文字大小，单位px
        mPaint.setStrokeWidth(5);           //画笔粗细
    }
    
    //重写该方法，在这里绘图
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
    
}

Ensuite, définissez simplement cette vue dans la mise en page. Le code suivant est écrit dans onDrawable~

1) Définissez la couleur du canevas :

canvas.drawColor(getResources().getColor(R.color.yellow));   //设置画布背景颜色

<🎜 >

2) Dessinez un cercle :

canvas.drawCircle(200, 200, 100, mPaint);           //画实心圆

3) Dessinez un rectangle :

canvas.drawRect(0, 0, 200, 100, mPaint);            //画矩形

4) Dessiner un bitmap :

canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher), 0, 0, mPaint);

5) Dessiner une zone d'arc :

canvas.drawArc(new RectF(0, 0, 100, 100),0,90,true,mPaint);  //绘制弧形区域

Si true est changé en faux :

6) Dessinez un rectangle arrondi

canvas.drawRoundRect(new RectF(10,10,210,110),15,15,mPaint); //画圆角矩形

7 ) Dessiner une ellipse

canvas.drawOval(new RectF(0,0,200,300),mPaint); //画椭圆

8) Dessiner un polygone :

Path path = new Path();
path.moveTo(10, 10); //移动到 坐标10,10
path.lineTo(100, 50);
path.lineTo(200,40);
path.lineTo(300, 20);
path.lineTo(200, 10);
path.lineTo(100, 70);
path.lineTo(50, 40);
path.close();
canvas.drawPath(path,mPaint);

9) Dessiner du texte :

canvas.drawText("最喜欢看曹神日狗了~",50,50,mPaint);    //绘制文字

Vous pouvez également dessiner ces mots le long d'un chemin :

Path path = new Path();
path.moveTo(50,50);
path.lineTo(100, 100);
path.lineTo(200, 200);
path.lineTo(300, 300);
path.close();
canvas.drawTextOnPath("最喜欢看曹神日狗了~", path, 50, 50, mPaint);    //绘制文字

10 ) Dessinez des graphiques personnalisés :

Le code vient d'Internet :

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(canvas.getWidth()/2, 200); //将位置移动画纸的坐标点:150,150
    canvas.drawCircle(0, 0, 100, mPaint); //画圆圈

    //使用path绘制路径文字
    canvas.save();
    canvas.translate(-75, -75);
    Path path = new Path();
    path.addArc(new RectF(0,0,150,150), -180, 180);
    Paint citePaint = new Paint(mPaint);
    citePaint.setTextSize(14);
    citePaint.setStrokeWidth(1);
    canvas.drawTextOnPath("绘制表盘~", path, 28, 0, citePaint);
    canvas.restore();

    Paint tmpPaint = new Paint(mPaint); //小刻度画笔对象
    tmpPaint.setStrokeWidth(1);

    float  y=100;
    int count = 60; //总刻度数

    for(int i=0 ; i <count ; i++){
        if(i%5 == 0){
            canvas.drawLine(0f, y, 0, y+12f, mPaint);
            canvas.drawText(String.valueOf(i/5+1), -4f, y+25f, tmpPaint);

        }else{
            canvas.drawLine(0f, y, 0f, y +5f, tmpPaint);
        }
        canvas.rotate(360/count,0f,0f); //旋转画纸
    }

    //绘制指针
    tmpPaint.setColor(Color.GRAY);
    tmpPaint.setStrokeWidth(4);
    canvas.drawCircle(0, 0, 7, tmpPaint);
    tmpPaint.setStyle(Paint.Style.FILL);
    tmpPaint.setColor(Color.YELLOW);
    canvas.drawCircle(0, 0, 5, tmpPaint);
    canvas.drawLine(0, 10, 0, -65, mPaint);
}

Résumé de cette section :

Dans cette section, nous discutons des trois API de dessin sous la classe d'interface android.graphics : Canvas (canvas), Paint (brush), Path (path) Il existe de nombreuses façons d'apprendre, ne le mémorisez pas, recherchez-le simplement lorsque vous en avez besoin. Ici, nous avons d'abord une image approximative, où sont les contrôles personnalisés ? Allons-y doucement~ D'accord, c'est tout, merci~