請(qǐng)尊重原創(chuàng)豌汇，轉(zhuǎn)載請(qǐng)注明出處【tianyl】的博客
關(guān)于的Android之玩轉(zhuǎn)View目錄
1 前言
上一篇Paint的基礎(chǔ)api介紹了Android中Paint這個(gè)類(lèi)的一些比較常用的api赖欣，不過(guò)光說(shuō)不練怎么行呢捺癞，這篇就結(jié)合之前介紹的api，來(lái)秀一秀可以實(shí)現(xiàn)的各種炫酷特效，話不多說(shuō)，開(kāi)工
2 Shader
要使用Paint實(shí)現(xiàn)一些高級(jí)特效蜕乡，那么就少不了一個(gè)關(guān)鍵的類(lèi)Shader
2.1 介紹
Shader在Android中又被稱(chēng)為著色器，字面意思就是用來(lái)上色的梗夸，它有很多的實(shí)現(xiàn)類(lèi)BitmapShader层玲，ComposeShader，LinearGradient反症，SweepGradient辛块，RadialGradient，下面我們從簡(jiǎn)單到復(fù)雜一個(gè)一個(gè)的介紹這些類(lèi)
2.1.1 BitmapShader
BitmapShader叫做位圖圖像渲染铅碍，用bitmap對(duì)繪制的圖形進(jìn)行渲染著色润绵，簡(jiǎn)單來(lái)說(shuō)是用圖片對(duì)圖形進(jìn)行填充
- 使用方法如下
//這里的mBitMap是我們準(zhǔn)備繪制的圖片
BitmapShader bitMapShader = new BitmapShader(mBitMap, Shader.TileMode.MIRROR,
Shader.TileMode.MIRROR);
//設(shè)置shader
mPaint.setShader(bitMapShader);
//抗鋸齒
mPaint.setAntiAlias(true);
//隨意繪制一個(gè)范圍的圖像，mWidth和mHeight是mBitMap的寬高
canvas.drawRect(0, 0, mWidth*2, mHeight*2, mPaint);
上面代碼就是一個(gè)BitmapShader使用的實(shí)例代碼胞谈，方法一般寫(xiě)在onDraw方法中尘盼，通過(guò)繼承View實(shí)現(xiàn)自定義的效果
-
原圖如下
-
效果如下
在BitmapShader的構(gòu)造方法中，有幾個(gè)參數(shù)
- TileMode.CLAMP 拉伸最后一個(gè)像素去鋪滿剩下的地方
- TileMode.MIRROR 通過(guò)鏡像翻轉(zhuǎn)鋪滿剩下的地方
- TileMode.REPEAT 重復(fù)圖片平鋪整個(gè)畫(huà)面
public BitmapShader(
@NonNull Bitmap bitmap,
@NonNull TileMode tileX,
@NonNull TileMode tileY
)
第一個(gè)參數(shù)是需要繪制的bitmap烦绳，第二個(gè)參數(shù)是x軸方向的效果卿捎，第三個(gè)參數(shù)是y軸方向的效果
上圖就是使用TileMode.MIRROR進(jìn)行實(shí)現(xiàn)的，的使用它可以實(shí)現(xiàn)鏡像的效果径密，當(dāng)然如果加上漸變的透明度午阵，就是一個(gè)很好看的水面倒影了
一個(gè)例子
說(shuō)到BitmapShader，那么再說(shuō)說(shuō)一個(gè)很常見(jiàn)的功能——圓形圖像/橢圓形圖像
//使用需要繪制的mBitMap構(gòu)造一個(gè)BitmapShader
BitmapShader bitMapShader = new BitmapShader(mBitMap, 0,0);
//構(gòu)造一個(gè)ShapeDrawable享扔，OvalShape是橢圓形
ShapeDrawable shapeDrawble = new ShapeDrawable(new OvalShape());
//將bitMapShader設(shè)置給ShapeDrawable
shapeDrawble.getPaint().setShader(bitMapShader);
//設(shè)置編輯底桂，圓形就是這個(gè)矩形邊界的內(nèi)切圓，如果是正方形伪很，那么就是圓形戚啥，反之則是橢圓
shapeDrawble.setBounds(0,0,mWidth,mWidth);
//繪制
shapeDrawble.draw(canvas);
我們知道圓形圖像可以在xml中用shape實(shí)現(xiàn)，那么如何在代碼中實(shí)現(xiàn)shape呢锉试，答案就是ShapeDrawable
當(dāng)然，這里我們不說(shuō)ShapeDrawable览濒，我們說(shuō)用ShapeDrawable搭配BitmapShader實(shí)現(xiàn)的圓形頭像
效果如下
2.1.2 LinearGradient
LinearGradient叫做線性渲染呆盖，常見(jiàn)的霓虹燈文字，倒影圖片就是使用它進(jìn)行實(shí)現(xiàn)的
線性漸變也是一個(gè)用得比較多的漸變贷笛，比較多的用法是顏色的漸變和透明度的漸變
構(gòu)造方法如下
int[] mColors = {Color.RED,Color.YELLOW,Color.GREEN,Color.BLUE}
LinearGradient linearGradient =
new LinearGradient(0, 0, 400, 400, mColors, null, Shader.TileMode.MIRROR);
mPaint.setShader(linearGradient);
canvas.drawRect(0, 0, 800, 800, mPaint)
- 前4個(gè)參數(shù)分別是 x0, y0, x1, y1 表示x軸起點(diǎn)应又，y軸起點(diǎn)，x軸終點(diǎn)乏苦，y軸終點(diǎn)
- mColors是一個(gè)color數(shù)組株扛，表示漸變的顏色尤筐，我這里分別是紅，黃洞就，綠盆繁，藍(lán)
- 第五個(gè)參數(shù)是一個(gè)float數(shù)組，表示每個(gè)顏色所對(duì)應(yīng)的位置旬蟋，也可以理解為每個(gè)顏色需要占總長(zhǎng)度的多少油昂，取值范圍是從0到1，如果每個(gè)顏色的長(zhǎng)度相同倾贰，即顏色均勻冕碟，則可以傳null
- 最后一個(gè)參數(shù)就是漸變模式了，和BitmapShader中一樣匆浙，這里還是使用鏡像模式（Shader.TileMode.MIRROR）
效果如下
上面說(shuō)過(guò)了安寺，線性漸變可以實(shí)現(xiàn)水面倒影效果，當(dāng)然首尼，還有透明度的漸變也是可以通過(guò)線性漸變實(shí)現(xiàn)的
SweepGradient
SweepGradient叫做掃描渲染（或者梯度渲染）我衬，就和它的名字一樣，用它可以實(shí)現(xiàn)掃描效果
SweepGradient mSweepGradient = new SweepGradient(400, 400, mColors, null);
mPaint.setShader(mSweepGradient);
canvas.drawCircle(400, 400, 400, mPaint)
mColors還是使用的線性漸變中的顏色
效果如下
它是一個(gè)順時(shí)針的漸變饰恕，如果我們旋轉(zhuǎn)這張圖挠羔，那就是一個(gè)簡(jiǎn)單的掃描效果了，這個(gè)比較簡(jiǎn)單埋嵌，看圖就懂破加，這里就不多說(shuō)了
RadialGradient
RadialGradient叫做環(huán)形渲染，用它可以實(shí)現(xiàn)水波紋效果
如下是一個(gè)簡(jiǎn)單的環(huán)形漸變效果
RadialGradient mRadialGradient =
new RadialGradient(400, 400, 100, mColors, null, Shader.TileMode.REPEAT);
mPaint.setShader(mRadialGradient);
canvas.drawCircle(400, 400, 400, mPaint)
構(gòu)造參數(shù)
- 前2個(gè)分別是圓心的x坐標(biāo)和y坐標(biāo)
- 第3個(gè)參數(shù)是漸變的半徑雹嗦，這里是100
- 第4個(gè)是顏色范舀，還是使用的線性漸變用過(guò)的顏色
- 第5個(gè)參數(shù)和之前線性漸變一樣，一個(gè)float數(shù)組了罪，類(lèi)似于權(quán)重的作用
- 最后一個(gè)參數(shù)是漸變模式锭环，這里是反復(fù)，即結(jié)束后重新開(kāi)始
效果如下
ComposeShader
ComposeShader叫做組合渲染泊藕，它是將上面的任意兩種漸變效果進(jìn)行組合辅辩，看它的構(gòu)造函數(shù)就可以明白
ComposeShader(Shader shaderA, Shader shaderB, int nativeMode)
前兩個(gè)參數(shù)分別是上面的任意兩種漸變效果，第三個(gè)參數(shù)是一個(gè)PorterDuff.Mode常量
PorterDuff.Mode的總結(jié)很多娃圆，暫時(shí)放后面玫锋，這里就不引申了
