自定義view—繪圖基礎Canvas+Paint

繪圖基礎

第一節：http://blog.csdn.net/bobo8945510/article/details/53197727 —自定義View—自定義屬性及引用

第二節：http://blog.csdn.net/bobo8945510/article/details/53203233 自定義view02—圖形繪制

第三節：http://blog.csdn.net/bobo8945510/article/details/53213938 自定義View-繪圖基礎之Path

第四節：http://blog.csdn.net/bobo8945510/article/details/53256863 Android實作手寫闆和塗鴉

第五節：http://blog.csdn.net/bobo8945510/article/details/53257232 環形進度條

第六章：http://blog.csdn.net/bobo8945510/article/details/53374319 自定義折線圖

我們開發自定義view的時候，就要繪制自己心儀的圖形，這個時候我們就要能夠熟練的運用我們的繪圖知識，這裡我們看一下如何實作

一、繪圖都需要那些相關知識

1、我們平常畫畫一樣，我們需要一張畫布（Canvas）

2、我們平常畫畫一樣，我們需要一直畫筆（Paint）

二、我們先來了解下Canvas，Canvas代表了“依附”于指定View的畫布，他提供了很多形狀的繪制方法，而Paint也提供了一些方法，如下

Canvas常用方法

自定義view—繪圖基礎Canvas+Paint

Paint常用方法

自定義view—繪圖基礎Canvas+Paint

還有幾個效果方法

rotate(float degrees,float px,float py):對Canvas執行旋轉變換。

scale(float sx,float sy,float px,float py):對Canvas進行縮放變換。

skew(float sx,float sy):對Canvas執行傾斜變換。

translate(float dx,float dy):移動Canvas。向右移動dx距離（dx為負數即向左）：向下移動dy（正數為下移動，負數為上移動）

三、那我們如何來使用這些方法進行繪制呢？

1、我們需要建立一個類繼承view,重寫構造方法，和onDraw（）方法，而我們就需要在此方法中進行繪制

（1）首先定義一個畫筆對象和一個畫布的顔色

paint = new Paint();
        canvas.drawColor(Color.WHITE);

（2）我們需要給我的畫筆對象設定一些屬性，比如畫筆的大小、顔色等！

//我們給畫筆設定一些屬性，

        paint.setAntiAlias(true);//取消鋸齒
        paint.setColor(Color.BLUE);//畫筆的顔色
        paint.setStyle(Paint.Style.STROKE);//畫筆的粗細
        paint.setStrokeWidth();//畫筆的寬度
        int viewWidth = this.getWidth();//擷取系統螢幕


//-------------------------------------------------------------------------
        /*
        * 給我們繪制的圖形進行填充，看效果打開代碼即可
        * */
//        paint.setStyle(Paint.Style.FILL);//充滿填充
//        paint.setColor(Color.RED);//填充顔色

//-------------------------------------------------------------------------
        /*
        * 設定圖形漸變，看效果打開代碼即可
        * */
//        Shader mShader = new LinearGradient(, , , 
//                ,new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }
//                , null , Shader.TileMode.REPEAT);
//        paint.setShader(mShader);
//        //設定陰影
//        paint.setShadowLayer( ,  ,  , Color.GRAY);

那麼如何進行繪制，其實很簡單，直接調用上面表格中的方法即可，例如繪制圓形，隻有一句

/*
        * 繪制圓形
        * drawCirecle(cx,xy,radius，paint)
        * cx: viewWidth / 10 + 10表示占螢幕的十分之一，并且左偏移10dp
        * xy: viewWidth / 10 + 10表示占螢幕的十分之一，并且上偏移10dp
        * radius: 半徑
        * paint:畫筆
        * */
        canvas.drawCircle(viewWidth /  + , viewWidth /  + , viewWidth / , paint);

全部代碼如下

package tester.ermu.com.canvasdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by ENZ on 2016/11/17.
 * 1、我們不管繪制什麼圖形，都需要兩個工具，就是畫筆和畫布。
 * 2、canvas是畫布
 * 3、Paint是畫筆
 */

public class CanvasText extends View {
    //聲明一個畫筆的對象
    private Paint paint;

    public CanvasText(Context context) {
        super(context);
    }

    //如果這個不引用，會報錯哦！自定義View，必須在構造函數有AttributeSet attrs這個參數，便于自定義屬性的引用。
    public CanvasText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //我們重寫onDraw()方法
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //聲明一個畫筆，設定一個白色的畫布，這樣筆和畫布都有了
        paint = new Paint();
        canvas.drawColor(Color.WHITE);

        //我們給畫筆設定一些屬性，

