图形绘制之——Canvas详解（二）-Path路径使用

上一篇博文我们学习了Canvas的基本知识，了解了使用Canvas可以绘制
直线，矩形，圆，椭圆，扇形，弧形，三角形，正弦，余弦以及path轨迹。
这一节让我们来学习一下Path路径在图形绘制中的使用吧。

Path路径画法

1.基本用法：

Path常用方法：

• moveTo():由于path开始默认的位置为（0,0），所以需要将起始位置移动到指定位置。

• lineTo():划线

• close():将路径闭合

Canvas对应使用的Path的方法：

• drawPath(path，paint):画路径

• drawTextOnPath(字符,路径,x偏移,y偏移,画笔):沿着线写字

小示例：

2.贝塞尔曲线:

3.模拟流动曲线:

总代码：

public class MyPathView extends View {
private int width;
private int height;
private Paint mPaintThreeAgl;
private Path paththree;
private Paint mPaintBeisr;
private Path mPathBeisr;
private Paint mPaintText;
private Path path;
private int count;


private final int MSG_WHAT_QUXIAN=0x44;
    Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case MSG_WHAT_QUXIAN:
                    count++;
if(count>=200){//由于周期为200，所以每200变0
                        count=0;
                    }
                    invalidate();
                    handler.sendEmptyMessageDelayed(MSG_WHAT_QUXIAN,50);
break;
default:
break;
            }
        }
    };

public MyPathView(Context context) {
super(context);
    }

public MyPathView(Context context, AttributeSet attrs) {
super(context, attrs);
        mPaintThreeAgl = new Paint();
        mPaintThreeAgl.setStyle(Paint.Style.STROKE);//设置为空心
        paththree = new Path();
        mPaintText = new Paint();
        mPaintText.setTextSize(20);
//贝塞尔
        mPaintBeisr=new Paint();
        mPaintBeisr.setStyle(Paint.Style.STROKE);
        mPathBeisr = new Path();

//曲线
        path = new Path();
        handler.sendEmptyMessage(MSG_WHAT_QUXIAN);
    }

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

/*
 曲线，需要Hander
 */
        path.reset();//每次需要重置路径
        path.moveTo(count, 100);//移动初始位置，造成水流移动的效果
for (int i=0;i<100;i++) {
            path.rQuadTo(50, 50, 100, 0);//以当前位置为原点进行绘制
            path.rQuadTo(50, -50, 100, 0);
        }
        canvas.drawPath(path,mPaintBeisr);
    }
}

代码分析：

自定义曲线：
1）每次绘制前通过reset来重置路径，避免每次刷新后都重叠
2）这里每次都改变头结点的位置，来造成水流流动的假象。头位置用count控制。


handler：
控制count值变化，即头结点位置，这里当count值达到一定程度要将它置为0，而这个一定值一定要是绘制地方曲线的周期倍数。