繪圖中的其他知識點(diǎn)總結(jié)

Draw

Canvas 可以繪制的對象:弧線(arcs)、填充顏色(argb和color)、圓(circle和oval)、Bitmap、點(diǎn)(point)、線(line)、矩形(Reat)、圖片(Picture)、圓形矩形(RoundRect)、文本(text)、頂點(diǎn)(Vertices)、路徑(path)。

Canvas不僅僅可以draw一些圖形、圖片,其本身也提供了可操作的方法:rorate(旋轉(zhuǎn))、scale(壓縮)、translate(平移)、skew(扭曲)等。

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);

 for (int i = 0; i < 360; i = i + 6) {
     canvas.save();
     canvas.rotate(i, 100, 100);
     canvas.drawLine(100, 0, 100, 10, new Paint());
     canvas.restore();
 }
}
效果

Matrix

canvas 類當(dāng)中drawBitmap(Bitmap bitmap,Matrix matrix,Paint paint)方法當(dāng)中有個參數(shù)是matrix類型,它是個3x3矩陣。Matrix在android中的主要作用是圖像變換、如平移、旋轉(zhuǎn)、縮放、扭曲等。
Matrix提供了Translate(平移)、Scale(縮放)、Rotate(旋轉(zhuǎn))、Skew(扭曲)四中變換操作,這4種操作實(shí)質(zhì)上都是調(diào)用了setValues方法來設(shè)置矩陣數(shù)組來達(dá)到效果。除translate外,scale、rotate、skew 都是圍繞一個中心點(diǎn)來進(jìn)行的,如果不指定,默認(rèn)情況下是圍繞(0,0)來進(jìn)行相應(yīng)的變換的。
Matrix提供的四種操作,每一種都有pre、set、post三種形式。原因是矩陣乘法不滿足乘法交換律,因此左乘還是右乘最終的效果都不一樣。我們可以把Matrix變換想象成一個隊(duì)列,隊(duì)列里面包含了若干個變換操作,隊(duì)列中每個操作按照先后順序操作變換目標(biāo)完成變換,pre相當(dāng)于向隊(duì)首增加一個操作,post相當(dāng)于向隊(duì)尾增加一個操作,set相當(dāng)于清空當(dāng)前隊(duì)列重新設(shè)置。
下面的例子和解釋很重要。
例1

//這段代碼只有translate(100, 100)生效,因?yàn)榈诙€set會把之前隊(duì)列中的操作清除。
Matrix m = new Matrix();
m.setRotate(100); 
m.setTranslate(100, 100);```
例2

//這段代碼先執(zhí)行translate(100, 100),后執(zhí)行rotate(100)
Matrix m = new Matrix();
m.setTranslate(100, 100);
m.postRotate(100);```
例3

//這段代碼先執(zhí)行rotate(100),后執(zhí)行translate(100, 100)
Matrix m = new Matrix();
m.setTranslate(100, 100);
m.preRotate(100);```
例4

//這段代碼的執(zhí)行順序:translate(100f, 100f) -> scale(2f, 2f) -> scale(0.5f, 0.5f) -> translate(50f, 50f)
Matrix m = new Matrix();
m.preScale(2f, 2f);
m.preTranslate(100f, 100f);
m.postScale(0.5f, 0.5f);
m.postTranslate(50f, 50f);```
例5

