Android 2D Graphics Parsing canvas,paint

Source: Internet
Author: User
Tags drawtext getcolor

Original articles, reproduced please specify (from: http://blog.csdn.net/leejizhou/article/details/51524948 Li Zizhou blog)

The "Android 2D drawing resolution" series will cover Android drawing in a nutshell, this article explains how to use the Android API to draw some simple graphics, drawing on the premise that you need to inherit from view and then rewrite its ondraw (canvas canvas ) method.

First we create a new class that inherits from view and overrides the OnDraw method.

package com.leejz.androiddrawing;//blog:www.lijizhou.compublicclass CustomView extends View {    publicCustomView(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    protectedvoidonDraw(Canvas canvas) {        super.onDraw(canvas);    }}

Then add this view in layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.leejz.androiddrawing.MainActivity">    <com.leejz.androiddrawing.CustomView        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

The process of such a general custom view is set up, of course, now the run will show a blank, because we have not done any drawing in the OnDraw method, we need to know two Api,canvas and paint before drawing.

Canvas translation into Chinese is the meaning of the canvases, canvas is responsible for drawing a variety of graphics, it has some of the following drawing methods

    • DrawArc drawing Arcs
    • Drawbitmap Drawing bitmaps
    • Drawcircle Draw a circle
    • DrawLine Drawing Lines
    • DrawOval Drawing an ellipse
    • DrawPath Drawing Paths
    • Drawpoint Draw a dot
    • Drawpoints Drawing multiple points
    • DrawRect drawing rectangles
    • Drawroundrect Drawing rounded rectangles
    • DrawText drawing a String
    • Drawtextonpath drawing a string along a path

... More drawing methods refer to https://developer.android.com/reference/android/graphics/Canvas.html (Scientific Internet required)

Paint translated into Chinese has the meaning of paints, paint is mainly responsible for setting the style of drawing, including the color of the brush, thickness, fill style, etc., it has some of the following setup methods.

    • Setargb/setcolor Setting Colors
    • Setalpha Setting transparency
    • Setantialias setting whether anti-aliasing
    • Setshader to set the fill effect of a brush
    • Setshadowlayer setting Shadows
    • SetStyle Setting Brush Styles
    • Setstrokewidth Setting the width of a hollow border
    • Settextsize to set the text size when drawing text

... More Setup methods refer to https://developer.android.com/reference/android/graphics/Paint.html (Scientific Internet required)

We use the API above to make some simple drawings

Draw Circle: drawcircle (float cx, float CY, float radius, paint paint)

X-coordinate of cx> center
The y-coordinate of the cy> center
radius> radius of the Circle
Paint> Drawing Style

 @Override    protected void OnDraw(Canvas canvas) {Super. OnDraw (canvas); Paint paint=NewPaint ();//anti-aliasingPaint.setantialias (true);//Set colorPaint.setcolor (Getresources (). GetColor (Android. R.color.holo_blue_light));//Draw Ordinary CircleCanvas.drawcircle ( $, $, -, paint);//Set Hollow stylePaint.setstyle (Paint.Style.STROKE);//Set the width of the hollow borderPaint.setstrokewidth ( -);//Draw Hollow CircleCanvas.drawcircle ( $, -, -, paint); }

Operating effect:

Draw Rectangle: DrawRect (float left, float top, float right, float bottom, paint paint)/drawrect (RECTF rect, paint paint)

Left> The x-coordinate of the left of the rectangle
Top> the y-coordinate of the rectangle top
Right> The x-coordinate of the rectangle right
Bottom> the y-coordinate of the rectangle bottom
Paint> Drawing Style

   @Override    protected void OnDraw(Canvas canvas) {Super. OnDraw (canvas); Paint paint =NewPaint ();//anti-aliasingPaint.setantialias (true);//Set colorPaint.setcolor (Getresources (). GetColor (Android. R.color.holo_blue_light));//Draw a squareCanvas.drawrect ( -, -, -, -, paint);//The above code is equivalent to        //RECTF rel=new RECTF (100,100,300,300);        //canvas.drawrect (rel, paint);        //Set Hollow stylePaint.setstyle (Paint.Style.STROKE);//Set the width of the hollow borderPaint.setstrokewidth ( -);//Draw Hollow RectangleCanvas.drawrect ( -, -, -, -, paint); }

Operating effect:

Draw rounded rectangles: drawroundrect (float left, float top, float right, float bottom, float rx, float ry, paint paint)/drawroundrect (Re CtF rect, float rx, float ry, paint paint)

Left> Graph left x-coordinate
Top> the y-coordinate of the graph top
Right> The x-coordinate of the graph right
Bottom> the y-coordinate of the graphic bottom
Fillet radius of Rx>x direction
Fillet radius of Ry>y direction
Paint> Drawing Style

   @Override    protected void OnDraw(Canvas canvas) {Super. OnDraw (canvas); Paint paint =NewPaint ();//anti-aliasingPaint.setantialias (true);//Set colorPaint.setcolor (Getresources (). GetColor (Android. R.color.holo_blue_light));//Draw rounded rectanglesCanvas.drawroundrect ( -, -, -, -, -, -, paint);//The above code is equivalent to        //RECTF rel=new RECTF (100,100,300,300);        //canvas.drawroundrect (rel,30,30,paint);        //Set Hollow stylePaint.setstyle (Paint.Style.STROKE);//Set the width of the hollow borderPaint.setstrokewidth ( -);//Draw Hollow Rounded RectangleCanvas.drawroundrect ( -, -, -, -, -, -, paint); }

Run effect

Draw ellipse: DrawOval (float left, float top, float right, float bottom, paint paint)

Left> Graph left x-coordinate
Top> the y-coordinate of the graph top
Right> The x-coordinate of the graph right
Bottom> the y-coordinate of the graphic bottom
Paint> Drawing Style

  @Override    protected void OnDraw(Canvas canvas) {Super. OnDraw (canvas); Paint paint =NewPaint ();//anti-aliasingPaint.setantialias (true);//Set colorPaint.setcolor (Getresources (). GetColor (Android. R.color.holo_orange_dark));//Draw EllipseCanvas.drawoval ( -, -, -, -, paint);//Set Hollow stylePaint.setstyle (Paint.Style.STROKE);//Set the width of the hollow borderPaint.setstrokewidth ( -);//Draw Hollow EllipseCanvas.drawoval ( -, -, -, -, paint); }

Operating effect:

Draw arc: DrawArc (RECTF oval, float startangle, float sweepAngle, Boolean usecenter, Paint paint)

oval> the outer contour rectangle area of the specified arc
Startangle> Arc starting angle, unit of degree
sweepangle> arc sweep Angle, clockwise direction, unit degree
Usecenter> If true, the center of the circle is included when the arc is drawn, and is typically used to draw a fan
Paint> Drawing Style

  @Override    protected void OnDraw(Canvas canvas) {Super. OnDraw (canvas); Paint paint =NewPaint ();//anti-aliasingPaint.setantialias (true);//Set colorPaint.setcolor (Getresources (). GetColor (Android.        R.color.holo_orange_dark)); RECTF rel =NewRECTF ( -, -, -, -);//Solid arcCanvas.drawarc (rel,0, the,false, paint);//Solid arc contains the center of the CircleRECTF Rel2 =NewRECTF ( -, -, -, -); Canvas.drawarc (Rel2,0, the,true, paint);//Set Hollow stylePaint.setstyle (Paint.Style.STROKE); Paint.setstrokewidth ( -); RECTF Rel3 =NewRECTF ( -, the, -, the); Canvas.drawarc (REL3,0, the,false, paint); RECTF Rel4 =NewRECTF ( -, +, -, -); Canvas.drawarc (Rel4,0, the,true, paint); }

Run effect

Draw text: DrawText (String text, float x, float y, paint paint)

text> text
X> The x-coordinate of origin of the text
Y> the y-coordinate of the text baseline
Paint> Drawing Style

*origin and Baseline

  @Override    protectedvoidonDraw(Canvas canvas) {        super.onDraw(canvas);        new Paint();        //去锯齿        paint.setAntiAlias(true);        //设置颜色        paint.setColor(getResources().getColor(android.R.color.holo_orange_dark));        paint.setTextSize(100);        //绘制文本        canvas.drawText("jEh"80150, paint);    }

Operating effect:

Ok,android Drawing series of the first article about canvas and paint on the simple introduction to this, canvas more kinds of drawing effect can refer to the official documents and hands-on effect, welcome to the bottom of the message, you can also click on the top left corner of the attention.

Android 2D Graphics Parsing canvas,paint

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.