Android 绘图基础：Path（绘制三角形、贝塞尔曲线、正余弦）

学习重点：
理解path的使用
理解贝塞尔曲线的绘制原理
可动正余弦的绘制

Path的简单介绍

　　在 Android 绘图基础：Canvas画布——自定义View（绘制表盘、矩形、圆形、弧、渐变）中我们可以看到Canvas的强大功能，其实Canvas还有一种绘图方式就是drawpath()，没有在上篇博客中写出这个方法就是想进行单独的介绍。我们通过Canvas 的其他方法只能绘制特定的图形，但是等我们学会了Path，我们就能够绘制任何图形了！
　　Path是Android为我们提供的非常有用的类，它可以预先在View上将N个点连成一条“路径”，然后调用Canvas.drawpath方法就可沿着路径绘制图形了。
　　

绘制三角形

既然我们要使用Path当然要先定义一个Path

  private Path mpath;

onDraw方法中绘制

        //mpathd的起始位置        mpath.moveTo(100, 100);        //从起始位置划线到(200, 200)坐标        mpath.lineTo(200, 200);        //将mpath封闭，也可以写 mpath.lineTo(100, 100);代替        mpath.close();        //绘制path路径        canvas.drawPath(mpath, Paintpath);

贝塞尔曲线

设么是贝塞尔曲线，简单的说就是通过三个点，不断地取三点连线的中点，最后近似出一条光滑的曲线。
Android 绘图基础：Path（绘制三角形、贝塞尔曲线、正余弦）_第1张图片

//贝塞尔曲线需要三个点（起始点 控制点 结束点）来确定       //贝塞尔曲线的起始点    mpath.moveTo(300, 300);    //绘制贝塞尔曲线需要我们调用quadTo方法    //控制点        mpath.quadTo(50, 450, 300, 500);        //结束点        canvas.drawPath(mpath, Paintpath);        //绘制canvas.drawPath(mpath, Paintpath);//如果为了更清楚的看出贝塞尔曲线与点的关系，可以通过drawpoint将点画出

正余弦曲线

在贝塞尔曲线的基础上我们再来理解正余弦，正余弦的绘制需要理解坐标点。绘制正余弦曲线我们需要使用rQuadTo()它的坐标都是相对的。

//其实位置mpath.moveTo(100, 100);//rQuardto的位置是相对的mpath.rQuadTo(20, 20, 40, 0);mpath.rQuadTo(20, -20, 40, 0);

Android 绘图基础：Path（绘制三角形、贝塞尔曲线、正余弦）_第2张图片
注：这里要着重理解rQuardto的位置是相对的，像上图所示，相信看了上面的图你就会很好地理解了。

可动正余弦

思路：通过改变绘制的初始位置进行改变，相当于向一边拖拽
Android 绘图基础：Path（绘制三角形、贝塞尔曲线、正余弦）_第3张图片

public class MyPathView extends View{    private int width;    private int height;    private Paint Paintpath;    private Path mpath;    private Paint PaintText;    private Paint Paintpoint;    private int count;    private int size;    private Handler mhanHandler=new Handler(){        public void handleMessage(android.os.Message msg) {            switch (msg.what) {            case 0x23:                count++;    //count至少80，根据我们画的mpath.rQuadTo()确定            if(count>=80){                count=0;                    }            size++;            if(size>10){                size=5;            }            mhanHandler.sendEmptyMessageDelayed(0x23, 200);            //重新绘制                invalidate();                break;            default:                break;            }        };    };    public MyPathView(Context context) {        super(context);        // TODO Auto-generated constructor stub    }    public MyPathView(Context context, AttributeSet attrs) {        super(context, attrs);        Paintpath=new Paint();        Paintpath.setColor(Color.BLACK);        Paintpath.setAntiAlias(true);    //  Paintpath.setStrokeWidth(5);        Paintpath.setStyle(Style.STROKE);        PaintText=new Paint();        PaintText.setColor(Color.BLACK);        PaintText.setAntiAlias(true);               PaintText.setTextSize(40);        mpath=new Path();        Paintpoint=new Paint();        Paintpoint.setColor(Color.RED);    //  Paintpoint.setStrokeWidth(20);        Paintpoint.setStyle(Style.STROKE);        mhanHandler.sendEmptyMessage(0x23);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mpath.reset();        //通过不断修改count值，让曲线动起来        mpath.moveTo(count, 100);        for(int i=0;i<20;i++){            //rQuadTo            mpath.rQuadTo(20, size, 40, 0);            mpath.rQuadTo(20, -size, 40, 0);            }               canvas.drawPath(mpath, Paintpath);        canvas.drawCircle(200, 100, 50, Paintpoint);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);    }}

Path的简单介绍

绘制三角形

贝塞尔曲线

正余弦曲线

可动正余弦

更多相关文章

随机推荐