2012年4月20日 星期五

方法,關於自定義view中的畫面裁切與陰影效果。

之前分享了有關Paint的內容,這次來做一個比較進階的方法,
主要是實現陰影和不規則裁切的方法。

其中修改了我們之前在這裡所用到的類別(ColorCard)。

陰影的部份是由Paint實現的,一開始想的很複雜,以為要蓋一層漸層的圓形在下面,後來發現不用,直接調用.setShadowLayer()方法就可以了,其中參數如下,參考

  1. radius :陰影的半徑。
  2. dx :x方向偏移量。
  3. dy :y方向偏移量。
  4. color :陰影的顏色。
說起來超級方便的。

然後比較麻煩的是不規則裁切,用的是Canvas類別中的.clipPath()方法。還有其他的裁切方法,有機會可以再試試看。

在裁切的方法之中,需要輸入一個參數為Region.Op類別的屬性,因為其中並沒有特別的說明,我們做了點擊事件可以參考效果。

畫面如下:






代碼如下:


package colorTest.susan.idea;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.RadialGradient;
import android.graphics.Region;
import android.graphics.Shader;
import android.view.MotionEvent;
import android.view.View;

/** 作為色卡顯示用途 */
public class ColorCard extends View {

    int alpha = 130;
    float strokeWidth = 7;

    int opMode = 0;
    Region.Op[] ops = new Region.Op[] { Region.Op.DIFFERENCE,
            Region.Op.INTERSECT, Region.Op.REPLACE,
            Region.Op.REVERSE_DIFFERENCE, Region.Op.UNION, Region.Op.XOR };

    

    public ColorCard(Context context) {
        super(context);

        this.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                opMode++;
                if (opMode > 100) {
                    opMode = 0;
                }
                invalidate();
            }
        });
    

    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLUE);// 填滿畫布
        int TextSize = 20;
        Paint paint = getNewPaint(Color.argb(alpha, 255, 255, 255), TextSize,
                Style.FILL, strokeWidth, false);
        
        int radius = 220;//
        canvas.drawCircle(
                getWidth() / 2,
                getHeight() / 2,
                radius / 2,
                getNewPaint(Color.GREEN, TextSize, Style.FILL, strokeWidth,
                        true));
        Path path = new Path();
        path.moveTo(0, 0);
        path.addCircle(getWidth() / 2, getHeight() / 2, radius / 2,
                Direction.CCW);
        path.close();
        // 什麼解釋都沒有的文檔:
        // http://developer.android.com/reference/android/graphics/Region.Op.html
        // canvas.clipPath(path, Region.Op.INTERSECT);// 做一個裁切的動作。
        canvas.clipPath(path, ops[opMode % ops.length]);// 做一個裁切的動作。
        
        canvas.drawLine(
                this.getLeft(),
                this.getTop(),
                this.getRight(),
                this.getBottom(),
                getNewPaint(Color.argb(alpha, 255, 255, 255), TextSize,
                        Style.FILL, strokeWidth, false));
        canvas.drawCircle(
                getWidth() / 2 - 30,
                getHeight() / 2 - 30,
                radius / 2,
                getNewPaint(Color.argb(alpha, 255, 255, 255), TextSize,
                        Style.FILL, strokeWidth, false));
        canvas.restore();// 把之前矩陣、剪輯的狀態都刪除

        String string = "測試!目前為 Region.Op."
                + ops[opMode % ops.length].toString();
        canvas.drawText(string, this.getLeft(), this.getTop() + TextSize, paint);
    }

    /** 設定畫筆內容 */
    private Paint getNewPaint(int paintColor, float TextSize,
            Paint.Style style, float strokeWidth, boolean isShadow) {
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(style);
        paint.setStrokeWidth(strokeWidth);// 加粗
        // http://developer.android.com/reference/android/graphics/Shader.html
        // paint.setShader(new Shader());
        if (isShadow) {
            paint.setShadowLayer(10.0f, 5.0f, 5.0f, Color.BLACK);
        }
        paint.setColor(paintColor);
        if (TextSize > 0) {
            paint.setTextSize(TextSize);
        }
        return paint;
    }
}





沒有留言:

張貼留言

你好,我是小書,如果文章內容有錯誤,或是看到有建議以及任何感想時,歡迎提出分享,我們一起學習一起努力。

追蹤者