Android Project Scratch award details (i)

Objective

Recently is learning Yang Big Scratch Award, feel learned to have income, is to write an explanation (although there are many online, but after all, it is their own writing, their own later to review), the text began

Goal

Implementing Artboard Functionality

Ideas

We need to customize the view to implement the artboard function, and then change it a little bit.
On the custom view, if you do not know the students suggest first to understand, Baidu Custom view will have a lot of relevant tutorials,
I'll simply mention here that there are three main categories of custom view, paint (brush), path (path),
Canvas, three main types of methods introduced

2. Inherit view, implement construction method

   Four construction methods, we mainly implement two parameters of the construction method can be

    private Paint mOutterPaint = new Paint(); // 绘制线条的Paint,即用户手指绘制Path private Path mPath = new Path();//记录用户绘制的Path private Canvas mCanvas;//画布，可以画东西 private Bitmap mBitmap;//画布在此图片上画画 private int mLastX;//x坐标 private int mLastY;//y坐标 private Bitmap background;//这个是背景图，我们先不理 public GuaGuaKa(Context context) {     super(context); } public GuaGuaKa(Context context, @Nullable AttributeSet attrs) {     super(context, attrs);     mPath = new Path(); } public GuaGuaKa(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {     super(context, attrs, defStyleAttr); } public GuaGuaKa(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {     super(context, attrs, defStyleAttr, defStyleRes); }

3. Replication Onmeasure Method

   We first get the width of the view and then create a canvas with this width, and some settings for the brush

    @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (Widthmeasurespec, H     EIGHTMEASURESPEC);     LOG.D (TAG, "onmeasure: Measurement");     int width = getmeasuredwidth ();     int height = getmeasuredheight (); Initialize Bitmap Mbitmap = bitmap.createbitmap (width, height, Bitmap.Config.ARGB_8888);//Create a 32-bit Bitmap Mcanvas with the obtained width height = new Canvas (MBITMAP);//Create a canvas Mcanvas.drawcolor (Color.green) with bitmap,///Set the color of the canvas to be green//background, the next section to resolve this part of the code, first comment out the/*bit     Mapdrawable bitmap = (bitmapdrawable) getresources (). getdrawable (R.DRAWABLE.REWRITE6);     Background = Bitmap.getbitmap ();      Background = Bitmap.createscaledbitmap (background,width,height,true); *//Set Brush Moutterpaint.setcolor (Color.Blue); Moutterpaint.setantialias (TRUE);//use antialiasing to consume larger resources, drawing graphics slower moutterpaint.setdither (true);//image jitter processing,     Will make the painted picture color more smooth and full, the image is clearer moutterpaint.setstyle (Paint.Style.STROKE); Moutterpaint.setstrokejoin (Paint.Join.ROUND);//rounded corners, smooth moutterpaint.Setstrokecap (Paint.Cap.ROUND); Fillet moutterpaint.setstrokewidth (20);    Set Brush Width}

4. Replication Ontouchevent Method

   We're here to make a copy of the user's touch event. When the finger is pressed to the screen, the path is used to move to the current position of the finger using the MoveTo method.
   Invalidate refresh view, callback OnDraw method, (not yet drawn). Then, when the finger moves, the action is in the Action_move state, the path path uses the LineTo method (drawing a straight line), the x, y coordinates are updated, invalidate refreshes the view, the callback OnDraw method, Canvas uses a brush to draw the path through DrawPath, and then resumes the steps in the loop action_move if the user does not lift the finger

     @Override Public boolean ontouchevent (Motionevent event) {//When the finger is pressed on the screen, use the MoveTo method in the path to move to the current position of the finger, in Validate Refresh View, callback OnDraw method, (not yet drawn), canvas will move the brush to that coordinates//, the finger moves, the action is in the state of Action_move, the path path uses the LineTo method (Draw straight line),// At the same time, the x, y coordinates are updated, invalidate refresh view, callback OnDraw method, canvas through the drawpath using a brush to draw the path (draw a straight line), then if the user does not lift the finger, then continue the loop Action_     Steps in Move int action = Event.getaction (); int x = (int) event.getx ();//get x coordinate int y = (int) event.gety ();//Get y-coordinate switch (action) {case Motionevent.ac              TION_DOWN:MLASTX = x;              Mlasty = y;         Mpath.moveto (MLASTX, mlasty);//After callback OnDraw method canvas will break path; Case MotionEvent.ACTION_MOVE:mPath.lineTo (x, y);//After callback OnDraw method, canvas draws a straight line to (x, y) that point mlastx = x;//Update x         Coordinate mlasty = y;//update y-coordinate break;     Default:break;     } invalidate ();//Refresh view, callback OnDraw method Log.d (TAG, "ontouchevent:invalidate"); return true;  

   }

6. Replication OnDraw method

   And then we'll copy the onDraw method and canvas start painting here with a paintbrush.

    @Override protected void onDraw(Canvas canvas) {     Log.d(TAG, "onDraw: 画");     //canvas.drawBitmap(background,0,0,null);//下一节解析，这里先注释掉     //mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//下一节解析，注释掉     mCanvas.drawPath(mPath, mOutterPaint);//mCanvas是我们定义的画布，用户的每次的手指轨迹都被path记录下来，之后mcanvas就使用画笔将用户的手指轨迹画了出来     canvas.drawBitmap(mBitmap, 0,0, null);//将mBitmap画出来 }

PS：这里测试的时候发现mCanvas与canvas的顺序可以换个位置，影响不大

总的流程图如下所示，逻辑应该还算简单

Android Project Scratch award details (i)