前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >PullBezierZoomView 一个具有贝塞尔曲线下拉效果的自定义view

PullBezierZoomView 一个具有贝塞尔曲线下拉效果的自定义view

作者头像
夏洛克的猫
发布2018-10-18 14:23:18
4650
发布2018-10-18 14:23:18
举报
文章被收录于专栏:移动开发移动开发

该控件效果基于PullZoomView源码改动的而来,感谢Frank-Zhu的开源代码.该控件具有下拉放大背景图和贝塞尔曲线的效果.

github:https://github.com/X-FAN/PullBezierZoomView 欢迎star

我主要写了一个自定义的贝塞尔曲线的效果的控件并整合到了Frank-Zhu的项目中的一个子项中.

这里面有个小数学知识的求解,因为效果要贝赛尔曲线的曲线顶点要恰好在控件底部边界的中点.所以我们是知道ABC三点,去求贝塞尔曲线的控制点.具体求解过程就不分析了,大家google二阶贝塞尔曲线的公式,很容易就可以推算出来.

这里写图片描述
这里写图片描述

源码如下:

代码语言:javascript
复制
public class BezierView extends View {

    private int mWidth = 500;
    private int mHeight = 500;
    private float mMaxHeight = Integer.MAX_VALUE;
    private float mY = 0;

    private Paint mPaint;
    private Path mPath;


    public BezierView(Context context) {
        this(context, null);
    }

    public BezierView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BezierView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.WHITE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;

        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            width = Math.min(mWidth, widthSize);
        } else {
            width = mWidth;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            height = Math.min(mHeight, heightSize);
        } else {
            height = mHeight;
        }
        setMeasuredDimension(width, height);
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();//绘制的主要逻辑代码
        mPath.moveTo(0, mHeight - mY);
        mPath.quadTo(mWidth / 2, mHeight + mY, mWidth, mHeight - mY);
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);
        mPath.close();
        canvas.drawPath(mPath, mPaint);
    }

    public void setArcHeight(float height) {
        if (Math.abs(height) < mMaxHeight) {
            mY = height;
            invalidate();
        }
    }

    public float getArcHeight() {
        return mY;
    }

    public void setColor(int color) {
        mPaint.setColor(color);
    }

    public void setMaxHeight(float height) {
        mMaxHeight = height;
    }

这里提下Frank-Zhu的项目中放大缩小功能的实现是相当的聪明,看了源码发现他是利用ImagView中的scaleType=”centerCrop”属性,只要改变控件的高度,就具有了放大缩小的效果.不用自己写额外的代码,确实很方便.

效果图:

这里写图片描述
这里写图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年09月13日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档