贝赛尔曲线（二）应用场景之画板优化

转发请注明出处：http://blog.youkuaiyun.com/darling_R/article/details/69056376

自定义view之画板很简单，可以看一下下面这个例子。

简单的画板就是这样的，实现也很简单，主要思路就是，重写OnTouch方法，在按下的时候，记录下来起始点的坐标(tempX,tempY),然后将画笔的路径移动到起点坐标，mPath.moveTo(tempX,tempY);在移动事件下，首先记录下移动后的新坐标 x1,y1;然后调用mPath.lineTo()方法，传入起点和新坐标点的坐标，在这之后，要把新坐标点的值赋给前面的起点坐标，用来当做下一次移动后的起点，这样才能画出连续的线，最后调用invalidate（）刷新画布，代码如下：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawPath(mPath,mPaint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
   switch (event.getAction()){
     case MotionEvent.ACTION_DOWN:
          tempX = event.getX();
          tempY = event.getY();
          //按下时，将画笔的路径移动到起点
          mPath.moveTo(tempX,tempY);
          break;
     case MotionEvent.ACTION_MOVE:
         //移动过程中产生的新坐标
         float x1 = event.getX();
         float y1 = event.getY();
         //将path移动到新坐标，并连线
         mPath.lineTo(x1,y1);
         //将新坐标赋值给临时变量，目的是将此时的点作为下一次移动后的起点
         tempX = x1;
         tempY = y1;
         //刷新画布，调用onDraw方法
         invalidate();
         break;
     case MotionEvent.ACTION_UP:

          break;
  }
 return true;
}

但是问题来了，仔细观察，不难看出，当快速绘画的时候，线在拐角处的棱角特别明显，不圆滑，原因就是在代码中使用的是 lineTo方法，这个方法就是连接两点的直线，当你快速滑动的时候，两点的距离有点远，所以看到的就是直线。
上篇文章讲到了贝塞尔曲线，知道其原理，那么咱们就可以使用贝塞尔曲线来优化一下，先看一下优化后的效果：

这个效果相比上一个是不是好很多啊，哈哈，现在来说说他的思路
主要就是运用贝塞尔曲线的原理，既然是两点间的连线，那么我们可以构造出一个控制点来实现贝塞尔曲线，可以取两点之间的中点作为贝塞尔曲线的起始点，然后，移动的点作为控制点，那样的话，绘制出来的曲线就比较圆滑了，可能语言叙述不是很好理解，那么咱么就直接看看代码吧：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //每次按下时重置一下画笔路径
                mPath.reset();
                tempX = event.getX();
                tempY = event.getY();
                //按下时，将画笔的路径移动到起点
                mPath.moveTo(tempX, tempY);
                break;
            case MotionEvent.ACTION_MOVE:
                //移动过程中产生的新坐标
                float x1 = event.getX();
                float y1 = event.getY();
                //取两点间的中点作为终点
                float fx = (x1 + tempX) / 2;
                float fy = (y1 + tempY) / 2;
                //使用贝塞尔api
                mPath.quadTo(tempX,tempY,fx,fy);
                //将新坐标赋值给临时变量，目的是将此时的点作为下一次移动后的起点
                tempX = x1;
                tempY = y1;
                //刷新画布
                invalidate();
                break;
            case MotionEvent.ACTION_UP:

                break;
        }
        return true;
    }

相比之前的代码，就多了两行，是不是相对简单易懂一些了。
恩，今天就到这里，该去吃饭了！不明白的，建议去看看医生的视频，讲的不错！