我们首先看下效果
FlaskView
FlaskView
画瓶子
首先，创建一个自定义view，我们知道，在view的大小发生改变后，会回调接口
/**
* This is called during layout when the size of this view has changed. If
* you were just added to the view hierarchy, you're called with the old
* values of 0.
*
* @param w Current width of this view.
* @param h Current height of this view.
* @param oldw Old width of this view.
* @param oldh Old height of this view.
*/
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
}
因此，我们可以在该方法里面，取得view的宽高后进行瓶子的初始化，大概的思路是：
- 计算瓶底圆半径大小
- 计算瓶颈高度大小
- 计算瓶盖高度大小
- path添加瓶底圆轨迹
- path添加瓶颈轨迹
- path添加瓶盖轨迹
在Android中，默认的0°为数学上圆的90°，这里不明白的请百度
关于瓶底扇形圆弧，这里测试得出取-70° 到 250°，即瓶底圆和屏颈相交的两个点，为比较美观的，因此这里取了这个角度。
关于path.addArc，首先这里的参数代表
- oval 圆弧形状边界，可以当做是一个矩形边界
- startAngle 起始角度
- sweepAngle 旋转角度(注意，这里不是最终的角度，而是要旋转的角度)
/**
* Add the specified arc to the path as a new contour.
*
* @param oval The bounds of oval defining the shape and size of the arc
* @param startAngle Starting angle (in degrees) where the arc begins
* @param sweepAngle Sweep angle (in degrees) measured clockwise
*/
public void addArc(RectF oval, float startAngle, float sweepAngle) {
addArc(oval.left, oval.top, oval.right, oval.bottom, startAngle, sweepAngle);
}
详细可查看以下代码注释
//获取view的中心点
float centerX = w / 2;
float centerY = h / 2;
//瓶底圆半径为view的宽度的1/5
float flaskBottomCircleRadius = w / 5f;
//瓶颈高度为半径的2/3
float neckHeight = flaskBottomCircleRadius * 2f / 3;
//瓶盖高度为瓶颈高度的3/10
float headHeight = 0.3f * neckHeight;
//重置path
mFlaskPath.reset();
//计算瓶子在view中的中心点y坐标
float flaskCenterY = centerY + (neckHeight + headHeight) / 2;
//**********************************************************瓶底部分******************************************************
//瓶底和瓶颈的左边和右边的相交的两个点的坐标
float[] leftEndPos = new float[2];
float[] rightEndPos = new float[2];
//瓶底圆底部点的坐标
float[] bottomPos = new float[2];
//计算三个点的坐标
leftEndPos[0] = (float) (flaskBottomCircleRadius * Math.cos(250 * Math.PI / 180f) + centerX);
leftEndPos[1] = (float) (flaskBottomCircleRadius * Math.sin(250 * Math.PI / 180f) + flaskCenterY);
rightEndPos[0] = (float) (flaskBottomCircleRadius * Math.cos(-70 * Math.PI / 180f) + centerX);
rightEndPos[1] = (float) (flaskBottomCircleRadius * Math.sin(-70 * Math.PI / 180f) + flaskCenterY);
bottomPos[0] = (float) (flaskBottomCircleRadius * Math.cos(90 * Math.PI / 180f) + centerX);
bottomPos[1] = (float) (flaskBottomCircleRadius * Math.sin(90 * Math.PI / 180f) + flaskCenterY);
//计算出圆弧所在的区域
RectF flaskArcRect = new RectF(centerX - flaskBottomCircleRadius, flaskCenterY - flaskBottomCircleRadius,
centerX + flaskBottomCircleRadius, flaskCenterY + flaskBottomCircleRadius);
//添加底部圆弧轨迹
mFlaskPath.addArc(flaskArcRect, -70, 320);
//***********************************************************************************************************************
//首先将path移至左边相交点
mFlaskPath.moveTo(leftEndPos[0], leftEndPos[1]);
//添加左边的瓶颈线
mFlaskPath.lineTo(leftEndPos[0], leftEndPos[1] - neckHeight);
//通过贝塞尔曲线添加左边瓶盖轨迹
mFlaskPath.quadTo(leftEndPos[0] - flaskBottomCircleRadius / 8, leftEndPos[1] - neckHeight - headHeight / 2,
leftEndPos[0], leftEndPos[1] - neckHeight - headHeight);
//移动至右边瓶盖定点
mFlaskPath.lineTo(rightEndPos[0],rightEndPos[1] - neckHeight - headHeight);
//通过贝塞尔曲线添加右边瓶盖轨迹
mFlaskPath.quadTo(rightEndPos[0] + flaskBottomCircleRadius / 8, rightEndPos[1] - neckHeight - headHeight / 2,
rightEndPos[0], rightEndPos[1] - neckHeight);
//添加右边的瓶颈线
mFlaskPath.lineTo(rightEndPos[0], rightEndPos[1]);
View的onDraw中描绘瓶子
canvas.drawPath(mFlaskPath, mStrokePaint);
画水位
根据以上代码，我们已经计算获得了整个瓶子的path，那么我们如何去计算和画水位呢？
- 计算瓶子path所占的区域
- 对整个瓶子的path进行canvas裁剪
我们可以通过path.computeBounds()计算出瓶子所占的整个区域
mFlaskPath.computeBounds(mFlaskBoundRect, false);
mFlaskBoundRect.bottom -= (mFlaskBoundRect.bottom - bottomPos[1]);
但是我们这里为什么还要减去一个差值呢？
这是因为，path.addArc()后，如果圆被截断即addArc的并不是一个完整的圆(我们这里瓶底就是一个弧度圆，瓶底与瓶颈之间的交点使瓶底圆截断)，会导致path.computeBounds()计算出来的区域多出来一定的空间，这里贴两张示例图：
以下为不减去该差值的效果：
FlaskView
以下为减去该差值的效果：
FlaskView
计算出瓶子的区域后，我们就可以获取水位的区域了
mWaterRect.set(mFlaskBoundRect.left, mFlaskBoundRect.bottom - mFlaskBoundRect.height() * mWaterHeightPercent,mFlaskBoundRect.right, mFlaskBoundRect.bottom);
利用canvas的裁剪功能，进行水位的绘制
//裁剪整个瓶子的画布
canvas.clipPath(mFlaskPath);
//画水位
canvas.drawRect(mWaterRect, mWaterPaint);
画水泡
水泡生成和描绘的思路
- 根据水位区域，在水位底部，随机产生水泡
- 产生水泡后，将该水泡记录下来，并且根据一个speed进行位移
- 当水泡离开水位区域，将其在记录中移除
private void createBubble() {
//若水泡数量达到上限或者水位区域为空的时候，不产生水泡
if (mBubbles.size() >= mBubbleMaxNumber
|| mWaterRect.isEmpty()) {
return;
}
//根据时间间隔，判断是否已到达水泡产生的时间
long current = System.currentTimeMillis();
if ((current - mBubbleCreationTime) < mBubbleCreationInterval){
return;
}
mBubbleCreationTime = current;
//以下代码为随机计算水泡坐标 + 半径+ 速度
Bubble bubble = obtainBubble();
int radius = mBubbleMinRadius + mOnlyRandom.nextInt(mBubbleMaxRadius - mBubbleMinRadius);
bubble.radius = radius;
bubble.speed = mBubbleMinSpeed + mOnlyRandom.nextFloat() * mBubbleMaxSpeed;
bubble.x = mWaterRect.left + mOnlyRandom.nextInt((int) mWaterRect.width()); //random x coordinate
bubble.y = mWaterRect.bottom - radius - mStrokeWidth / 2; //the fixed y coordinate
mBubbles.add(bubble);
}
利用canvas的裁剪功能，进行水泡的绘制
//裁剪水位画布
canvas.clipRect(mWaterRect);
//描绘水泡
drawBubbles(canvas);
优化
我们知道，在进行频繁的创建水泡的时候，如果每次都创建新对象的话， 可能会增加不必要的内存使用，而且很容易引起频繁的gc，甚至是内存抖动。
因此这里我增加了一个回收功能
//首先判断栈中是否存在回收的对象，若存在，则直接复用，若不存在，则创建一个新的对象
private Bubble obtainBubble(){
if (mRecycler.isEmpty()){
return new Bubble();
}
return mRecycler.pop();
}
//回收到一个栈里面，若这个栈数量超过最大可显示数量，则pop
private void recycle(Bubble bubble){
if (bubble == null){
return;
}
if (mRecycler.size() >= mBubbleMaxNumber){
mRecycler.pop();
}
mRecycler.push(bubble);
}
