天天看點

Android Api Demos登頂之路(七十七)Graphics-->FingerPaint

/*
 * 這個demon示範了如何在畫闆上自由繪制圖形,可以選擇繪制的顔色,可以設定線條的浮雕和毛邊效果
 * 可以擦除,還實作了一種圖像的整合模式。
 */
public class MainActivity extends Activity implements OnColorChangedListener {
    private Paint mPaint;
    // 設定筆刷的浮雕效果
    private MaskFilter mEmboss;
    // 設定筆刷的毛邊效果
    private MaskFilter mBlur;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor();
        mPaint.setStyle(Paint.Style.STROKE);
        // 設定結合處的樣式為圓角
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        // 設定畫筆的筆觸風格為圓形
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth();

        mEmboss = new EmbossMaskFilter(new float[] { , ,  }, f, , f);
        mBlur = new BlurMaskFilter(, BlurMaskFilter.Blur.NORMAL);
    }

    private class MyView extends View {
        private Path mPath;
        private Paint mBitmapPaint;
        private Bitmap mBitmap;
        private Canvas mCanvas;

        public MyView(Context context) {
            super(context);
            mPath = new Path();
            mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        }

        // 當視圖大小發生變化時重置畫布
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(mBitmap);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor();
            canvas.drawBitmap(mBitmap, , , mBitmapPaint);
            canvas.drawPath(mPath, mPaint);
        }

        float mx, my;
        // 定義移動的幅度
        private static final float TOUCH_TOLERANCE = ;

        private void touch_start(float x, float y) {
            mPath.reset();
            mPath.moveTo(x, y);
            mx = x;
            my = y;
        }

        private void touch_move(float x, float y) {
            float dx = Math.abs(x - mx);
            float dy = Math.abs(y - my);
            if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
                /*
                 * 該方法用于繪制一條貝塞爾曲線(圓滑的弧線)前兩個參數表示節點(控制點,用于控制
                 * 曲線的彎曲和弧度),後兩個參數表示結束點的坐标,線段的開始點則為Path最近
                 * moveto的地方。這裡将控制點與新坐标的中點作為結束點,下次再次調用該方法時
                 * 将新的坐标點作為控制點,控制點就位于起始點和結束點大約中央的位置。
                 */
                mPath.quadTo(mx, my, (mx + x) / , (my + y) / );
                mx = x;
                my = y;
            }
        }

        private void touch_up() {
            mPath.lineTo(mx, my);
            // 繪制路徑
            mCanvas.drawPath(mPath, mPaint);
            // 重置路徑
            mPath.reset();
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touch_start(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                touch_move(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                touch_up();
                invalidate();
                break;
            }
            return true;
        }
    }

    private static final int COLOR_MENU_ID = Menu.FIRST;
    private static final int EMBOSS_MENU_ID = Menu.FIRST + ;
    private static final int BLUR_MENU_ID = Menu.FIRST + ;
    private static final int ERASE_MENU_ID = Menu.FIRST + ;
    private static final int SRCATOP_MENU_ID = Menu.FIRST + ;

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        menu.add(, COLOR_MENU_ID, , "Color");
        menu.add(, EMBOSS_MENU_ID, , "Emboss");
        menu.add(, BLUR_MENU_ID, , "Blur");
        menu.add(, ERASE_MENU_ID, , "Erase");
        menu.add(, SRCATOP_MENU_ID, , "SrcTop");
        return true;
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        super.onPrepareOptionsMenu(menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        mPaint.setXfermode(null);
        mPaint.setAlpha();

        switch (item.getItemId()) {
        case COLOR_MENU_ID:
            new ColorPickerDialog(this, this, mPaint.getColor()).show();
            return true;
        case EMBOSS_MENU_ID:
            if(mPaint.getMaskFilter()!=mEmboss){
                mPaint.setMaskFilter(mEmboss);
            }else{
                mPaint.setMaskFilter(null);
            }
            return true;
        case BLUR_MENU_ID:
            if(mPaint.getMaskFilter()!=mBlur){
                mPaint.setMaskFilter(mBlur);
            }else{
                mPaint.setMaskFilter(null);
            }
            return true;
        case ERASE_MENU_ID:
            //設定整合模式
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            return true;
        case SRCATOP_MENU_ID:
            //該模式下隻顯示原圖和新繪制的圖形與原圖相交的部分
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
            mPaint.setAlpha();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void colorChanged(int color) {
        mPaint.setColor(color);
    }

}
           

ColorPickerDialog

/*
 * 定義一個顔色選擇器
 */
public class ColorPickerDialog extends Dialog {
    // 定義一個接口用于監聽顔色的變化
    public interface OnColorChangedListener {
        void colorChanged(int color);
    }

    private OnColorChangedListener mListener;
    // 定義初始顔色
    private int mInitialColor;

    // 定義對話框的界面視圖
    private class ColorPickerView extends View {
        // 定義畫外圓的畫筆
        private Paint mPaint;
        // 定義内圓的畫筆
        private Paint mCenterPaint;
        private int[] mColors;
        private OnColorChangedListener mColorChangedListener;

        public ColorPickerView(Context context, OnColorChangedListener l,
                int color) {
            super(context);
            // 在構造方法中初始化定義的各個類
            mColorChangedListener = l;
            mColors = new int[] { , , ,
                    , , ,  };

            // 以0,0為圓心進行掃描漸變,後面我們會将畫布移至圓心
            Shader s = new SweepGradient(, , mColors, null);
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setShader(s);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth();

            mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCenterPaint.setColor(color);
            mCenterPaint.setStrokeWidth();
        }

        // 用于判定是否在内圓的内部移動
        private boolean mTrackingCenter;
        // 用于判定是否高亮顯示内圓的描邊
        private boolean mHeightLightCenter;
        private static final int CENTER_X = ;
        private static final int CENTER_Y = ;
        private static final int CENTER_RADIUS = ;

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.BLACK);

            float r = CENTER_X - mPaint.getStrokeWidth() * f;
            // 移動畫布至圓心
            canvas.translate(CENTER_X, CENTER_Y);
            // 繪制一個寬度為32的圓環
            canvas.drawCircle(, , r, mPaint);
            // 以初始的顔色繪制内部小圓
            canvas.drawCircle(, , CENTER_RADIUS, mCenterPaint);
            // 如果按下時與螢幕的接觸點位于小圓的内部,則以相同的顔色為小圓描邊
            if (mTrackingCenter) {
                //int c=mCenterPaint.getColor();
                mCenterPaint.setStyle(Paint.Style.STROKE);
                if (mHeightLightCenter) {
                    // 如果高亮顯示則設定畫筆的透明度為完全不透明
                    mCenterPaint.setAlpha();
                } else {
                    // 如果不需要高亮顯示則降低透明度
                    mCenterPaint.setAlpha();
                }
                // 繪制描邊
                canvas.drawCircle(, , mCenterPaint.getStrokeWidth()
                        + CENTER_RADIUS, mCenterPaint);
                // 将畫筆的風格設定回填充模式
                mCenterPaint.setStyle(Paint.Style.FILL);
                //mCenterPaint.setColor(c);
            }
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            setMeasuredDimension(CENTER_X * , CENTER_Y * );
        }

        private static final float PI = f;

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x =  event.getX() -CENTER_X;
            float y =  event.getY() -CENTER_Y;
            // 判斷觸點是否在内圓的内部(通過觸點與圓間的距離不大于于内圓半徑)
            boolean inCenter = Math.sqrt(x * x + y * y) <= CENTER_RADIUS;

            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mTrackingCenter = inCenter;
                if (inCenter) {
                    mHeightLightCenter = true;
                    invalidate();
                    break;
                }
            case MotionEvent.ACTION_MOVE:
                if (mTrackingCenter) {
                    if (mHeightLightCenter != inCenter) {
                        mHeightLightCenter = inCenter;
                        invalidate();
                    }
                } else {
                    System.out.println("按下即使不動也會進入到這個方法!在這裡設定畫筆的顔色");
                    // 計算接觸點至圓心的連線與X方向夾角的弧度
                    float angle = (float) Math.atan2(y, x);
                    // angle的取值範圍為【-PI—,PI】,我們現在需要将該值轉化為0-1的數
                    float unit = angle / ( * PI);
                    if (unit < ) {
                        // 将-1/2——0部分的值轉化為1/2——1的值
                        unit += ;
                    }
                    mCenterPaint.setColor(interpColor(mColors, unit));
                    invalidate();
                }
                break;

            case MotionEvent.ACTION_UP:
                if (mTrackingCenter) {
                    if (inCenter) {
                        //如果按下和松開時觸點都位于小圓内部,則調用接口的方法,為接口的參數指派
                        mColorChangedListener.colorChanged(mCenterPaint.getColor());
                    }
                    mTrackingCenter=false;
                    invalidate();
                }
                break;
            }
            return true;
        }

        // 根據觸點的位置,計算目前位置的顔色值,根據內插補點計算法
        private int interpColor(int[] colors, float unit) {
            // 確定取得顔色的值
            if (unit < ) {
                return colors[];
            }
            if (unit >= ) {
                return colors[colors.length - ];
            }

            // 計算觸點映射到顔色數組中的相對位置
            float p = (colors.length - ) * unit;
            // 取出相對位置的整數部分
            int i = (int) p;
            // 取出相對位置的小數部分
            p -= i;

            // 計算顔色的值,利用內插補點計算法
            int c0 = colors[i];
            int c1 = colors[i + ];
            int a = ave(Color.alpha(c0), Color.alpha(c1), p);
            int r = ave(Color.red(c0), Color.red(c1), p);
            int g = ave(Color.green(c0), Color.green(c1), p);
            int b = ave(Color.blue(c0), Color.blue(c1), p);
            return Color.argb(a, r, g, b);
        }

        private int ave(int s, int d, float p) {
            return s + Math.round((d - s) * p);
        }
    }

    public ColorPickerDialog(Context context,OnColorChangedListener listener,int initialColor) {
        super(context);
        mListener=listener;
        mInitialColor=initialColor;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //實作接口
        OnColorChangedListener l=new OnColorChangedListener() {
            @Override
            public void colorChanged(int color) {
                //調用引用并建立該對話框的類中實作的該接口的方法
                mListener.colorChanged(color);
                dismiss();
            }
        };

        setContentView(new ColorPickerView(getContext(), l, mInitialColor));
        setTitle("Pick a Color");
    }

}
           

繼續閱讀