Android View — Paint 詳解

在Android View 的概念中，Paint 如名字所代表的含義，是畫筆的意思。像我們平時畫圖一樣，Paint就是相當于筆，而Canvas就是紙，這里叫畫布。Paint 可以設置的多種屬性。

PaintCanvasView

定義一個最簡單的自定義View來展示Paint 的多種屬性。

重寫onDraw 方法，在onDrasw 方法中調用子類的onChildDraw 方法，
所有的子類都要事先抽象的onChildDraw 方法，在onChildDraw真正的繪制圖形
onSizeChanged 確定View的寬和高。作為繪制View的寬和高的依據。

public abstract class PaintCanvasView extends View {
    protected Paint mPaint = new Paint();
    protected int mWidth;
    protected int mHeigth;
    protected RectF mRectF;

    public PaintCanvasView(Context context) {
        super(context);
        mRectF = new RectF();
    }

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

    protected abstract void onChildDraw(Canvas canvas);

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeigth = h;

        mRectF.left = 0;
        mRectF.top = 0;
        mRectF.right = w;
        mRectF.bottom = h;
    }

繪制文字

Paint 最基本的功能就是繪制文字。基本屬性有:

setTextSize 設置文字的大小
setColor 設置文字的顏色
setTextScaleX 水平方向上的縮放
setTextSkewX 水平方向上的傾斜度
setTypeface(Typeface typeface) 設置字體

paint_text.png

    static public class TextPaintCanvasView extends PaintCanvasView{

        public TextPaintCanvasView(Context context) {
            super(context);
        }

        @Override
        protected void onChildDraw(Canvas canvas) {
            mPaint.setTextSize(mWidth/20);
            mPaint.setColor(Color.BLUE);
            mPaint.setTypeface(Typeface.SERIF);
            canvas.drawText("View Hello World", mWidth/10, mHeigth*1/4, mPaint);

            mPaint.setTextScaleX(2);
            canvas.drawText("View Hello World", mWidth/10, mHeigth*2/4, mPaint);

            mPaint.setTextScaleX(1);
            mPaint.setTextSkewX(-1);
            canvas.drawText("View Hello World", mWidth/10, mHeigth*3/4, mPaint);
        }
    }

setShadowLayer

繪制文字的陰影

/**
 * This draws a shadow layer below the main layer, with the specified
 * offset and color, and blur radius. If radius is 0, then the shadow
 * layer is removed.
 * <p>
 * Can be used to create a blurred shadow underneath text. Support for use
 * with other drawing operations is constrained to the software rendering
 * pipeline.
 * <p>
 * The alpha of the shadow will be the paint's alpha if the shadow color is
 * opaque, or the alpha from the shadow color if not.
 */
public void setShadowLayer(float radius, float dx, float dy, int shadowColor);

paint_shadowLayer.png

    public static class ShadowLayerPaintView extends PaintCanvasView {
        public ShadowLayerPaintView(Context context) {
            super(context);
        }

        @Override
        protected void onChildDraw(Canvas canvas) {
            mPaint.setTextSize(mWidth/10);
            mPaint.setColor(Color.BLUE);
            mPaint.setShadowLayer(20, 0, 20, Color.GREEN);
            canvas.drawText("View Hello World", mWidth/10, mHeigth/2, mPaint);
        }
    }

setStrokeWidth

設置描邊的寬度，在繪制線條，各種幾何圖形時使用。
需要配合設置 style is Stroke or StrokeAndFill

paint_StrokeWidth.png

    static public class LinePaintCanvasView extends PaintCanvasView{

        public LinePaintCanvasView(Context context) {
            super(context);
        }

        @Override
        protected void onChildDraw(Canvas canvas) {
            mPaint.setColor(Color.BLUE);
            mPaint.setStrokeWidth(10);
            canvas.drawLine(mWidth/10, mHeigth/2, mWidth - mWidth/10, mHeigth/2, mPaint);
        }
    }

Cap

Cap 表示表示畫筆在離開畫板時候留下的最后一點圖形，比如矩形，圓形等。有三種:

BUTT 正常模式
ROUND
SQUARE
默認是BUTT, 但是從圖上可以看出設置與不設置在長度上有一些差異。

