版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CHEndorid/article/details/66096418
这是我们要实现的效果
要用到的方法:
贝塞尔曲线 | 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);
}
}