Android 高级UI 目录
Path工具类：用来记录线条的轨迹路径
canvas.draw(path,paint)；
贝塞尔曲线
现实生活当中，任何的曲线和曲面都可以用贝塞尔公式来解决。
比如：
1.设计贝塞尔曲线或者贝塞尔曲线效果图
2.怎么去得到贝塞尔曲线的几个要素(比如二阶贝塞尔：p0初始位置，p1拐点，p2结束点)
p1拐点如何确定，可以通过工具来确定，比如Photoshop点钢笔工具等
原理和简单推导（以三阶为例）：
设P0、P02、P2是一条抛物线上顺序三个不同的点。过P0和P2点的两切线交于P1点，在P02点的切线交P0P1和P2P1于P01和P11，则如下比例成立：
这是所谓抛物线的三切线定理。
当P0，P2固定，引入参数t，令上述比值为t:(1-t)，即有：
t从0变到1，第一、二式就分别表示控制二边形的第一、二条边，它们是两条一次Bezier曲线。将一、二式代入第三式得：
当t从0变到1时，它表示了由三顶点P0、P1、P2三点定义的一条二次Bezier曲线。
并且表明：
这二次Bezier曲线P02可以定义为分别由前两个顶点(P0,P1)和后两个顶点(P1,P2)决定的一次Bezier曲线的线性组合**。
依次类推，
由四个控制点定义的三次Bezier曲线P03可被定义为分别由(P0,P1,P2)和(P1,P2,P3)确定的二条二次Bezier曲线的线性组合，由(n+1)个控制点Pi(i=0,1,...,n)定义的n次Bezier曲线P0n可被定义为分别由前、后n个控制点定义的两条(n-1)次Bezier曲线P0n-1与P1n-1的线性组合：
image
由此得到Bezier曲线的递推计算公式
image
这就是这就是de Casteljau算法，可以简单阐述三阶贝塞尔曲线原理。
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。
以下公式中：B(t)为t时间下 点的坐标；
P0为起点,Pn为终点,Pi为控制点
一阶贝塞尔曲线(线段)：
image.png
image
意义：由 P0 至 P1 的连续点， 描述的一条线段
二阶贝塞尔曲线(抛物线)：
image
原理：由 P0 至 P1 的连续点 Q0，描述一条线段。
由 P1 至 P2 的连续点 Q1，描述一条线段。
由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。
经验：P1-P0为曲线在P0处的切线。
三阶贝塞尔曲线：
image
通用公式：
image.png
高阶贝塞尔曲线：
4阶曲线：
image
5阶曲线：
image
二阶贝塞尔曲线
public class WaveView extends View {
private Paint paint;
private Path path;
public WaveView(Context context) {
super(context);
}
public WaveView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
path = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(10);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//第一个点--起始点
path.moveTo(100, 400);
//二阶贝塞尔曲线1
path.quadTo(250, 200, 400, 400);
//二阶贝塞尔曲线2(后面的曲线的起始点默认是接着上一个曲线的结束点)
path.quadTo(550, 600, 700, 400);
//关闭路径(将起点和终点闭合)
path.close();
canvas.drawPath(path, paint);
}
}
三阶贝塞尔曲线
path.moveTo(100, 700);
path.cubicTo(50, 500, 550, 500, 700, 700);
canvas.drawPath(path, paint);
波浪实例
public class WaveView extends View {
private Paint paint;
private Path path;
//波长
private int waveLength = 800;
private int dx;
private int dy;
public WaveView(Context context) {
super(context);
}
public WaveView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
path = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL_AND_STROKE);
paint.setStrokeWidth(10);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.reset();
int originY = 500;
// if(dy<originY + 150){
// dy += 30;
// }
int halfWaveLength = waveLength / 2;
path.moveTo(-waveLength + dx, originY - dy);
//屏幕宽度里面画多少哥波长
for (int i = -waveLength; i < getWidth() + waveLength; i += waveLength) {
//二阶贝塞尔曲线1
/**
* 相对于起始点的增量
*/
path.rQuadTo(halfWaveLength / 2, -150, halfWaveLength, 0);
path.rQuadTo(halfWaveLength / 2, 150, halfWaveLength, 0);
}
//颜色填充
//画一个封闭的空间
path.lineTo(getWidth(), getHeight());
path.lineTo(0, getHeight());
path.close();
canvas.drawPath(path, paint);
}
public void startAnimation() {
ValueAnimator animator = ValueAnimator.ofInt(0, waveLength);
animator.setDuration(1000);
animator.setInterpolator(new LinearInterpolator());
//无限循环
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
dx = (int) animation.getAnimatedValue();
postInvalidate();
}
});
animator.start();
}
}
调用
WaveView waveView = findViewById(R.id.waveView);
waveView.startAnimation();
网友评论