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

这是我们要实现的效果

要用到的方法：

贝塞尔曲线

quadTo, cubicTo

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

二阶贝塞尔曲线

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

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

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

扫描二维码关注公众号，回复： 3440139 查看本文章

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

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

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

猜你喜欢