自定义View练习（二）二阶贝塞尔曲线

来源：互联网发布：王健林鲁豫知乎编辑：程序博客网时间：2024/05/21 07:55

这是我们要实现的效果

要用到的方法：

贝塞尔曲线quadTo, cubicTo分别为二次和三次贝塞尔曲线的方法

二阶贝塞尔曲线

quadTo(float x1, float y1, float x2, float y2)

其中，x1、x2 为控制点的坐标 ( x1,x2 )，x2、y2 为终点的坐标 ( x2,y2 )。

直接代码送上，注释都在代码里

三阶的贝塞尔曲线虽然没有在这里用到，不过也说一下方法

cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)

其中，x1、x2 为控制点1的坐标 ( x1,x2 )，x2、y2 为控制点2的坐标 ( x2,y2 )，x3、y3 为终点的坐标 ( x3,y3 )。

好了，现在直接上干货，二阶贝塞尔曲线的代码

public class Bezier extends View {    private Paint mPaint;    private int centerX, centerY;    //记录起点、终点、控制点    private PointF start, end, control;    public Bezier(Context context) {        super(context);        //初始化paint        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setColor(Color.BLUE);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setTextSize(60);        start = new PointF(0, 0);        end = new PointF(0, 0);        control = new PointF(0, 0);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        centerX = w / 2;        centerY = h / 2;        //初始化数据点和控制点的位置        start.x = centerX - 400;        start.y = centerY + 400;        end.x = centerX + 400;        end.y = centerY - 400;        control.x = centerX;        control.y = centerY + 200;    }    @Override    public boolean onTouchEvent(MotionEvent event) {        //根据触摸位置更新控制点，并重绘        control.x = event.getX();        control.y = event.getY();        invalidate();        return true;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //绘制数据点和控制点        mPaint.setColor(Color.BLACK);        mPaint.setStrokeWidth(11);        canvas.drawPoint(start.x, start.y, mPaint);        canvas.drawPoint(end.x, end.y, mPaint);        canvas.drawPoint(control.x, control.y, mPaint);        //绘制辅助线        mPaint.setStrokeWidth(4);        canvas.drawLine(start.x, start.y, control.x, control.y, mPaint);        canvas.drawLine(control.x, control.y, end.x, end.y, mPaint);        //绘制二阶贝塞尔曲线        mPaint.setColor(Color.RED);        mPaint.setStrokeWidth(8);        Path path = new Path();        path.moveTo(start.x, start.y);        path.quadTo(control.x, control.y, end.x, end.y);        canvas.drawPath(path, mPaint);    }}

然后在 MainActivity 里调用

package com.example.alltest;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;public class MainActivity extends AppCompatActivity {    private Bezier view;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        view = new Bezier(this);        setContentView(view);    }}

源码下载：http://download.csdn.net/download/chendorid/9793875

0 0