繪圖[上](四)

image.png

目錄

繪圖工具

Android下繪圖需要使用view.使用自定義的view完成繪制.
其中需要使用的有三個(gè)工具:Paint,Canvas,Path.

Paint

繪圖需要兩個(gè)工具,筆和紙。

這里的 Paint相當(dāng)于筆,而 Canvas相當(dāng)于紙,不過需要注意的是 Canvas(畫布)無限大,沒有邊界,切記理解成只有屏幕大小。

API 含義
setAntiAlias(); 設(shè)置畫筆的鋸齒效果
setColor(); 設(shè)置畫筆的顏色
setARGB(); 設(shè)置畫筆的A、R、G、B值
setAlpha(); 設(shè)置畫筆的Alpha值
setTextSize(); 設(shè)置字體的尺寸
setStyle(); 設(shè)置畫筆的風(fēng)格(空心或?qū)嵭模?/td>
setStrokeWidth(); 設(shè)置空心邊框的寬度
getColor(); 獲取畫筆的顏色

Canvas

Canvass是畫布.

API 含義
canvas.drawPoint(x,y,paint); 繪制點(diǎn)
canvas.drawLine(startX,startY,endX,endY,paint); 繪制直線
canvas.drawRect(left,top,right,button,paint); 繪制矩形
canvas.drawRect(left,top,right,button,radiusX,radiusY,paint); 繪制圓角矩形
canvas.drawCircle(圓心X坐標(biāo),Y坐標(biāo),半徑,paint1); 繪制圓
canvas.drawArc(left,top,right,button, startAngle, sweepAngle, useCenter, paint2); 繪制弧形/扇形

Path

顧名思義,就是路徑的意思.

使用Path不僅可以繪制簡(jiǎn)單的圖形(如圓形,矩形,直線等),也可以繪制復(fù)雜一些的圖形(如正多邊形,五角星等),還有繪制裁剪和繪制文本都會(huì)用到Path。

API 含義
moveTo 移動(dòng)起點(diǎn)
lineTo 連接直線
setLastPoint 設(shè)置終點(diǎn)
close 閉合路勁
addRect 添加矩形
addRoundRect 添加圓角矩形
addOval 添加橢圓
addCircle 添加圓
addPah 添加路勁
addArc 添加圓弧
arcTo 圓弧
isEmpty 是否為空
isRect 是否為矩形
set 替換路勁
offset 偏移路勁
quadTo 貝塞爾曲線 二次貝塞爾曲線的方法
cubicTo 貝塞爾曲線 三次貝塞爾曲線的方法
setFillType 填充模式
getFillType 填充模式
isInverseFillType 是否逆填充
toggleInverseFillType 相反模式
getFillType 填充模式
incReserve 提示方法
computeBounds 計(jì)算邊界
reset,rewind 重置路勁
transform 矩陣操作

好了,理論結(jié)束,下面開始實(shí)戰(zhàn).

使用Canvas和Paint畫圓

首先創(chuàng)建一個(gè)新的類,集成于view類:
HelloView.java文件:

package com.example.user.test11;

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

public class HelloView extends View{

    public HelloView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        // 設(shè)置畫筆
        Paint mPaint = new Paint();
        // 設(shè)定畫筆顏色
        mPaint.setColor(Color.BLACK);
        //抗鋸齒
        mPaint.setAntiAlias(true);

        //獲取控件的寬高
        int width = getWidth();
        int height = getHeight();
        //設(shè)置半徑
        int raius = width/4;
        //畫圓
        canvas.drawCircle(width/2,height/2, raius, mPaint);
    }

}

然后再activity_main.xml中添加:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.user.test11.HelloView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

這樣就可以了,代碼里有注釋,不再過多解釋.

編譯后的效果:
image.png
運(yùn)行的效果:
image.png

好丑,下面讓我們來畫個(gè)太極圖吧.O(∩_∩)O

小練習(xí)(太極圖源碼)

HelloView.java文件:

package com.example.user.test11;

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

public class HelloView extends View{

    public HelloView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        // 設(shè)置畫筆
        Paint mPaint = new Paint();
        // 設(shè)定畫筆顏色
        mPaint.setColor(Color.BLACK);
        //抗鋸齒
        mPaint.setAntiAlias(true);

        //獲取控件的寬高
        int width = getWidth();
        int height = getHeight();

        //設(shè)置半徑
        int raius = width/4;

        // 設(shè)定畫筆填充類型(不填充)
        mPaint.setStyle(Paint.Style.STROKE);

        //繪制圓
        canvas.drawCircle(width/2, height/2, raius, mPaint);
        // 設(shè)定畫弧區(qū)域
        float left = width/2 - raius;
        float top = height/2 - raius;
        float right = width/2 + raius;
        float bottom = height/2 + raius;


        // 設(shè)定畫筆填充類型(填充)
        mPaint.setStyle(Paint.Style.FILL);

        //繪制一個(gè)黑色的半圓(下半圓)
        canvas.drawArc(left, top, right, bottom, 0, 180, true, mPaint);

        //繪制圓(黑色區(qū)域的頭)
        canvas.drawCircle(width/2 - raius/2, height/2, raius/2, mPaint);

        // 設(shè)定畫筆顏色
        mPaint.setColor(Color.WHITE);

        //繪制圓(白色區(qū)域的頭)
        canvas.drawCircle(width/2 + raius/2, height/2, raius/2, mPaint);

        //繪制圓(白色眼睛)
        canvas.drawCircle(width/2 - raius/2, height/2, raius/10, mPaint);

        // 設(shè)定畫筆顏色
        mPaint.setColor(Color.BLACK);

        //繪制圓(黑色眼睛)
        canvas.drawCircle(width/2 + raius/2, height/2, raius/10, mPaint);
    }

}

activity_main.xml文件沒有變化:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.user.test11.HelloView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

配置效果:


image.png

運(yùn)行結(jié)果:

image.png

參考

Android開發(fā)中三個(gè)繪圖工具(Paint,Canvas,Path)的基本用法(總結(jié))
Android繪圖(2D繪圖、3D繪圖)
Android 自定義View之繪圖
Android開發(fā)--圖形圖像與動(dòng)畫(一)--Paint和Canvas類

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容