paint_cap.png

 public enum Cap {
        BUTT    (0),
        ROUND   (1),
        SQUARE  (2);
    }

    static public class CapPaintCanvasView extends PaintCanvasView{

        @Override
        protected void onChildDraw(Canvas canvas) {

            mPaint.setColor(Color.DKGRAY);
            mPaint.setStrokeWidth(50);
            canvas.drawLine(mWidth/10, mHeigth/5, mWidth - mWidth/10, mHeigth/5, mPaint);

            mPaint.setStrokeCap(Paint.Cap.BUTT);
            canvas.drawLine(mWidth/10, mHeigth*2/5, mWidth - mWidth/10, mHeigth*2/5, mPaint);

            mPaint.setStrokeCap(Paint.Cap.ROUND);
            canvas.drawLine(mWidth/10, mHeigth*3/5, mWidth - mWidth/10, mHeigth*3/5, mPaint);

            mPaint.setStrokeCap(Paint.Cap.SQUARE);
            canvas.drawLine(mWidth/10, mHeigth*4/5, mWidth - mWidth/10, mHeigth*4/5, mPaint);
        }
    }

Jonin

Jonin 表示圖形連接處的樣式.有銳角，圓形，斜面三種。

    public enum Join {
        MITER   (0),
        ROUND   (1),
        BEVEL   (2);
    }

paint_join.png

static public class JoinPaintCanvasView extends PaintCanvasView{

        @Override
        protected void onChildDraw(Canvas canvas) {

            mPaint.setColor(Color.CYAN);
            mPaint.setStrokeWidth(50);
            mPaint.setStyle(Paint.Style.STROKE);

            Path  path = new Path();
            path.moveTo(mWidth/8, mHeigth/10);
            path.lineTo(mWidth/4, mHeigth - mHeigth/8);

            mPaint.setStrokeJoin(Paint.Join.MITER);
            path.lineTo(mWidth/2, mHeigth/8);
            canvas.drawPath(path, mPaint);

            mPaint.setStrokeJoin(Paint.Join.ROUND);
            path.lineTo(mWidth*3/4, mHeigth - mHeigth/8);
            canvas.drawPath(path, mPaint);

            mPaint.setStrokeJoin(Paint.Join.BEVEL);
            path.lineTo(mWidth*7/8, mHeigth/8);
            canvas.drawPath(path, mPaint);
        }
    }

Align

Align 用于在繪制文本時表示的對齊方式：

    public enum Align {
        LEFT    (0),
        CENTER  (1),
        RIGHT   (2);
    }

paint_align.png

    static public class AlignPaintCanvasView extends PaintCanvasView{

        @Override
        protected void onChildDraw(Canvas canvas) {

            mPaint.setTextSize(mWidth/10);
            mPaint.setColor(Color.BLUE);
            mPaint.setTextAlign(Paint.Align.LEFT);
            canvas.drawText("Align View", mWidth/2, mHeigth*1/4, mPaint);

            mPaint.setTextAlign(Paint.Align.CENTER);
            canvas.drawText("Align View", mWidth/2, mHeigth*2/4, mPaint);

            mPaint.setTextAlign(Paint.Align.RIGHT);
            canvas.drawText("Align View", mWidth/2, mHeigth*3/4, mPaint);
        }
    }

ColorFilter

ColorMatrixColorFilter

顏色ColorMatrix 是一個5*4的矩陣. 默認的ColorMatrix為：【
1, 0, 0, 0, 0, // R
0, 1, 0, 0, 0, // G
0, 0, 1, 0, 0, // B
0, 0, 0, 1, 0, // A
】

最后一列表示偏移。通過函數
public void setScale(float rScale, float gScale, float bScale,float aScale) 來控制各個顏色分量的比重。

paint_ColorMatrix.png

