android中apidemos中的fingerpaint学习

本人刚刚接触android,然后想和大家一起讨论一下学习经验,不对的地方请大家指教!

这个截图什么的就不添加了,我自己主要在这个代码中加了一点注释,希望能帮助大家理解!

不过在这个效果中我也有一些不会的地方,在这里提出来,希望大家帮我解答一下!

问题如下:

    在使用橡皮擦擦除原有笔记的时候,橡皮的轨迹是黑色的,虽然却是能起到橡皮擦除的效果,但是觉得不好,不知道有没有哪位兄弟能够不吝解答!


这个是主要activity

import android.app.Activity;
import android.content.Context;
import android.graphics.*;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;

public class FingerPaintActivity extends Activity
        implements ColorPickerDialog.OnColorChangedListener {    

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

        mPaint = new Paint();//创建画笔渲染对象
        mPaint.setAntiAlias(true);//设置抗锯齿,让绘画比较平滑
        mPaint.setDither(true);//设置递色
        mPaint.setColor(0xFF0000FF);//设置画笔的颜色
        mPaint.setStyle(Paint.Style.STROKE);//画笔的类型有三种(1.FILL 2.FILL_AND_STROKE 3.STROKE )
        mPaint.setStrokeJoin(Paint.Join.ROUND);//默认类型是MITER(1.BEVEL 2.MITER 3.ROUND )
        mPaint.setStrokeCap(Paint.Cap.ROUND);//默认类型是BUTT(1.BUTT 2.ROUND 3.SQUARE )
        mPaint.setStrokeWidth(12);//设置描边的宽度,如果设置的值为0那么边是一条极细的线
        
        mEmboss = new EmbossMaskFilter(new float[] { 1, 1, 1 },//设置浮雕格式
                                       0.4f, 6, 3.5f);

        mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL);//设置模糊格式
    }
    
    private Paint       mPaint;	//用来话图形的画笔
    private MaskFilter  mEmboss;//浮雕格式
    private MaskFilter  mBlur;//模糊格式
    
    public void colorChanged(int color) {//实现ColorPickerDialog.OnColorChangedListener以改变画笔
        mPaint.setColor(color);
    }

    public class MyView extends View {
        
//        private static final float MINP = 0.25f;
//        private static final float MAXP = 0.75f;
        
        private Bitmap  mBitmap;
        private Canvas  mCanvas;
        private Path    mPath;
        private Paint   mBitmapPaint;
        
        public MyView(Context c) {
            super(c);
            
            mBitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);//绘制固定大小的bitmap对象,每个像素4个字节
            mCanvas = new Canvas(mBitmap);//将固定的bitmap对象嵌入到canvas对象中
            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);
        }
        
        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(0xFFAAAAAA);//Fill the entire canvas' bitmap
            
            canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);//use mBitmapPaint to draw mBitmap
            
            canvas.drawPath(mPath, mPaint);//use mPaint to draw mPath
        }
        
        private float mX, mY;
        private static final float TOUCH_TOLERANCE = 4;//绘图时当屏幕上手指触点移动距离超过4才有效
        
        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) {
                mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);//添加曲线,这一步我不太懂,为什么后一个点的坐标是移动的中点
                mX = x;
                mY = y;
            }
        }
        private void touch_up() {
            mPath.lineTo(mX, mY);//从最后一个指定的xy点绘制一条线,如果没有用moveTo方法,那么起始点表示(0,0)点。
            // commit the path to our offscreen
            mCanvas.drawPath(mPath, mPaint);//手指离开屏幕后,绘制创建的“所有”路径。
            // kill this so we don't double draw
            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();//刷新画布,重新运行onDraw()方法
                    break;
                case MotionEvent.ACTION_MOVE://手指按压屏幕时,位置的改变触发,这个方法在ACTION_DOWN和ACTION_UP之间。
                    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;//菜单上ID
    private static final int EMBOSS_MENU_ID = Menu.FIRST + 1;
    private static final int BLUR_MENU_ID = Menu.FIRST + 2;
    private static final int ERASE_MENU_ID = Menu.FIRST + 3;
    private static final int SRCATOP_MENU_ID = Menu.FIRST + 4;

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        
        menu.add(0, COLOR_MENU_ID, 0, "Color").setShortcut('3', 'c');//设置菜单并设定快捷键
        menu.add(0, EMBOSS_MENU_ID, 0, "Emboss").setShortcut('4', 's');
        menu.add(0, BLUR_MENU_ID, 0, "Blur").setShortcut('5', 'z');
        menu.add(0, ERASE_MENU_ID, 0, "Erase").setShortcut('5', 'z');
        menu.add(0, SRCATOP_MENU_ID, 0, "SrcATop").setShortcut('5', 'z');

        /****   Is this the mechanism to extend with filter effects?
        Intent intent = new Intent(null, getIntent().getData());
        intent.addCategory(Intent.CATEGORY_ALTERNATIVE);
        menu.addIntentOptions(
                              Menu.ALTERNATIVE, 0,
                              new ComponentName(this, NotesList.class),
                              null, intent, 0, null);
        *****/
        return true;
    }
    
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {//每次menu出现前会被调用
        super.onPrepareOptionsMenu(menu);
        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {//对菜单情况进行判断
        mPaint.setXfermode(null);
        mPaint.setAlpha(0xFF);

        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(0x80);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}
这个是调色板的代码
import android.os.Bundle;
import android.app.Dialog;
import android.content.Context;
import android.graphics.*;
import android.view.MotionEvent;
import android.view.View;

public class ColorPickerDialog extends Dialog {

    public interface OnColorChangedListener {
        void colorChanged(int color);
    }

    private OnColorChangedListener mListener;
    private int mInitialColor;

    private static class ColorPickerView extends View {
        private Paint mPaint;
        private Paint mCenterPaint;
        private final int[] mColors;
        private OnColorChangedListener mListener;//用该接口来改变画笔颜色,详见FingerPaintActivity中对该接口的实现
        
        ColorPickerView(Context c, OnColorChangedListener l, int color) {
            super(c);
            mListener = l;
            /*定义了一个颜色数组,用来完成外面一圈取色圈*/
            mColors = new int[] {
                0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,
                0xFFFFFF00, 0xFFFF0000
            };//注意:这样设置带来的问题是无法获取黑色
            Shader s = new SweepGradient(0, 0, mColors, null);//利用上面的数组产生外面一层渐变的取色圈
            
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//一些画取色圈的画笔的设定
            mPaint.setShader(s);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(32);
            
            mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//画中心颜色点画笔的设定
            mCenterPaint.setColor(color);
            mCenterPaint.setStrokeWidth(5);
        }
        
        private boolean mTrackingCenter;//按下屏幕时的位置是否在中心颜色区域
        private boolean mHighlightCenter;//是否高亮外围一圈,当按下位置在中心颜色区域时,会在中心颜色区域周围画出一个小圆圈,若此时手指不离开屏幕,但移动到中心颜色区域外面,则会使小圆圈变暗

        @Override 
        protected void onDraw(Canvas canvas) {
            float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;//取色圈半径
            
            canvas.translate(CENTER_X, CENTER_X);
            
            canvas.drawOval(new RectF(-r, -r, r, r), mPaint);//外围取色圈
            canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);//中心颜色区域
            
            if (mTrackingCenter) {//该段代码详见该变量定义
                int c = mCenterPaint.getColor();
                mCenterPaint.setStyle(Paint.Style.STROKE);
                
                if (mHighlightCenter) {
                    mCenterPaint.setAlpha(0xFF);
                } else {
                    mCenterPaint.setAlpha(0x80);
                }
                canvas.drawCircle(0, 0,
                                  CENTER_RADIUS + mCenterPaint.getStrokeWidth(),
                                  mCenterPaint);
                
                mCenterPaint.setStyle(Paint.Style.FILL);
                mCenterPaint.setColor(c);
            }
        }
        
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {//设置view大小 这个不是很懂 谁看懂了告诉我一声
            setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
        }
        
        private static final int CENTER_X = 100;//中心在屏幕上的坐标,并且和外围取色圈半径有关(取色圈那个很明显是对的,那个屏幕中心什么的可能不对,谁看懂了告诉我一声)
        private static final int CENTER_Y = 100;
        private static final int CENTER_RADIUS = 32;//中心颜色区域半径

        private int ave(int s, int d, float p) {//加权平均数
            return s + java.lang.Math.round(p * (d - s));
        }
        
        private int interpColor(int colors[], float unit) {//计算周围的颜色圈
            if (unit <= 0) {
                return colors[0];
            }
            if (unit >= 1) {
                return colors[colors.length - 1];
            }
            
            float p = unit * (colors.length - 1);
            int i = (int)p;
            p -= i;

            // now p is just the fractional part [0...1) and i is the index
            int c0 = colors[i];
            int c1 = colors[i+1];
            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 static final float PI = 3.1415926f;

        @Override
        public boolean onTouchEvent(MotionEvent event) {//处理触屏时间
            float x = event.getX() - CENTER_X;
            float y = event.getY() - CENTER_Y;
            boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;//判断是否在中心区域
            
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mTrackingCenter = inCenter;
                    if (inCenter) {
                        mHighlightCenter = true;
                        invalidate();
                        break;
                    }
                case MotionEvent.ACTION_MOVE:
                    if (mTrackingCenter) {
                        if (mHighlightCenter != inCenter) {
                            mHighlightCenter = inCenter;
                            invalidate();
                        }
                    } else {
                        float angle = (float)java.lang.Math.atan2(y, x);//选中外围颜色,这个颜色不是精确的
                        // need to turn angle [-PI ... PI] into unit [0....1]
                        float unit = angle/(2*PI);
                        if (unit < 0) {
                            unit += 1;
                        }
                        mCenterPaint.setColor(interpColor(mColors, unit));
                        invalidate();
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    if (mTrackingCenter) {
                        if (inCenter) {
                            mListener.colorChanged(mCenterPaint.getColor());//就是这一步改变了FingerPaintActivity中的mPaint
                        }
                        mTrackingCenter = false;
                        invalidate();
                    }
                    break;
            }
            return true;
        }
    }

    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() {
            public void colorChanged(int color) {
                mListener.colorChanged(color);
                dismiss();
            }
        };

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值