Paint高級應用
1.概念
畫筆,保存了繪制幾何圖形,文本和維度的樣式和顏色信息
2.常用API
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.RED);//設置顏色
mPaint.setARGB(255, 255, 255, 0);//設置Paint對象顏色,范圍為0-255
mPaint.setAlpha(200);//設置alpha不透明度,范圍為0-255
mPaint.setAntiAlias(true);//抗鋸齒
mPaint.setStyle(Paint.Style.STROKE);//描邊效果;
mPaint.setStrokeWidth(3);//描邊寬度
mPaint.setStrokeJoin(Paint.Join.MITER);//拐角風格
mPaint.setStrokeCap(Paint.Cap.ROUND);//圓角效果
mPaint.setShader(new SweepGradient(200, 200, Color.BLUE, Color.BLACK));//設置環(huán)形渲染器
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN));//設置圖層混合模式
mPaint.setColorFilter(new LightingColorFilter(0x00ffff, 0x00000));//設置顏色過濾器
mPaint.setFilterBitmap(true);//設置雙線性過濾
mPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.INNER));//設置畫筆遮罩濾鏡,傳入度數(shù)和樣式
mPaint.setTextScaleX(2);//設置文本縮放倍數(shù)
mPaint.setTextSize(23);//設置字體大小
mPaint.setTextAlign(Paint.Align.CENTER);//設置文本對齊方式
mPaint.setUnderlineText(true);//設置下劃線
String str = "Android開發(fā)";
mPaint = new Paint();
Rect rect = new Rect();
mPaint.getTextBounds(str, 0, str.length(), rect);//測試文本大小,將文本大小信息放在rect中
mPaint.measureText(str);//獲取文本的寬
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();//獲取字體度量對象
float ascent = fontMetrics.ascent;
Log.e(TAG, "ascent: "+ascent+"---"+
"bottom: "+fontMetrics.bottom+"---"+
"descent: "+fontMetrics.descent+"---" +
"leading: "+fontMetrics.leading+"---" +
"top: "+fontMetrics.top+"---" );
}
以上這些是常用API,部分API的詳細記錄一下
(1)mPaint.setStyle(Paint.Style.STROKE);//描邊效果;
這個主要有這幾種效果 下圖,,
STROKE :就是下圖圓環(huán)的效果同時通過mPaint.setStrokeWidth(20)可以設置圓環(huán)的寬度;
FILL:就是中間那個圓效果實心圓;
FILL_AND_STROKE:這個看名稱就懂了,就是這兩個的合體吧所以和FILL效果一樣
WechatIMG469.png
(2)setStrokeCap //圓角效果
ROUND
BUTT
SQUARE
圖片.png
(3)paint.setStrokeJoin(Paint.Join.MITER);
這個主要是用來設置拐角效果如下圖
/**
* The outer edges of a join meet at a sharp angle
*/
MITER (0),
/**
* The outer edges of a join meet in a circular arc.
*/
ROUND (1),
/**
* The outer edges of a join meet with a straight line
*/
BEVEL (2);
圖片.png
(4)setFilterBitmap(true)
設置了這個后為true后我們可以發(fā)現(xiàn)打了馬賽克樣式的圖片看著背景變虛化了
圖片.png
(5)mPaint.getFontMetrics();//獲取字體度量對象
String str = "Android開發(fā)";
mPaint = new Paint();
Rect rect = new Rect();
mPaint.getTextBounds(str, 0, str.length(), rect);//測試文本大小,將文本大小信息放在rect中
mPaint.measureText(str);//獲取文本的寬
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();//獲取字體度量對象
float ascent = fontMetrics.ascent;
Log.e(TAG, "ascent: "+ascent+"---"+
"bottom: "+fontMetrics.bottom+"---"+
"descent: "+fontMetrics.descent+"---" +
"leading: "+fontMetrics.leading+"---" +
"top: "+fontMetrics.top+"---" );
給大家來張圖
圖片.png
這個是我看網(wǎng)易Android課程老師講解放上去的圖,我順便截圖了,剛開始看著圖還是不太理解的,最后自己寫個demo打印了這幾個參數(shù)才明白的,如下:
圖片.png
通過以上如果我們需要計算字體的高度可以通過:ascent+descent=字體高度
Paint基本屬性就大概先了解這么多
3.Paint顏色相關(guān)
(1)setColor(int color)
(2)setARGB(int a,int r,int g,int b)
(3)setShader(Shader s)參數(shù)著色器對象,一般使用shader的幾個子類
下面就是shader的幾個子類詳解
①LinearGradient線性渲染
構(gòu)造方法:
mLinearGradient = new LinearGradient(0, 0, 500, 500, new int[]{Color.GREEN, Color.RED}, new float[]{0.5f, 1}, Shader.TileMode.CLAMP);
參數(shù)比較多
(x0,y0,x1,y1)前四個參數(shù)就是兩個端點的位置比如 (0,0) (500,500)就是屏幕左上角到(500,500)這個位置這兩個點之間的漸變過程 我們想象畫一個矩形或者圓形就明白了
int[] colors 漸變顏色值
float[] {0.5f,1} 表示顏色占據(jù)的渲染比例(可以為空)
效果圖
圖片.png
②RadialGradient環(huán)形渲染
/**
* Create a shader that draws a radial gradient given the center and radius.
*
* @param centerX 輻射中心的X坐標
* @param centerY 輻射中心的Y坐標
* @param radius 輻射半徑
* @param colors 輻射漸變顏色數(shù)組
* @param stops 輻射漸變位置數(shù)組
* @param tileMode 輻射范圍之外的著色模式 shader模式
* @param centerColor 中心點漸變顏色
* @param edgeColor 邊界漸變顏色
*/
mShader = new RadialGradient(250,250,250,
new int[]{Color.RED,Color.GREEN}, null,Shader.TileMode.CLAMP);
mPaint.setShader(mShader);
canvas.drawCircle(250, 250, 250, mPaint);
效果如下:
圖片.png
③掃描渲染
/**
* A Shader that draws a sweep gradient around a center point.
*
* @param cx The x-coordinate of the center 掃描中心x軸
* @param cy The y-coordinate of the center 掃描中心位置y軸
* @param color0 The color to use at the start of the sweep 掃描開始顏色
* @param color1 The color to use at the end of the sweep 掃描終止顏色
*/
mShader = new SweepGradient(250, 250, Color.RED, Color.GREEN);
mPaint.setShader(mShader);
canvas.drawCircle(250, 250, 250, mPaint);
效果圖:
圖片.png
④位圖渲染
原本是這樣一張圖
圖片.png
/**
* Call this to create a new shader that will draw with a bitmap.
*
* @param bitmap The bitmap to use inside the shader 這個不用說了吧
* @param tileX The tiling mode for x to draw the bitmap in. x軸方向的mode
* @param tileY The tiling mode for y to draw the bitmap in. y軸方向的mode
*/
mShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
mPaint.setShader(mShader);
canvas.drawRect(0, 0, 5000, 5000, mPaint);
添加位圖渲染后 挺好看的哈
圖片.png
我們可以通過切換不同的mode查看具體效果,這里就不做一一演示了
三種模式的的具體介紹
圖片.png
⑤組合渲染
Shader mShaderA = new SweepGradient(250, 250, Color.RED, Color.GREEN);
Shader mShaderB = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
/**
* Create a new compose shader, given shaders A, B, and a combining PorterDuff mode.
* When the mode is applied, it will be given the result from shader A as its
* "dst", and the result from shader B as its "src".
*
* @param shaderA
* @param shaderB
* @param mode 組合兩種shader的顏色模式
* @Parm Xfermode 組合兩種shader的顏色模式
* ComposeShader有兩種構(gòu)造方法 Xfermode后面說
*/
// mShader = new ComposeShader( Shader shaderA, Shader shaderB, Xfermode mode);
mShader = new ComposeShader(mShaderA, mShaderB, PorterDuff.Mode.ADD);
mPaint.setShader(mShader);
canvas.drawRect(0, 0, 5000, 5000, mPaint);
這里我就把上面的掃描渲染和位圖渲染組合在了一起 效果圖如下:
圖片.png
有點美圖的感覺吧哈哈
4.Paint濾鏡,Xfermode
后面再講.....這里還沒來得及看
