Paint API之—— Shader(圖像渲染)
1.構(gòu)造方法詳解
1)BitmapShader(圖像渲染)
BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)
使用一張位圖作為紋理來對某一區(qū)域進(jìn)行填充,參數(shù)依次:
- bitmap:用來作為填充的位圖;
- tileX:X軸方向上位圖的銜接形式;
- tileY:Y軸方向上位圖的銜接形式;
而這個(gè)Shader.TileMode有三種:
- CLAMP就是如果渲染器超出原始邊界范圍,則會復(fù)制邊緣顏色對超出范圍的區(qū)域進(jìn)行著色
- REPEAT則是平鋪形式重復(fù)渲染
- MIRROR則是在橫向和縱向上以鏡像的方式重復(fù)渲染位圖。
2)ComposeShader(混合渲染)
ComposeShader(Shader shaderA, Shader shaderB, PorterDuff.Mode mode)
渲染效果的疊加,看到PorterDuff就知道什么了吧?比如將BitmapShader與LinearGradient的混合渲染 效果等。參數(shù)依次:
- shaderA:第一種渲染效果
- shaderB:第二種渲染效果
- mode:兩種渲染效果的疊加模式
3)LinearGradient(線性渲染)
LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);
實(shí)現(xiàn)某一區(qū)域內(nèi)顏色的線性漸變效果,參數(shù)依次是:
- x0:漸變的起始點(diǎn)x坐標(biāo)
- y0:漸變的起始點(diǎn)y坐標(biāo)
- x1:漸變的終點(diǎn)x坐標(biāo)
- y1:漸變的終點(diǎn)y坐標(biāo)
- colors:漸變的顏色數(shù)組
- positions:顏色數(shù)組的相對位置
- tile:平鋪方式
4)RadialGradient(環(huán)形渲染)
public RadialGradient (float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile);
實(shí)現(xiàn)某一區(qū)域內(nèi)顏色的環(huán)形漸變效果,參數(shù)依次是:
- x:環(huán)形的圓心x坐標(biāo)
- y:環(huán)形的圓心y坐標(biāo)
- radius:環(huán)形的半徑
- colors:環(huán)形漸變的顏色數(shù)組
- positions:指定顏色數(shù)組的相對位置
- tile:平鋪方式
5)SweepGradient(梯度渲染)
public SweepGradient (float cx, float cy, int[] colors, float[] positions)
掃描渲染,就是以某個(gè)點(diǎn)位中心旋轉(zhuǎn)一周所形成的效果!參數(shù)依次是:
- cx:掃描的中心x坐標(biāo)
- cy:掃描的中心y坐標(biāo)
- colors:梯度漸變的顏色數(shù)組
- positions:指定顏色數(shù)組的相對位置
可能從文字上我們可以簡單的知道下他們對應(yīng)的一個(gè)大概作用,但是我們還是寫個(gè)代碼來 驗(yàn)證下他們所起的作用,畢竟有碼(圖)有真相嗎~
2.使用代碼示例:
運(yùn)行效果圖:
實(shí)現(xiàn)代碼:
BitmapShaderView.java:
/** * Created by Jay on 2015/11/4 0030. */ public class BitmapShaderView extends View { private Bitmap mBitmap = null; private ShapeDrawable sDrawable = null; private Paint mPaint = null; private int bitW = 0, bitH = 0; //Bitmap寬高 private Shader mBitmapShader = null; //Bitmap渲染 private Shader mLinearGradient = null; //線性漸變渲染 private Shader mComposeShader = null; //混合渲染 private Shader mRadialGradient = null; //環(huán)形漸變渲染 private Shader mSweepGradient = null; //梯度渲染 public BitmapShaderView(Context context) { this(context, null); } public BitmapShaderView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public BitmapShaderView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } private void init() { mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_cat); bitW = mBitmap.getWidth(); bitH = mBitmap.getHeight(); mPaint = new Paint(); //創(chuàng)建BitmapShader mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR); //創(chuàng)建LinearGradient并設(shè)置漸變的顏色數(shù)組 mLinearGradient = new LinearGradient(0, 0, 100, 100, new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.WHITE}, null, Shader.TileMode.REPEAT); //混合渲染,這里使用了BitmapShader和LinearGradient進(jìn)行混合,可以試試其他~ mComposeShader = new ComposeShader(mBitmapShader, mLinearGradient, PorterDuff.Mode.DARKEN); //環(huán)形漸變渲染 mRadialGradient = new RadialGradient(50, 200, 50, new int[]{Color.GREEN, Color.RED, Color.BLUE, Color.WHITE}, null, Shader.TileMode.REPEAT); //梯度渲染 mSweepGradient = new SweepGradient(30, 30, new int[]{Color.GREEN, Color.RED, Color.BLUE, Color.WHITE}, null); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //將圖片裁剪為橢圓形 sDrawable = new ShapeDrawable(new OvalShape()); sDrawable.getPaint().setShader(mBitmapShader); sDrawable.setBounds(0, 0, bitW, bitH); sDrawable.draw(canvas); //繪制線性漸變的矩形 mPaint.setShader(mLinearGradient); canvas.drawRect(bitW, 0, bitW * 2, bitH, mPaint); //繪制混合渲染效果 mPaint.setShader(mComposeShader); canvas.drawRect(0, bitH, bitW , bitH * 2, mPaint); //繪制環(huán)形漸變 mPaint.setShader(mRadialGradient); canvas.drawCircle(bitW * 2.8f, bitH / 2, bitH / 2, mPaint); //繪制梯度漸變 mPaint.setShader(mSweepGradient); canvas.drawRect(bitW, bitH, bitW * 2, bitH * 2, mPaint); } }
就那么一百來行代碼,就不用解釋了吧,如果覺得有疑惑的,動(dòng)手試試~
3.本節(jié)代碼下載:
本節(jié)小結(jié):
本節(jié)給大家介紹了Paint的另一個(gè)API:Shader(圖像渲染),又讓我們的畫筆增添了一種選擇~ 如果你看到代碼有疑惑,不懂把代碼粘下,改改參數(shù),就懂了~ 好的,本節(jié)就到這里,謝謝~