/**
 * 4x5 matrix for transforming the color and alpha components of a Bitmap.
 * The matrix can be passed as single array, and is treated as follows:
 *
 *  [ a, b, c, d, e,
 *    f, g, h, i, j,
 *    k, l, m, n, o,
 *    p, q, r, s, t ]
 *
 * When applied to a color [R, G, B, A] the resulting color
 * is computed as:
 *   R = a*R + b*G + c*B + d*A + e;
 *   G = f*R + g*G + h*B + i*A + j;
 *   B = k*R + l*G + m*B + n*A + o;
 *   A = p*R + q*G + r*B + s*A + t;
 *

    static public class ColorMatrixColorFilterView extends PaintCanvasView{

        @Override
        protected void onChildDraw(Canvas canvas) {

            ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                    1, 0, 0, 0, 0,
                    0, 1, 0, 0, 0,
                    0, 0, 1, 0, 0,
                    0, 0, 0, 1, 0,
            });

            int strokeWidth = 20;
            int min = Math.min(mWidth, mHeigth);
            int radius = min/3;

            mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
            mPaint.setColor(Color.argb(255, 255, 128, 103));
            canvas.drawCircle(mRectF.centerX(), mRectF.centerY(), min/2, mPaint);

            colorMatrix.setScale(0, 1f, 1f, 1f);
            mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
            canvas.drawCircle(mWidth/3/2,   mHeigth/2, radius - strokeWidth, mPaint);

            mPaint.setColor(Color.argb(255, 255, 128, 103));
            colorMatrix.setScale(1, 0f, 0f, 1f);
            mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
            canvas.drawCircle(mWidth*5/6, mHeigth/2, radius - strokeWidth, mPaint);
        }
    }

LightingColorFilter

LightingColorFilter 和 ColorMatrixColorFilter 道理上上一樣的，都是通過控制RGBA 的數值實現濾鏡的效果。在參數上有一些差異，ColorMatrixColorFilter 是分別操作顏色的各個通道。LightingColorFilter 則是直接傳入兩個RGBA的色彩參數。

paint_LightingColorFilter.png

/**
 *
 * Given a source color RGB, the resulting R'G'B' color is computed thusly:
 * R' = R * colorMultiply.R + colorAdd.R
 * G' = G * colorMultiply.G + colorAdd.G
 * B' = B * colorMultiply.B + colorAdd.B
 */

    static public class LightingColorFilterView extends PaintCanvasView{
        Context mContext;
        public LightingColorFilterView(Context context) {
            super(context);
            mContext = context;
            setLayerType(LAYER_TYPE_SOFTWARE, null);
        }

        @Override
        protected void onChildDraw(Canvas canvas) {
            Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.colorfilter);
            Rect srcRect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
            int min = Math.min(mWidth, mHeigth)/3;

            canvas.drawBitmap(bitmap, srcRect, new Rect(mWidth/2 - min, mHeigth/2 - min, mWidth/2 + min, mHeigth/2 + min), mPaint);
            mPaint.setColorFilter(new LightingColorFilter(0xFF00FFFF, 0x00FF0000));
            canvas.drawBitmap(bitmap, srcRect, new Rect(mWidth/6 - min, mHeigth/2 - min, mWidth/6 + min, mHeigth/2 + min), mPaint);
            mPaint.setColorFilter(new LightingColorFilter(0xFF00FFFF, 0x00000000));
            canvas.drawBitmap(bitmap, srcRect, new Rect(mWidth*5/6 - min, mHeigth/2 - min, mWidth*5/6 + min, mHeigth/2 + min), mPaint);
        }
    }

PorterDuffColorFilter

PorterDuffColorFilter 構造參數需要傳入兩個參數。第一個為顏色值，第二個為混合模式。
然后Paint 在draw Bitmap 的時候Bitmap 和顏色值按照第二個參數的進行混合。

paint_PorterDuffColorFilter.png

    static public class PorterDuffColorFilterView extends PaintCanvasView{
        Context mContext;

        public PorterDuffColorFilterView(Context context) {
            super(context);
            mContext = context;
            setLayerType(LAYER_TYPE_SOFTWARE, null);
        }

        @Override
        protected void onChildDraw(Canvas canvas) {
            Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.androidicon);
            Rect srcRect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
            int min = Math.min(mWidth, mHeigth)/3;

            canvas.drawBitmap(bitmap, srcRect, new Rect(mWidth/2 - min, mHeigth/2 - min, mWidth/2 + min, mHeigth/2 + min), mPaint);

            mPaint.setColorFilter(new PorterDuffColorFilter(Color.DKGRAY, PorterDuff.Mode.DST));
            canvas.drawBitmap(bitmap, srcRect, new Rect(mWidth/6 - min, mHeigth/2 - min, mWidth/6 + min, mHeigth/2 + min), mPaint);

            mPaint.setColorFilter(new PorterDuffColorFilter( Color.argb(255, 255, 128, 103), PorterDuff.Mode.SRC));
            canvas.drawBitmap(bitmap, srcRect, new Rect(mWidth*5/6 - min, mHeigth/2 - min, mWidth*5/6 + min, mHeigth/2 + min), mPaint);
        }
    }

MaskFilter

BlurMaskFilterView

BlurMaskFilter為模糊面罩，可以在圖形邊緣添加一些毛玻璃效果。
BlurMaskFilter 構造函數兩個參數，第一個參數為陰影的模糊半徑，第二個參數為模糊模式枚舉類型 Blur。