//這段代碼的執(zhí)行順序:translate(50f, 50f) -> scale(0.8f, 0.8f) -> scale(3f, 3f)
Matrix m = new Matrix();
m.postTranslate(100, 100);   
m.preScale(0.5f, 0.5f);
m.setScale(0.8f, 0.8f);   
m.postScale(3f, 3f);
m.preTranslate(50f, 50f);```
Matrix 映射方法
Matrix提供了mapPoints(),mapRects(),mapVectors()等映射方法,用來獲取經(jīng)Matrix映射后的值。

//這段代碼的作用是獲取經(jīng)過平移后該bitmap四個點(diǎn)的坐標(biāo)
Matrix m = new Matrix();
m.postTranslate(100f, 100f);

float[] src = {
0, 0,
0, bitmap.getHeight(),
bitmap.getWidth(), 0,
bitmap.getWidth(), bitmap.getHeight()
};
float[] dst = new float[8];

m.mapPoints(dst, src);


### Xfermode
XferMode主要是將2張圖片合在一起,由用戶自己決定是選中圖片重疊的部分還是非重疊的部分,可以參考Android官方提供的圖片,圖中 圓為Dst,正方形為Src
![](http://upload-images.jianshu.io/upload_images/2154124-796ead1b6739ea1b?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Xfermode的類型有16種:
private static final Xfermode[] sModes = {
new PorterDuffXfermode(PorterDuff.Mode.CLEAR),
new PorterDuffXfermode(PorterDuff.Mode.SRC),
new PorterDuffXfermode(PorterDuff.Mode.DST),
new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER),
new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),
new PorterDuffXfermode(PorterDuff.Mode.SRC_IN),
new PorterDuffXfermode(PorterDuff.Mode.DST_IN),
new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT),
new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),
new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP),
new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),
new PorterDuffXfermode(PorterDuff.Mode.XOR),
new PorterDuffXfermode(PorterDuff.Mode.DARKEN),
new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN),
new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),
new PorterDuffXfermode(PorterDuff.Mode.SCREEN)
};

如果我們想要實(shí)現(xiàn)一個圓心圖像的話可以使用圖中dstin的方式,即在我們的原圖上面再畫一個實(shí)心圓形圖。首先我們需要生成iyge圓形的bitmap:

private Bitmap mCircleBitmap;

//生成一個實(shí)心圓形Bitmap,這個Bitmap寬高要與當(dāng)前的View的寬高相同
private Bitmap getCircleBitmap() {
    if (mCircleBitmap == null) {
        mCircleBitmap = Bitmap.createBitmap(2 * mRadius, 2 * mRadius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(mCircleBitmap);

        mPaint.reset();
        mPaint.setStyle(Style.FILL);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
    }
    return mCircleBitmap;

}

在將這個圓形圖片蓋在原圖上面

//將兩張圖片以XferMode(DST_IN)的方式組合到一張照片中
private Bitmap combineBitmap(Drawable drawable, Bitmap maskBitmap) {
int width = drawable.getIntrinsicWidth();
int height = drawable.getIntrinsicHeight();
// 將drawable轉(zhuǎn)bitmap
Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
//將圖片自動放縮到View的寬高,即2倍的半徑
drawable.setBounds(0, 0, mRadius2, mRadius2);
drawable.draw(canvas);

    // 先將XferMode設(shè)置好,然后將蓋在上面的bitmap繪制出來
    mPaint.reset();
    mPaint.setXfermode(xfermode);
    canvas.drawBitmap(maskBitmap, 0, 0, mPaint);
    mPaint.setXfermode(null);

    return bitmap;
}

//然后將組合得到的bitmaptoin通過canvas繪制到界面上
@Override
protected void onDraw(Canvas canvas) {
//獲取設(shè)置的src圖片
Drawable drawable = getDrawable();
//獲取蓋在src上面的實(shí)心圓形Bitmap
Bitmap circleBitmap = getCircleBitmap();

    //兩張圖片以XferMode(DST_IN)的方式組合
    Bitmap bitmap = combineBitmap(drawable, circleBitmap);

    //將最終的bitmap畫到畫板上面
    canvas.drawBitmap(bitmap, 0, 0, mPaint);

}
完整的類代碼

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Xfermode;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class XfermodeCircleImage extends ImageView {
private int mRadius;
private Paint mPaint;
private Xfermode xfermode;
private Bitmap mCircleBitmap;

public XfermodeCircleImage(Context context) {
    super(context);
    init();
}

public XfermodeCircleImage(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    mPaint = new Paint();
    xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();

    if (width > height) {
        mRadius = height / 2;
    } else {
        mRadius = width / 2;
    }

    setMeasuredDimension(mRadius * 2, mRadius * 2);
}

//生成一個實(shí)心圓形Bitmap,這個Bitmap寬高要與當(dāng)前的View的寬高相同
private Bitmap getCircleBitmap() {
    if (mCircleBitmap == null) {
        mCircleBitmap = Bitmap.createBitmap(2 * mRadius, 2 * mRadius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(mCircleBitmap);

        mPaint.reset();
        mPaint.setStyle(Style.FILL);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
    }
    return mCircleBitmap;
}

//將兩張圖片以XferMode(DST_IN)的方式組合到一張照片中
private Bitmap combineBitmap(Drawable drawable, Bitmap maskBitmap) {
    int width = drawable.getIntrinsicWidth();
    int height = drawable.getIntrinsicHeight();
    // 將drawable轉(zhuǎn)bitmap
    Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    //將圖片自動放縮到View的寬高,即2倍的半徑
    drawable.setBounds(0, 0, mRadius*2, mRadius*2);
    drawable.draw(canvas);

    // 先將XferMode設(shè)置好,然后將蓋在上面的bitmap繪制出來
    mPaint.reset();
    mPaint.setXfermode(xfermode);
    canvas.drawBitmap(maskBitmap, 0, 0, mPaint);
    mPaint.setXfermode(null);

    return bitmap;
}

@Override
protected void onDraw(Canvas canvas) {
    //獲取設(shè)置的src圖片
    Drawable drawable = getDrawable();
    //獲取蓋在src上面的實(shí)心圓形Bitmap
    Bitmap circleBitmap = getCircleBitmap();

    //兩張圖片以XferMode(DST_IN)的方式組合
    Bitmap bitmap = combineBitmap(drawable, circleBitmap);

    //將最終的bitmap畫到畫板上面
    canvas.drawBitmap(bitmap, 0, 0, mPaint);

}

}

這樣就可以將一個方形的圖片,變成圓形了。

### BitmapShader

BitmapShader是Shader的子類,可以通過Paint.setShader(Shader shader)進(jìn)行設(shè)置、,BitmapShader有啥作用呢,它可以根據(jù)你設(shè)置的方式(下面介紹)將圖片鋪滿你所選的區(qū)域,有哪幾種方式“鋪”呢?有以下幾種:
(1)CLAMP:拉伸,在x方向上是圖片的最后一列像素重復(fù)平鋪,而y方向是最后一行往下拉伸(當(dāng)bitmap比要繪制的圖形小時(shí)拉伸位圖的最后一個像素;當(dāng)bitmap比要繪制的圖形大時(shí),根據(jù)繪制圖形剪裁bitmap )
(2)REPEAT: 重復(fù),很容易理解,圖片重復(fù)平鋪過去(當(dāng)繪畫的區(qū)域比圖片本身要大時(shí)會重復(fù),從設(shè)置的x或者y軸方向復(fù)制bitmap)
(3)MIRROR:鏡像,就是將圖片翻轉(zhuǎn)。
CLAMP的方式:![](http://upload-images.jianshu.io/upload_images/2154124-401f6c0f76db8d57?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
REPEAT方式:![](http://upload-images.jianshu.io/upload_images/2154124-10d19cc1356a10be?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
MIRROR方式:![](http://upload-images.jianshu.io/upload_images/2154124-e469691be7d7e470?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

使用BitmapShader制作圓形圖片的方法非常簡單,只需通過Bitmap構(gòu)造出一個BitmapShader,并將這個BitmapShader設(shè)置到當(dāng)前的Paint當(dāng)中,用這個Paint繪制一個圓就可以了

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class ShaderCircleImage extends ImageView {

private int mRadius;
private Paint mPaint;

public ShaderCircleImage(Context context) {
    super(context);
    init();
}

public ShaderCircleImage(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    mPaint = new Paint();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();

    if (width > height) {
        mRadius = height / 2;
    } else {
        mRadius = width / 2;
    }

    setMeasuredDimension(mRadius * 2, 2 * mRadius);
}

private Bitmap drawableToBitmap(Drawable drawable) {
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
    } else {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, mRadius*2, mRadius*2);
        drawable.draw(canvas);
        return bitmap;
    }
}

@Override
protected void onDraw(Canvas canvas) {
    // 將Drawable轉(zhuǎn)為Bitmap
    Bitmap bmp = drawableToBitmap(getDrawable());
    // 通過Bitmap和指定x,y方向的平鋪方式構(gòu)造出BitmapShader對象
    BitmapShader mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP,
            TileMode.CLAMP);
    // 將BitmapShader設(shè)置到當(dāng)前的Paint對象中
    mPaint.setShader(mBitmapShader);
    // 繪制出一個圓
    canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

}

}

之前我的文章當(dāng)中介紹的一個圓形圖像也就是用這種方式實(shí)現(xiàn)的[CircleImageView](http://www.itdecent.cn/p/ef6c5b871db5)
### ClipPath
ClipPath 也可以用來繪制圓形

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class ClipCircleImage extends ImageView {
private int mRadius;
private Paint mPaint;

public ClipCircleImage(Context context) {
    super(context);
    init();
}

public ClipCircleImage(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    mPaint = new Paint();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();

    if (width > height) {
        mRadius = height / 2;
    } else {
        mRadius = width / 2;
    }

    setMeasuredDimension(mRadius * 2, 2 * mRadius);
}

private Bitmap drawableToBitmap(Drawable drawable) {
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
    } else {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, mRadius*2, mRadius*2);
        drawable.draw(canvas);
        return bitmap;
    }
}

@Override
protected void onDraw(Canvas canvas) {
    // 將Drawable轉(zhuǎn)為Bitmap
    Bitmap bmp = drawableToBitmap(getDrawable());
    Path path = new Path(); 
    //按照逆時(shí)針方向添加一個圓
    path.addCircle(mRadius, mRadius, mRadius, Direction.CCW);
    //先將canvas保存
    canvas.save();
    //設(shè)置為在圓形區(qū)域內(nèi)繪制
    canvas.clipPath(path);
    //繪制Bitmap
    canvas.drawBitmap(bmp, 0, 0, mPaint);
    //恢復(fù)Canvas
    canvas.restore();
}

}

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

相關(guān)閱讀更多精彩內(nèi)容

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