自定义View详解(4)
在上文中我们简单介绍了Canvas#drawCircle()
的使用方式,以及Paint#setStyle()
,Paint#setStrokeWidth()
,Paint#setColor()
等相关函数,不知道小伙伴们了解了多少?那么是不是所有的图形都能通过圆来描述呢?当然不行,那么熟悉API套路的我们就应该知道,这时候应该去看Canvas
源码中提供的公有方法是否能满足我们的需求,这样我们就会看到下表中的公有函数:
公有函数 | 函数说明 |
---|---|
drawBitmap | 绘制图片 |
drawArc | 绘制圆弧 |
drawLine | 绘制线条 |
drawOval | 绘制椭圆 |
drawPoint | 绘制点 |
drawRect | 绘制矩形 |
drawRoundRect | 绘制圆角矩形 |
drawText | 绘制字符串 |
上表中大多数函数都不止一个实现,具体的参数含义也不同。激动的你们是不是已经搬好小板凳,等着我讲解这些函数的用法及参数了?不好意思,要让你们失望了,我一向秉承,授之以鱼,不如授之以渔,所以亲们自行尝试这些函数哦,绘制结果老规矩,后台等你们哦!
接下来敲黑板,开始画重点喽,仔细排查上表中函数,思考三角形,五角形,六角形,五角星等的绘制方法。肯定有小伙伴立刻补刀,傻不傻?画线啊,拼起来不就好?那么问题来了,让你画一个红色三角形怎么搞?三条线拼起来,Paint
设置成Style.FILL
能搞定?
机智的我立马去撸了一波代码
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawLine(10,10,200,200,mPaint);
canvas.drawLine(200,200,150,200,mPaint);
canvas.drawLine(150,200,10,10,mPaint);
}
private void init(){
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.RED);
mPaint.setStyle(Style.FILL);
}
手抖一运行,秒打脸,结果是图-错误的三角
那到底要怎么整呢?Google爸爸设计API不可能没考虑到这些东东啊?不服气,接着搜源码,终于找到了一个看不懂的东东:
public void drawPath(@NonNull Path path, @NonNull Paint paint)
这个Path
到底是个什么东东,下面我们一起来学习下。
Path
什么是Path
Path
英翻汉的结果是路径,路途,也就是说Path
代表着一段可用路径。使用Path
可以构建一个路径对象,用于Canvas绘制,Path
中的相关函数及说明我们用到一个讲解一个,有兴趣的小伙伴可以自行查阅尝试,资料很多。
绘制三角形
在使用Path
定义路径时,我们首先应该为该路径指定起点,使用Path#moveTo()
方法,随后使用其他函数绘制所需路径即可,以开篇三角形为例,构建Path的代码如下:
//Path对象初始化
mPath = new Path();
//移动路径起点到(10,10)
mPath.moveTo(10,10);
//从点(10,10)绘制直线到点(200,200)
mPath.lineTo(200,200);
//从点(200,200)绘制直线到点(150,200)
mPath.lineTo(150,200);
//闭合该路径,从当前点绘制直线到起点
mPath.close();
随后使用Canvas#drawPath绘制该路径,代码如下:
//第一个参数为路径对象,第二个参数为画笔
canvas.drawPath(mPath,mPaint);
再次运行,我们可以看到界面上有一个实心红色三角形,如下图:
这里请大家自行绘制五边形,六边形。老规矩,截图甩后台。
前面小试牛刀,绘制了一个小小三角形,大家对Path
应该还是一知半解,接下来我们进一步学习如何使用Path
描述自定义View
中的不规则路径。目标下面动图:
咋一看,是不是一个头两个大,不要方,都是纸老虎,我们来一点一点分析。
动画形成过程
仔细观察上面动图,我们不难发现整个图形由四部分组成,拿出其中一部分单独分析,我们不难得到下图:
左上角这四分之一是由两条直线加四分之一圆弧组成,其中动画是由点P的位置变化形成的,P点坐标范围起于图1止于图4.
Path组成及点坐标
还是以左上角四分之一做细致分析,讲解Path的形成过程及点坐标,详细的左上角坐标标记如下图:
描述左上角的Path路径对象伪代码如下:
移动起点到点B,绘制四分之一圆,绘制直线AP,然后闭合该路径即可
进一步细化上图中辅助点,计算我们所需要的三个关键点P,A,B的坐标,细化后的分析图如下:
如上图所示我们假设要绘制的圆半径为R,那么可以得到P点所能取得的最大坐标值为(O-B1,O-A1),其中O-B1=O-A1。
由于三角形OPA是等腰三角形,所以其高线P-A1=R/2,又B1-O = P-A1,所以O-B1 = R/2
进而我们可以得到P点的取值范围为(0,0)到(R/2,R/2).
生成Path
切换坐标系到我们的View坐标系内,假设P点坐标为(x,x),x取值范围为0到R/2,从而我们可以确认得到左上角路径上的P,A,B三点坐标,其中:
A(mWidth/2,mHeight/2 - R)
B(mWidth/2 - R,mHeight/2)
P(mWidth/2 - x,mHeight/2 - x)
获得ABP三点坐标后,接下来的重点就是怎么将四分之圆加入Path
对象了,这里我们就需要用到Path#addArc()
方法了,函数声明如下:
//第一个参数为圆弧所在矩形区域,第二个参数为截图的开始角度,第三个参数为截取的角度大小
public void addArc(RectF oval, float startAngle, float sweepAngle)
画图说明如下:
一点要注意第三个参数是截取得角度大小,从水平方向开始,顺时针取正值,逆时针取负值
那么此时我们就可以确定左上角的Path
对象了,代码如下:
//清空上一次Path中存放的所有路径
mPath3.reset();
//移动路径起点到B点
mPath3.moveTo(mWidth / 2 - mRadius, mHeight / 2);
//绘制四分之一圆弧BA
mPath3.addArc(new RectF(mWidth / 2 - mRadius, mHeight / 2 - mRadius, mWidth / 2 + mRadius,
mHeight / 2 + mRadius), 180, 90);
//绘制直线AP
mPath3.lineTo(mWidth / 2 - x, mHeight / 2 - x);
//闭合曲线,默认绘制直线PB
mPath3.close();
生成动画
public void startAnimation() {
//新建ValueAnimator对象
mValueAnimator = ValueAnimator.ofFloat(0f, mRadius / 2f);
//设置动画单次时长
mValueAnimator.setDuration(5000);
//设置动画重复模式,REVERSE--反转,RESTART--重新开始
mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
//设置动画重复次数,-1 --- INFINE
mValueAnimator.setRepeatCount(-1);
mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//更新P点坐标
x = (float) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
mValueAnimator.start();
}
运行后效果如下:
作业
上面已经详细解释了左上角的绘制过程,相信机智的你已经完全懂了,那么请自行完成剩余三部分的绘制,交流群里gif甩起来。
下期预告
提前透漏个动画给你们。还是在圆上搞事情,感觉和圆杠上了。
完整代码
public class ArcView extends View {
private Paint mPathPaint;
private Path mPath;
private int mWidth;
private int mHeight;
private int mRadius = 200;
private ValueAnimator mValueAnimator;
private float x = 0f;
public ArcView(Context context) {
super(context);
init();
}
public ArcView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (w > 0 && h > 0) {
mWidth = w;
mHeight = h;
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
initPaths();
mPathPaint.setColor(Color.parseColor("#FD9A59"));
canvas.drawPath(mPath, mPathPaint);
}
private void init() {
mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPathPaint.setStyle(Style.FILL);
mPath = new Path();
}
private void initPaths() {
mPath.reset();
mPath.moveTo(mWidth / 2 - mRadius, mHeight / 2);
mPath.addArc(new RectF(mWidth / 2 - mRadius, mHeight / 2 - mRadius, mWidth / 2 + mRadius,
mHeight / 2 + mRadius), 180, 90);
mPath.lineTo(mWidth / 2 - x, mHeight / 2 - x);
mPath.close();
}
public void startAnimation() {
mValueAnimator = ValueAnimator.ofFloat(0f, mRadius / 2f);
mValueAnimator.setDuration(5000);
mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
mValueAnimator.setRepeatCount(-1);
mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
x = (float) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
mValueAnimator.start();
}
}
觉得不错的亲们动动手指分享转发下哈。