該控件效果基於PullZoomView源碼改動的而來,感謝Frank-Zhu的開源代碼.該控件具有下拉放大背景圖和貝塞爾曲線的效果.
github:https://github.com/X-FAN/PullBezierZoomView 歡迎star
我主要寫了一個自定義的貝塞爾曲線的效果的控件並整合到了Frank-Zhu的項目中的一個子項中.
這裏面有個小數學知識的求解,因爲效果要貝賽爾曲線的曲線頂點要恰好在控件底部邊界的中點.所以我們是知道ABC三點,去求貝塞爾曲線的控制點.具體求解過程就不分析了,大家google二階貝塞爾曲線的公式,很容易就可以推算出來.
源碼如下:
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”屬性,只要改變控件的高度,就具有了放大縮小的效果.不用自己寫額外的代碼,確實很方便.
效果圖: