zu www.bildungsgueter.de zur Inhaltsübersicht des Kapitels vorheriger Abschnitt

Striche und Strichverbindungen, Kantenglättung

Linien zeichnen

Bla bla bla ...

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint strichfarbe = new Paint();
        strichfarbe.setColor(Color.rgb(250, 0, 0));
        strichfarbe.setStrokeWidth(1.0f);
        strichfarbe.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(20.0f,
                        20.0f,
                        200.0f,
                        200.0f,
                        strichfarbe);
    }

Diese Anweisungsfolge zeichnet einen diagonal verlaufenden Strich.

Eine dünne Linie

Den gleichen Strich kannst du auch breiter zeichnen, wenn du die Strichbreite mit setStrokeWidth einstellst.

Beim Zeichnen mit breitem Strich können die Strichenden abgerundet, abgeschnitten oder überstehend gezeichnet werden. Du verwendest die Methode setStrokeCap, um das Aussehen der Strichenden festzulegen.

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint strichfarbe = new Paint();
        strichfarbe.setColor(Color.rgb(250, 0, 0));
        strichfarbe.setStrokeWidth(25.0f);
        strichfarbe.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(20.0f,
                        20.0f,
                        200.0f,
                        200.0f,
                        strichfarbe);
    }

Eine dicke Linie mit runden Strichenden

Kantenglättung

Streckenzüge zeichnen

Zunächst wird der Streckenzug als eine Folge von Bewegungen des gedachten Zeichenstifts in eine Datenstruktur vom Typ Path eingetragen. Nachdem alle Strichelemente des Streckenzugs festgelegt wurden, wird der Streckezug mit einem einzigen Befehl (drawPath) gezeichnet.

Die Strichelemente eines Streckenzuges können auf verschiedene Weise miteinander verbunden werden. Beim Zeichnen mit einem breiten Strich sehen *****. Die gewünschte Strichverbindung legst du mit einem Aufruf der methode setStrokeJoin fest.

    @Override
    protected void onDraw(Canvas canvas) {
        Path polygon = new Path();
        final int n = 5;
        final int centerX = 150;
        final int centerY = 150;
        final float centerAngle = 360.0f / n;
        final float initialAngle = 0.0f;
        final int radius = 60;
        for (int i = 0; i < n; i++) {
        	float angle = 2*i*centerAngle + initialAngle;
        	float arc = (float)(Math.PI*angle/180.0);
        	float x = (float)(radius*Math.cos(arc)) + centerX;
        	float y = (float)(radius*Math.sin(arc)) + centerY;
            if (i == 0) {
            	polygon.moveTo(x, y);
            } else {
            	polygon.lineTo(x, y);
            }
        }
        polygon.close();
        strichfarbe.setColor(Color.rgb(40, 40, 250));
        strichfarbe.setStrokeWidth(3.0f);
        strichfarbe.setStrokeCap(Paint.Cap.ROUND);
        strichfarbe.setStrokeJoin(Paint.Join.MITER);
        strichfarbe.setStyle(Paint.Style.STROKE);
        
        canvas.drawPath(polygon,
                        strichfarbe);
    }

Ein f&uunl;nfzackiger Stern (ein Pentagramm)

Form der Strichenden und der Strichverbindungen festlegen

bla bla bla

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint strichfarbe = new Paint();
        strichfarbe.setColor(Colorrgb(250, 0, 0));
        strichfarbe.setStrokeWidth(2.0f);
        strichfarbe.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(20.0f,
                        20.0f,
                        200.0f,
                        200.0f,
                        strichfarbe);
    }

Hier sind Beispiele einzufügen und zu erklären.


Kreise, Kreisbögen, Kreissgemente, Kreissektoren

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint fuellfarbe = new Paint();
        Paint randfarbe = new Paint();
        fuellfarbe.setStyle(Paint.Style.FILL);
        fuellfarbe.setColor(Color.argb(158, 0, 250, 0));
        randfarbe.setStrokeWidth(15.0f);
        randfarbe.setStyle(Paint.Style.STROKE);
        randfarbe.setColor(Color.argb(128, 100, 100, 250));
        fuellfarbe.setAntiAlias(true);
        randfarbe.setAntiAlias(true);
        final int cx = 160;
        final int cy = 120;
        final int radius = 100;
        canvas.drawCircle(cx, cy, radius, fuellfarbe);  // Kreis ausfuellen
        canvas.drawCircle(cx, cy, radius, randfarbe);   // Kreis umranden
    }

Ausgefüllter und umrandeter Kreis

Kreissektor

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint fuellfarbe = new Paint();
        Paint randfarbe = new Paint();
        fuellfarbe.setStyle(Paint.Style.FILL);
        fuellfarbe.setColor(Color.argb(158, 0, 250, 0));
        randfarbe.setStrokeWidth(15.0f);
        randfarbe.setStyle(Paint.Style.STROKE);
        randfarbe.setColor(Color.argb(128, 100, 100, 250));
        fuellfarbe.setAntiAlias(true);
        randfarbe.setAntiAlias(true);

        RectF rect = new RectF(10, 300, 210, 500);   //  einhuellendes Quadrat eines Kreises
        canvas.drawArc(rect, 0.0f, 120.0f, true, fuellfarbe);  // Kreissektor ausfuellen
        canvas.drawArc(rect, 0.0f, 120.0f, true, randfarbe);   //  Kreissektor umranden
    }

Ausgefüllter und umrandeter Kreissektor

Einen Farbverlauf verwenden

Eine geometrische Figur kannst du einfarbig ausmalen. Du kannst aber auch eine Füllung mit ineinander übergehenden Farben herstellen. Dazu bereitest du zuerst einen Farbverlauf vor, den du in die Füllfarbe einträgst.

Linearer Farbverlauf

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint fuellFarbe = new Paint();

        int [] colors = { Color.rgb(250, 0, 0), Color.rgb(0, 250, 0)};
        float [] positions =  {0.0f, 1.0f };
        LinearGradient gradient = new LinearGradient(0.0f, 0.0f,
                                                      200.0f, 200.0f,
                                                      colors, positions,
                                                      Shader.TileMode.CLAMP);

        fuellFarbe.setShader(gradient);
        fuellFarbe.setStyle(Paint.Style.FILL);
        fuellFarbe.setAntiAlias(true);
       
        canvas.drawRect(0.0f, 0.0f, 200.0f, 200.0f,
                fuellFarbe);
    }

Linearer Farbverlauf mit deckenden Farben

Waagerechter Verlauf:

        LinearGradient gradient = new LinearGradient(0.0f, 0.0f,
                                                      200.0f, 0.0f,
                                                      colors, positions,
                                                      Shader.TileMode.CLAMP);

Linearer Farbverlauf mit deckenden Farben

Mehrere Zwischenfarben:

Linearer Farbverlauf

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint fuellFarbe = new Paint();

        int [] colors = { Color.rgb(250, 0, 0),
                          Color.rgb(250, 250, 0),
                          Color.rgb(0, 250, 0)};
        float [] positions =  {0.0f, 0.5f, 1.0f };
        LinearGradient gradient = new LinearGradient(0.0f, 0.0f,
                                                      200.0f, 200.0f,
                                                      colors, positions,
                                                      Shader.TileMode.CLAMP);

        fuellFarbe.setShader(gradient);
        fuellFarbe.setStyle(Paint.Style.FILL);
        fuellFarbe.setAntiAlias(true);
       
        canvas.drawRect(0.0f, 0.0f, 200.0f, 200.0f,
                fuellFarbe);
    }

Linearer Farbverlauf mit drei deckenden Farben

Einen Farbverlauf mit durchscheinenden Farben verwenden

Du kannst in einem Farbverlauf auch durchscheinende Farben verwenden. Dafür verwendest du statt der Methode Color.rgb die Methode Color.argb, in der du zusätzlich zu den Grundfarben den Alpha-Faktor angibst, der die Deckkraft der Farbe festlegt.

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint strichfarbe = new Paint();
        Paint fuellFarbe = new Paint();
        Paint redStroke = new Paint();

        int [] colors1 = { Color.argb(128, 250, 0, 0), Color.argb(128, 0, 250, 0)};
        int [] colors2 = { Color.argb(128, 180, 180, 250), Color.argb(128, 30, 30, 250)};
        float [] positions =  {0.0f, 1.0f };
        LinearGradient gradient1 = new LinearGradient(0.0f, 0.0f,
                                                      200.0f, 200.0f,
                                                      colors1, positions,
                                                      Shader.TileMode.CLAMP);
        LinearGradient gradient2 = new LinearGradient(0.0f, 0.0f,
                                                      200.0f, 200.0f,
                                                      colors2, positions,
                                                      Shader.TileMode.CLAMP);
        strichfarbe.setShader(gradient2);
        strichfarbe.setStrokeWidth(19.0f);
        strichfarbe.setStrokeCap(Paint.Cap.ROUND);
        strichfarbe.setStrokeJoin(Paint.Join.MITER);
        strichfarbe.setStyle(Paint.Style.STROKE);
        strichfarbe.setAntiAlias(true);
        fuellFarbe.setShader(gradient1);
        fuellFarbe.setStyle(Paint.Style.FILL);
        fuellFarbe.setAntiAlias(true);
        redStroke.setColor(Color.rgb(255, 0, 0));
        redStroke.setStrokeWidth(19.0f);
        redStroke.setStrokeCap(Paint.Cap.BUTT);
        redStroke.setStyle(Paint.Style.STROKE);
        redStroke.setAntiAlias(true);
       
        canvas.drawLine(10.0f,  10.0f, 210.0f, 210.0f,
                redStroke);
        canvas.drawCircle(110.0f, 110.0f, 90.0f,
                fuellFarbe);
        canvas.drawCircle(110.0f, 110.0f, 90.0f,
                strichfarbe);
    }

Linearer Farbverlauf mit durchscheinenden Farben

Hier gehören Kapitel über die Klasse Path und über die Verwendung quadratischer und kubischer Elementarkurven hin.


Text anzeigen

Um Text anzuzeigen, musst du eine Instanz von Paint vorbereiten, in der du eine Schrift (Typeface) und eine Schriftgröße festgelegt hast. Das Anzeigen des Textes geschieht dann mit der Methode drawText, die von Canvas bereitgestellt wird.

Paint fontToUse = new Paint();
Typeface font = Typeface.create("Arial", Typeface.NORMAL);
fontToUse.setTypeface(font);
fontToUse.setTextSize(20);
fontToUse.setColor(Color.BLACK);

vorheriger Abschnitt zur Inhaltsübersicht des Kapitels