        paint.setAntiAlias(true);//取消鋸齒
        paint.setColor(Color.BLUE);//畫筆的顔色
        paint.setStyle(Paint.Style.STROKE);//畫筆的粗細
        paint.setStrokeWidth();//畫筆的寬度
        int viewWidth = this.getWidth();//擷取控件螢幕


//-------------------------------------------------------------------------
        /*
        * 給我們繪制的圖形進行填充，看效果打開代碼即可
        * */
//        paint.setStyle(Paint.Style.FILL);//充滿填充
//        paint.setColor(Color.RED);//填充顔色

//-------------------------------------------------------------------------
        /*
        * 設定圖形漸變，看效果打開代碼即可
        * */
//        Shader mShader = new LinearGradient(0, 0, 40, 60
//                ,new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }
//                , null , Shader.TileMode.REPEAT);
//        paint.setShader(mShader);
//        //設定陰影
//        paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);

//-------------------------------------------------------------------------
        /*
        * 繪制圓形
        * drawCirecle(cx,xy,radius，paint)
        * radius: 半徑
        * paint:畫筆
        * */
        canvas.drawCircle(viewWidth /  + , viewWidth /  + , viewWidth / , paint);
//-------------------------------------------------------------------------
        /*
        * 繪制正方形
        * drawRect(左，上，右，下，畫筆)
        * */
        canvas.drawRect( , viewWidth /  +  , viewWidth /  + ,viewWidth *  /  +  , paint);

//-------------------------------------------------------------------------
        /*
        * 繪制矩形
        * drawRect(左，上，右，下，畫筆)
        * */
        canvas.drawRect(, viewWidth *  /  + , viewWidth /  + , viewWidth /  + , paint);

//-------------------------------------------------------------------------

        /*
        * 繪制橢圓
        *1、我們先來一個矩形，
        *
        *
        * */
        RectF re1 = new RectF(, viewWidth /  + ,  + viewWidth /  ,viewWidth *  /  + );
        // 繪制圓角矩形
        canvas.drawRoundRect(re1, , , paint);

//-------------------------------------------------------------------------
        /*
        * 定義一個Path對象，封閉成一個三角形
        * 三角形的繪制，和上面不一樣，這裡面需要有3個坐标點
        * 連接配接三個坐标點即可（左、右、上下）
        * */

        Path path1 = new Path();
        path1.moveTo(, viewWidth *  /  + );
        path1.lineTo(viewWidth /  + , viewWidth *  /  + );
        path1.lineTo(viewWidth /  + , viewWidth *  /  + );
        path1.close();
        canvas.drawPath(path1, paint);
//-------------------------------------------------------------------------
        /*
        * 定義一個Path對象，封閉成一個五角形
        * 連接配接五個坐标點即可（順時針開始繪制點）
        * */

        Path path2 = new Path();
        path2.moveTo( + viewWidth / , viewWidth *  /  + );
        path2.lineTo( + viewWidth *  / , viewWidth *  /  + );
        path2.lineTo( + viewWidth / , viewWidth + );
        path2.lineTo( + viewWidth / , viewWidth * / + );
        path2.lineTo( , viewWidth + );
        path2.close();
        canvas.drawPath(path2, paint);

//-------------------------------------------------------------------------
        /*
        * 文字的添加
        *  paint.setTextSize(textSize);//設定字型大小
        *  paint.setTypeface(typeface);//設定字型類型搜尋
        *  canvas.drawText(text, x, y, paint);//使用畫筆paint
        * */
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStrokeWidth();
        paint.setTextSize();
        canvas.drawText("圓形",  + viewWidth *  / , viewWidth /  + , paint);
        canvas.drawText("正方形",  + viewWidth *  / , viewWidth *  /  + , paint);
        canvas.drawText("長方形",  + viewWidth *  / , viewWidth *  /  + , paint);
        canvas.drawText("圓角矩形" ,  + viewWidth *  / , viewWidth *  /  + , paint);
        canvas.drawText("橢圓",  + viewWidth *  / , viewWidth *  /  + , paint);
        canvas.drawText("三角",  + viewWidth *  / , viewWidth *  /  + , paint);
        canvas.drawText("五角星",  + viewWidth *  / , viewWidth *  /  + , paint);
    }
}

四、我們在布局中引用我們自定義的類

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <tester.ermu.com.canvasdemo.CanvasText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />
</LinearLayout>

五、運作效果

無填充效果

自定義view—繪圖基礎Canvas+Paint
填充效果

自定義view—繪圖基礎Canvas+Paint
漸變效果

自定義view—繪圖基礎Canvas+Paint

自定義view—繪圖基礎Canvas+Paint

繪圖基礎

我們開發自定義view的時候，就要繪制自己心儀的圖形，這個時候我們就要能夠熟練的運用我們的繪圖知識，這裡我們看一下如何實作

一、繪圖都需要那些相關知識

1、我們平常畫畫一樣，我們需要一張畫布（Canvas）

2、我們平常畫畫一樣，我們需要一直畫筆（Paint）

二、我們先來了解下Canvas，Canvas代表了“依附”于指定View的畫布，他提供了很多形狀的繪制方法，而Paint也提供了一些方法，如下

三、那我們如何來使用這些方法進行繪制呢？

1、我們需要建立一個類繼承view,重寫構造方法，和onDraw（）方法，而我們就需要在此方法中進行繪制

四、我們在布局中引用我們自定義的類

五、運作效果

demo:http://download.csdn.net/detail/bobo8945510/9685916

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