快捷導(dǎo)航

Android 使用Path實(shí)現(xiàn)涂鴉功能

更新時(shí)間：2016年12月16日 11:46:32 作者：coderinchina

到月底了最近比較空閑，今天抽空給大家實(shí)現(xiàn)一個(gè)涂鴉效果，會(huì)分幾步實(shí)現(xiàn),這里有一個(gè)重要的知識(shí)點(diǎn)就是圖層,要理解這個(gè)。下面先從簡(jiǎn)單的說(shuō)起，一起看看代碼吧

今天實(shí)現(xiàn)一個(gè)涂鴉效果,會(huì)分幾步實(shí)現(xiàn),這里有一個(gè)重要的知識(shí)點(diǎn)就是圖層,要理解這個(gè),不然你看這篇博客,很迷茫,迷茫的蒼茫的天涯是我的愛(ài),先從簡(jiǎn)單的需求做起,繪制一條線,代碼如下：

package com.tuya;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
 * Created by admin on 2016/12/16.
 */
public class GraffitiView extends View{
  private Paint paint;
  private Path path;
  private float downX,downY;
  private float tempX,tempY;
  public GraffitiView(Context context) {
    this(context,null);
  }
  public GraffitiView(Context context, AttributeSet attrs) {
    this(context, attrs,0);
  }
  public GraffitiView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
  private void init() {
    paint = new Paint();
    paint.setAntiAlias(true);
    paint.setStrokeWidth(10);
    paint.setStyle(Paint.Style.STROKE);
    path = new Path();
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if(path!=null){
      canvas.drawPath(path,paint);
    }
  }
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()){
      case MotionEvent.ACTION_DOWN:
        downX = event.getX();
        downY = event.getY();
        path.moveTo(downX,downY);
        invalidate();
        tempX = downX;
        tempY = downY;
        break;
      case MotionEvent.ACTION_MOVE:
        float moveX = event.getX();
        float moveY = event.getY();
        path.quadTo(tempX,tempY,moveX,moveY);
        invalidate();
        tempX = moveX;
        tempY = moveY;
        break;
    }
    return true;
  }
}

效果：

如果你不使用path的quadTo()用lineTo()方法也行,但是沒(méi)有使用queadTo()繪制出來(lái)的路徑光滑,這5條路徑是怎么繪制到屏幕上去的呢?上面說(shuō)了圖層的概念,如果不懂,可以去看下我之前寫(xiě)的關(guān)于canvas博客,也可以去網(wǎng)上看其他的博客,
我們知道每次canvas.draw...()其實(shí)都會(huì)產(chǎn)生新的圖層,只是圖層是透明的,最后隱射到畫(huà)布(canvas)上,畫(huà)布分析：