自定义view(三) 贝塞尔曲线 水波纹效果实现

在上面的博客中说了path的绘制,path绘制, 介绍了除了贝塞尔曲线的其他情况。 在这里单独介绍一下贝塞尔曲线。贝塞尔曲线是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝塞尔曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线。 我们再开发中很多都会用到贝塞尔曲线的情况,比如水波纹效果。贝塞尔曲线扫盲贴这一片博客很形象的把它的原理解释了一下。看完这个我们可以比较明白的看出。贝塞尔曲线就是两个固定点确定的情况下,根据一个或者多个控制点通过计算得到的曲线。

  • api分析

这是贝塞尔曲线的数学解释,我们再实现对path绘制的时候,的确不需要知道这个。只要知道大致的形式就行,但是对于后期了解属性动画之后,就有意义了。很多时候都是需要用到这个公式。比如经常出现的直播间花束心形点赞效果,那些心形的移动路线就是按照贝塞尔曲线绘制。

我们通过官方文档来看,关于二次,三次贝塞尔曲线的情况:

 /** 从注释中可以看出,x1,y1,就是控制点的坐标,x2,y2就是最后固定点的坐标。

     * Add a quadratic bezier from the last point, approaching control point
     * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
     * this contour, the first point is automatically set to (0,0).
     *
     * @param x1 The x-coordinate of the control point on a quadratic curve
     * @param y1 The y-coordinate of the control point on a quadratic curve
     * @param x2 The x-coordinate of the end point on a quadratic curve
     * @param y2 The y-coordinate of the end point on a quadratic curve
     */
    public void quadTo(float x1, float y1, float x2, float y2) {
        isSimplePath = false;
        nQuadTo(mNativePath, x1, y1, x2, y2);
    }


 /**
      x1,y1,x2,y2就是控制点的坐标,x3,y3就是末尾固定点的坐标
     * Add a cubic bezier from the last point, approaching control points
     * (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been
     * made for this contour, the first point is automatically set to (0,0).
     *
     * @param x1 The x-coordinate of the 1st control point on a cubic curve
     * @param y1 The y-coordinate of the 1st control point on a cubic curve
     * @param x2 The x-coordinate of the 2nd control point on a cubic curve
     * @param y2 The y-coordinate of the 2nd control point on a cubic curve
     * @param x3 The x-coordinate of the end point on a cubic curve
     * @param y3 The y-coordinate of the end point on a cubic curve
     */
    public void cubicTo(float x1, float y1, float x2, float y2,
                        float x3, float y3) {
        isSimplePath = false;
        nCubicTo(mNativePath, x1, y1, x2, y2, x3, y3);
    }

我们可以可以做一个例子,通过控制控制点的坐标,来看看贝塞尔曲线的情况 。

 

图一就是quadTo的应用,图二就是cubicTo的应用。我们可以通过改变控制点的坐标,来改变曲线的样式。代码如下:

  @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        mPaint.setStrokeWidth(8);
        mPaint.setColor(Color.parseColor("#ff00ff"));
        mPath.moveTo(100,400);
        mPath.quadTo(mControlPoint.x,mControlPoint.y,1000,400);
        canvas.drawPath(mPath,mPaint);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(20);
        canvas.drawPoint(100,400,mPaint);
        canvas.drawPoint(1000,400,mPaint);
        canvas.drawPoint(mControlPoint.x,mControlPoint.y,mPaint);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        //通过移动改变控制点的坐标,然后重绘,改变贝塞尔曲线的状态
        mControlPoint.set((int) event.getX(), (int) event.getY());
        invalidate();
        return true;
    }
  • 水波纹效果

我们可以想象水波纹其实就可以看做是两个曲线相互交叉的效果,比如下图所示:

其实这就相当于一个向左移动和一个向右移动的两个曲线,然后和一个圆形相交的部分。 其实绘制所需要的特殊view。就是想它一步步分解的过程,分解成最基本的可以直接通过api绘画的模块。

public class BezierView extends View {

    private static final String TAG = ViewPath.class.getSimpleName();

    private ValueAnimator mAnimator;

    private int currentValue;

    private int xOffset;

    Paint mPaint;
    Point mCenterPoint;
    Path mPath;

    private int windowWidth;

    Path mRightPath;

    Path mDesPath;

