自定義view視圖之Canvas+Paint圖形繪制
更新時間：2023年04月04日 09:02:42 作者：小白的成長之路
這篇文章主要介紹了自定義view視圖之Canvas+Paint圖形繪制,我們開發(fā)自定義view的時候，就要繪制自己心儀的圖形，這個時候我們就要能夠熟練的運(yùn)用我們的繪圖知識,需要的朋友可以參考下
我們開發(fā)自定義view的時候，就要繪制自己心儀的圖形，這個時候我們就要能夠熟練的運(yùn)用我們的繪圖知識，這里我們看一下如何實(shí)現(xiàn)
一、繪圖都需要那些相關(guān)知識
1、我們平常畫畫一樣，我們需要一張畫布（Canvas）
2、我們平常畫畫一樣，我們需要一直畫筆（Paint）
二、我們先來了解下Canvas
Canvas代表了“依附”于指定View的畫布，他提供了很多形狀的繪制方法，而Paint也提供了一些方法，如下 Canvas常用方法
Paint常用方法
還有幾個效果方法
rotate(float degrees,float px,float py):對Canvas執(zhí)行旋轉(zhuǎn)變換。
scale(float sx,float sy,float px,float py):對Canvas進(jìn)行縮放變換。
skew(float sx,float sy):對Canvas執(zhí)行傾斜變換。
translate(float dx,float dy):移動Canvas。向右移動dx距離（dx為負(fù)數(shù)即向左）：向下移動dy（正數(shù)為下移動，負(fù)數(shù)為上移動）
三、那我們?nèi)绾蝸硎褂眠@些方法進(jìn)行繪制呢？
1、我們需要創(chuàng)建一個類繼承view
重寫構(gòu)造方法，和onDraw（）方法，而我們就需要在此方法中進(jìn)行繪制
（1）首先定義一個畫筆對象和一個畫布的顏色
paint = new Paint(); canvas.drawColor(Color.WHITE);
（2）我們需要給我的畫筆對象設(shè)置一些屬性，比如畫筆的大小、顏色等！
//我們給畫筆設(shè)置一些屬性，
paint.setAntiAlias(true);//取消鋸齒
paint.setColor(Color.BLUE);//畫筆的顏色
paint.setStyle(Paint.Style.STROKE);//畫筆的粗細(xì)
paint.setStrokeWidth(4);//畫筆的寬度
int viewWidth = this.getWidth();//獲取系統(tǒng)屏幕
//-------------------------------------------------------------------------
/*
* 給我們繪制的圖形進(jìn)行填充，看效果打開代碼即可
* */
// paint.setStyle(Paint.Style.FILL);//充滿填充
// paint.setColor(Color.RED);//填充顏色
//-------------------------------------------------------------------------
/*
* 設(shè)置圖形漸變，看效果打開代碼即可
* */
// 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);
// //設(shè)置陰影
// paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);
那么如何進(jìn)行繪制，其實(shí)很簡單，直接調(diào)用上面表格中的方法即可，例如繪制圓形，只有一句
/*
* 繪制圓形
* drawCirecle(cx,xy,radius，paint)
* cx: viewWidth / 10 + 10表示占屏幕的十分之一，并且左偏移10dp
* xy: viewWidth / 10 + 10表示占屏幕的十分之一，并且上偏移10dp
* radius: 半徑
* paint:畫筆
* */
canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, 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);
}
//如果這個不引用，會報(bào)錯哦！自定義View，必須在構(gòu)造函數(shù)有AttributeSet attrs這個參數(shù)，便于自定義屬性的引用。
public CanvasText(Context context, AttributeSet attrs) {
super(context, attrs);
}
//我們重寫onDraw()方法
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//聲明一個畫筆，設(shè)置一個白色的畫布，這樣筆和畫布都有了
paint = new Paint();
canvas.drawColor(Color.WHITE);
//我們給畫筆設(shè)置一些屬性，
paint.setAntiAlias(true);//取消鋸齒
paint.setColor(Color.BLUE);//畫筆的顏色
paint.setStyle(Paint.Style.STROKE);//畫筆的粗細(xì)
paint.setStrokeWidth(4);//畫筆的寬度
int viewWidth = this.getWidth();//獲取控件屏幕
//-------------------------------------------------------------------------
/*
* 給我們繪制的圖形進(jìn)行填充，看效果打開代碼即可
* */
// paint.setStyle(Paint.Style.FILL);//充滿填充
// paint.setColor(Color.RED);//填充顏色
//-------------------------------------------------------------------------
/*
* 設(shè)置圖形漸變，看效果打開代碼即可
* */
// 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);
// //設(shè)置陰影
// paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);
//-------------------------------------------------------------------------
/*
* 繪制圓形
* drawCirecle(cx,xy,radius，paint)
* radius: 半徑
* paint:畫筆
* */
canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, paint);
//-------------------------------------------------------------------------
/*
* 繪制正方形
* drawRect(左，上，右，下，畫筆)
* */
canvas.drawRect(10 , viewWidth / 5 + 20 , viewWidth / 5 + 10,viewWidth * 2 / 5 + 20 , paint);
//-------------------------------------------------------------------------
/*
* 繪制矩形
* drawRect(左，上，右，下，畫筆)
* */
canvas.drawRect(10, viewWidth * 2 / 5 + 30, viewWidth / 5 + 10, viewWidth / 2 + 30, paint);
//-------------------------------------------------------------------------
/*
* 繪制橢圓
*1、我們先來一個矩形，
*
*
* */
RectF re1 = new RectF(10, viewWidth / 2 + 40, 10 + viewWidth / 5 ,viewWidth * 3 / 5 + 40);
// 繪制圓角矩形
canvas.drawRoundRect(re1, 15, 15, paint);
//-------------------------------------------------------------------------
/*
* 定義一個Path對象，封閉成一個三角形
* 三角形的繪制，和上面不一樣，這里面需要有3個坐標(biāo)點(diǎn)
* 連接三個坐標(biāo)點(diǎn)即可（左、右、上下）
* */
Path path1 = new Path();
path1.moveTo(10, viewWidth * 9 / 10 + 60);
path1.lineTo(viewWidth / 5 + 10, viewWidth * 9 / 10 + 60);
path1.lineTo(viewWidth / 10 + 10, viewWidth * 7 / 10 + 60);
path1.close();
canvas.drawPath(path1, paint);
//-------------------------------------------------------------------------
/*
* 定義一個Path對象，封閉成一個五角形
* 連接五個坐標(biāo)點(diǎn)即可（順時針開始繪制點(diǎn)）
* */
Path path2 = new Path();
path2.moveTo(10 + viewWidth / 15, viewWidth * 9 / 10 + 70);
path2.lineTo(10 + viewWidth * 2 / 15, viewWidth * 9 / 10 + 70);
path2.lineTo(10 + viewWidth / 5, viewWidth + 70);
path2.lineTo(10 + viewWidth / 10, viewWidth * 11/10 + 70);
path2.lineTo(10 , viewWidth + 70);
path2.close();
canvas.drawPath(path2, paint);
//-------------------------------------------------------------------------
/*
* 文字的添加
* paint.setTextSize(textSize);//設(shè)置字體大小
* paint.setTypeface(typeface);//設(shè)置字體類型搜索
* canvas.drawText(text, x, y, paint);//使用畫筆paint
* */
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
paint.setStrokeWidth(2);
paint.setTextSize(36);
canvas.drawText("圓形", 60 + viewWidth * 3 / 5, viewWidth / 10 + 10, paint);
canvas.drawText("正方形", 60 + viewWidth * 3 / 5, viewWidth * 3 / 10 + 20, paint);
canvas.drawText("長方形", 60 + viewWidth * 3 / 5, viewWidth * 1 / 2 + 20, paint);
canvas.drawText("圓角矩形" , 60 + viewWidth * 3 / 5, viewWidth * 3 / 5 + 30, paint);
canvas.drawText("橢圓", 60 + viewWidth * 3 / 5, viewWidth * 7 / 10 + 30, paint);
canvas.drawText("三角", 60 + viewWidth * 3 / 5, viewWidth * 9 / 10 + 30, paint);
canvas.drawText("五角星", 60 + viewWidth * 3 / 5, viewWidth * 11 / 10 + 30, 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>
五、運(yùn)行效果
無填充效果
填充效果
漸變效果
到此這篇關(guān)于自定義view視圖之Canvas+Paint圖形繪制的文章就介紹到這了,更多相關(guān)Canvas+Paint圖形繪制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android原生嵌入React Native的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Android編程錄音工具類RecorderUtil定義與用法示例
這篇文章主要介紹了Android編程錄音工具類RecorderUtil定義與用法,結(jié)合實(shí)例形式分析了Android錄音工具類實(shí)現(xiàn)開始錄音、停止錄音、取消錄音、獲取錄音信息等相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細(xì)介紹了Android中Dialog自定義上下文花式菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
實(shí)例詳解Android自定義ProgressDialog進(jìn)度條對話框的實(shí)現(xiàn)
這篇文章主要介紹了實(shí)例詳解Android自定義ProgressDialog進(jìn)度條對話框的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-01-01
Android開發(fā)實(shí)現(xiàn)Gallery畫廊效果的方法
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)Gallery畫廊效果的方法,結(jié)合具體實(shí)例形式分析了Android使用Gallery實(shí)現(xiàn)畫廊功能的具體操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-06-06
android實(shí)現(xiàn)Splash閃屏效果示例
這篇文章主要介紹了android實(shí)現(xiàn)Splash閃屏效果的方法,涉及Android中postDelayed方法及AndroidManifest.xml權(quán)限控制的相關(guān)使用技巧,需要的朋友可以參考下2016-08-08
這篇文章主要針對Android WebView 上傳文件支持進(jìn)行全面解析，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了Android動態(tài)加載Activity原理詳解的相關(guān)資料,需要的朋友可以參考下2016-04-04
Flutter 自定義Drawer 滑出位置的大小實(shí)例代碼詳解
這篇文章主要介紹了Flutter 自定義Drawer 滑出位置的大小,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Android注冊廣播的兩種方法,結(jié)合實(shí)例形式分析了Android注冊廣播的方法、步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-02-02