public BlurMaskFilter(float radius, Blur style)

這個API不支持硬件加速，需要設置：

setLayerType(LAYER_TYPE_SOFTWARE, null);

public enum Blur {
        /**
         * Blur inside and outside the original border.
         */
        NORMAL(0),
        
        /**
         * Draw solid inside the border, blur outside.
         */
        SOLID(1),

        /**
         * Draw nothing inside the border, blur outside.
         */
        OUTER(2),

        /**
         * Blur inside the border, draw nothing outside.
         */
        INNER(3);
        
        Blur(int value) {
            native_int = value;
        }
        final int native_int;
    }

paint_BlurMaskFilter.png

    static public class BlurMaskFilterView extends PaintCanvasView{

        @Override
        protected void onChildDraw(Canvas canvas) {

            int strokeWidth = 20;
            int min = Math.min(mWidth, mHeigth);
            int radius = mWidth/8;
            mPaint.setStrokeWidth(strokeWidth);
            mPaint.setColor(Color.RED);

            mPaint.setMaskFilter(new BlurMaskFilter(strokeWidth, BlurMaskFilter.Blur.NORMAL));
            canvas.drawCircle(mWidth/4/2,   mHeigth/2, radius - strokeWidth, mPaint);

            mPaint.setMaskFilter(new BlurMaskFilter(strokeWidth, BlurMaskFilter.Blur.SOLID));
            canvas.drawCircle(mWidth*3/4/2, mHeigth/2, radius - strokeWidth, mPaint);

            mPaint.setMaskFilter(new BlurMaskFilter(strokeWidth, BlurMaskFilter.Blur.OUTER));
            canvas.drawCircle(mWidth*5/4/2, mHeigth/2, radius - strokeWidth, mPaint);

            mPaint.setMaskFilter(new BlurMaskFilter(strokeWidth, BlurMaskFilter.Blur.INNER));
            canvas.drawCircle(mWidth*7/8, mHeigth/2, radius - strokeWidth, mPaint);
        }
    }

EmbossMaskFilterView

EmbossMaskFilter 用來設置浮雕效果，其原理是模擬光照效果，靠近光的一面顯得亮一點，遠離光的一面顯得暗一點，這樣就通過顏色的亮暗營造出浮雕的3D立體效果。
構造函數：

public EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius)

direction 是float數組，定義長度為3的數組[x,y,z]，來指定光源的方向
ambient 取值在0到1之間，定義背景光或者說是周圍光
specular 定義鏡面反射系數
blurRadius 模糊半徑

direction 代表光源的坐標系，可以這樣想想，如果所繪制的物體在原點，direction代表光源的左標，根據光源的位置不同，可以顯示不同的效果。如果Z軸為負，就是在物體的后邊，顯示要暗一些，如果在原點，就和物體重疊，顯示為黑色。顯示的效果還要和環(huán)境光ambient和鏡面反射specular有關系。環(huán)境光的強弱同樣會影響效果。鏡面反射specular的含義是根據我們學習的光的反射定律，理性情況下所有的光先都被反射回去，實際情況下光的反射要有一定的損失，鏡子算是鏡面反射比較強的例子。

這個API同樣不支持硬件加速，需要設置：

setLayerType(LAYER_TYPE_SOFTWARE, null);

paint_EmbossMaskFilter.png

    static public class EmbossMaskFilterView extends PaintCanvasView{

        @Override
        protected void onChildDraw(Canvas canvas) {

            int strokeWidth = 20;
            int radius = mWidth/8;
            mPaint.setStrokeWidth(strokeWidth);
            mPaint.setColor(Color.RED);

            mPaint.setMaskFilter(new EmbossMaskFilter(new float[] { 1, 1, 1F }, 0.1F, 8, 3));
            canvas.drawCircle(mWidth/3/2,   mHeigth/2, radius - strokeWidth, mPaint);

            mPaint.setMaskFilter(new EmbossMaskFilter(new float[] { 1, 1, -1F }, 0.1F, 8, 3));
            canvas.drawCircle(mWidth*3/3/2, mHeigth/2, radius - strokeWidth, mPaint);

            mPaint.setMaskFilter(new EmbossMaskFilter(new float[] { 0, 0, 1F }, 0.1F, 8, 3));
            canvas.drawCircle(mWidth*5/3/2, mHeigth/2, radius - strokeWidth, mPaint);
        }
    }

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Android View — Paint 詳解