Android圖形處理-百變Paint
Android圖形處理-百變Paint
Paint的基本屬性
在 Android圖形處理-Canvas 已經有了基本的使用，但是這節介紹幾個好玩的屬性
設置陰影和漸變
設置漸變
主要是給畫筆（Paint）設置一個Shader
sp161108_143636
Paint paint = new Paint();
LinearGradient linearShader = new LinearGradient(0, 0, 100, 100,
new int[]{Color.RED, Color.BLACK, Color.BLUE, Color.DKGRAY},
null, Shader.TileMode.CLAMP);
paint.setShader(linearShader);
canvas.drawCircle(100,100,100,paint);
LinearGradient是Shader的子類。其他子類：
sp161108_142705
LinearGradient構造方法的含義：
/** Create a shader that draws a linear gradient along a line.
@param x0 The x-coordinate for the start of the gradient line
@param y0 The y-coordinate for the start of the gradient line
@param x1 The x-coordinate for the end of the gradient line
@param y1 The y-coordinate for the end of the gradient line
@param colors The colors to be distributed along the gradient line
@param positions May be null. The relative positions [0..1] of
each corresponding color in the colors array. If this is null,
the the colors are distributed evenly along the gradient line.
@param tile The Shader tiling mode
*/
前兩個參數是開始點，接下來是結束點，colors是顏色的數組，positions是分布的模式，tile是漸變的模式比如可重復等
設置陰影
paint.setShadowLayer(100,20,20,Color.RED);
paint.setColor(getResources().getColor(R.color.colorAccent));
canvas.drawCircle(100,100,50,paint);
核心是setShadowLayer
sp161108_144655
畫筆效果
PathEffect
sp161108_145217
這個表示畫筆的樣式的基類
-
CornerPathEffect
CornerPathEffect cornerPathEffect = new CornerPathEffect(40);
paint.setPathEffect(cornerPathEffect);
sp161108_145557
構造參數表示拐角的半徑
-
DiscretePathEffect
DiscretePathEffect discretePathEffect = new DiscretePathEffect(5.0f, 5.0f);
paint.setPathEffect(discretePathEffect);
第一個參數控制震動的頻率，第二個參數控制震動的幅度
sp161108_145913
-
DashPathEffect
DashPathEffect dashPathEffect = new DashPathEffect(new float[]{8.0f, 6.0f, 7.0f, 4.0f}, 0);
paint.setPathEffect(dashPathEffect);
第一個參數是每個破折線（dash）的隨機長度
sp161108_150434
-
PathDashPathEffect
Path path1 = new Path();
path1.addCircle(0,0,4, Path.Direction.CCW);
PathDashPathEffect pathDashPathEffect = new PathDashPathEffect(path1, 30, 0, PathDashPathEffect.Style.ROTATE);
paint.setPathEffect(pathDashPathEffect);</code></pre>
這也是虛線但是這個虛線段是可以自己設置形狀的
第一個參數是一個路徑，但是這個路徑要畫出一個形狀，第二個參數是兩個虛線之間的距離
sp161108_150946
畫出一個五角星，注意角度是18和36度：
Path path1 = new Path();
path1.moveTo(0, 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 200), 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100)-(float) Math.sin(Math.PI * 36 / 180) * 100,
100+(float) (Math.cos(Math.PI * 18 / 180) * 100));
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100),0);
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100)+(float) Math.sin(Math.PI * 36/ 180) * 100,
100+(float) (Math.cos(Math.PI * 18 / 180) * 100));
path1.lineTo(0, 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
sp161108_155132
在縮小之后把五角星應用到虛線中：
但是在等比例縮小10倍之后五角星沒有正確繪制，發生變形了：
sp161108_155337
-
ComposePathEffect
DiscretePathEffect discretePathEffect = new DiscretePathEffect(5.0f, 5.0f);
PathDashPathEffect pathDashPathEffect = new PathDashPathEffect(path1, 30, 0, PathDashPathEffect.Style.ROTATE);
ComposePathEffect composePathEffect = new ComposePathEffect(discretePathEffect, pathDashPathEffect);
paint.setPathEffect(composePathEffect);
創建一個組合的效果，是一個在外面一個在內側
sp161108_155657
-
SumPathEffect
SumPathEffect sumPathEffect = new SumPathEffect(discretePathEffect, pathDashPathEffect);
和上面的不同這是一個復合效果
sp161108_155941
區別很明顯，因為兩個都是相同的效果“疊加”得到的
光棍節快到了
參考 android制作閃動的紅心
sp161108_162225
int px = getMeasuredWidth() / 2;
int py = getMeasuredHeight() / 2;
// 路徑的起始點
path.moveTo(px, py - 5*5 );
// 根據心形函數畫圖
for (double i = 0; i <= 2 * Math.PI; i += 0.001) {
// 注意這里得到的xy不是真實的坐標要在進行減法
float x = (float) (16 * Math.sin(i) * Math.sin(i) * Math.sin(i));
float y = (float) (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
x *= 5;
y *= 5;
x = px - x;
y = py - y;
path.lineTo(x, y);
}
canvas.drawPath(path, paint);
DrawTextOnPath
注意在paint寫文字的時候setStyle方法依舊有效，設置 paint.setStyle(Paint.Style.STROKE) 就會產生空心字體的效果
sp161108_163150
注意在寫字之前一定先要移動面板然后在寫
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(100, 100);
path.lineTo(150, 190);
path.lineTo(400, 240);
canvas.drawPath(path,paint);
canvas.save();
canvas.translate(0, 50);
canvas.drawTextOnPath("你好",path, 10, 10, paint);
canvas.restore();
sp161108_163647
drawTextOnPath中兩個float參數負責調整字體和path的偏移量
設置Mask效果
面具效果的根類是MaskFilter，它兩個子類，也就是有兩個效果，一個是模糊一個是“突出化”
sp161108_163858
設置模糊效果
在上面的代碼中更改：
BlurMaskFilter blurMaskFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);
paint.setMaskFilter(blurMaskFilter);
sp161109_092018
第一個參數是模糊半徑第二個參數是模糊的樣式
設置突出化的效果
設置突出化就是可以在一個3D的場景中設置光源、光源的距離等從而造成效果：
EmbossMaskFilter embossMaskFilter = new EmbossMaskFilter(new float[]{1.5f, 1.5f, 1.5f}, 1f, 10, 6.2f);
來自：http://www.jianshu.com/p/be58a2f5687c