    public BezierView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint();
        //抗锯齿
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(8);
   //     mPaint.setStyle(Paint.Style.STROKE);
        mCenterPoint = new Point();
        mCenterPoint.set(500, 100);
        mPath = new Path();
        mRightPath = new Path();
        mDesPath = new Path();
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取屏幕宽度
        windowWidth = getWidth();
        drawRightWave(canvas);
        drawLeftWave(canvas);
    }

    //从右向左移动的曲线
    private void drawRightWave(Canvas canvas) {
        mRightPath.reset();
        mDesPath.reset();
        mPaint.setStrokeWidth(5);
        mPaint.setColor(Color.parseColor("#7700CDCD"));
        mPaint.setAlpha(200);
        mPaint.setStrokeWidth(5);
        mPaint.setStyle(Paint.Style.FILL);

        //计算真个向左移动的贝塞尔曲线中需要点的个数,
        //因为每个贝塞尔曲线中的两个固定点之间的间距是300像素,所以要除以300
        //移动的距离这里取的是屏幕宽度的7倍,以当前可见屏幕为标准,向左,右各扩展到3个屏幕宽度
        //这个具体的一定距离,可以按需设置,我这里就直接用了一个比较大的值
        int pointNumbers = windowWidth*7/300;

        mRightPath.moveTo(windowWidth*4 - xOffset, 400);
        //从右向左依次把曲线添加到path中,用rQuadTo是因为他总是以path的最后一个点为原点
        for (int i = 0; i < pointNumbers+1; i++) {
            if (i % 2 == 0) {
                mRightPath.rQuadTo(-150, -50, -300, 0);
            } else {
                mRightPath.rQuadTo(-150, 50, -300, 0);
            }

        }

        //因为有一个圆形在里面所以首先要将path形成一个闭环,因为我们在这里写死圆的位置
        //它是一个以400,400为圆心,300为半径的圆,所以我们的mRightPath形成的闭环Y轴坐标应该是
        //700, 以保证和圆的底部相切
        mRightPath.lineTo(-(windowWidth*3)-xOffset - 300*(pointNumbers+1),700);
        mRightPath.lineTo(windowWidth*4 - xOffset,700);
        mRightPath.close();
        mDesPath.addCircle(400,400,300, Path.Direction.CW);

        //将圆形和曲线取交集
        mDesPath.op(mRightPath, Path.Op.INTERSECT);
        canvas.drawPath(mDesPath, mPaint);
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(400,400,300,mPaint);
    }


    //从左向右移动的曲线,这个与从右向左类似
    private void drawLeftWave(Canvas canvas) {
        mPath.reset();
        mPaint.setStrokeWidth(5);
        mPaint.setColor(Color.parseColor("#7700F5FF"));
        mPaint.setAlpha(200);
        mPaint.setStyle(Paint.Style.FILL);
        mPath.moveTo(-(windowWidth*3) + xOffset, 400);
        int pointNumbers = windowWidth*7/300;

        for (int i = 0; i < pointNumbers+1; i++) {
            if (i % 2 == 0) {
                mPath.rQuadTo(100, -50, 200, 0);
            } else {
                mPath.rQuadTo(100, 50, 200, 0);
            }
        }
        mPath.lineTo(windowWidth*4 + xOffset,700);
        mPath.lineTo(-(windowWidth*3) + xOffset,400);
        mDesPath.addCircle(400,400,300, Path.Direction.CW);
        mDesPath.op(mPath, Path.Op.INTERSECT);
        canvas.drawPath(mDesPath, mPaint);
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(400,400,300,mPaint);
    }

    //设置移动的动画,通过valueanimator进行对连个曲线的移动
    private void startAnimator(int start, int end, long animTime) {
        mAnimator = ValueAnimator.ofInt(start, end);
        mAnimator.setDuration(animTime);
        mAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mAnimator.setRepeatMode(ValueAnimator.RESTART);
        mAnimator.setInterpolator(new LinearInterpolator());
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                xOffset = value;
                currentValue = (int) (value * 0.6);
                invalidate();
            }
        });
        mAnimator.start();
    }

 
    public void setCurrentValue(int value, int offset) {
        startAnimator(0, offset, 1000*2);
    }

}

很多进度条需要这样实现 ,如果是进度条的话,那么他的变量就是圆的y轴的位置变化,通过移动两个曲线y轴的坐标来实现这个功能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值