怎么查看网站disallow,有公网ip 如何做一网站,什么网站可以买世界杯,重庆建设传动科技有限公司在上文中我们简单介绍了Canvas#drawCircle()的使用方式#xff0c;以及Paint#setStyle(),Paint#setStrokeWidth(),Paint#setColor()等相关函数#xff0c;不知道小伙伴们了解了多少#xff1f;那么是不是所有的图形都能通过圆来描述呢#xff1f;当然不行#xff0c;那么熟…在上文中我们简单介绍了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什么是PathPath英翻汉的结果是路径路途也就是说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然后闭合该路径即可复制代码进一步细化上图中辅助点计算我们所需要的三个关键点PAB的坐标细化后的分析图如下如上图所示我们假设要绘制的圆半径为R那么可以得到P点所能取得的最大坐标值为(O-B1,O-A1)其中O-B1O-A1。由于三角形OPA是等腰三角形所以其高线P-A1R/2,又B1-O P-A1,所以O-B1 R/2进而我们可以得到P点的取值范围为0,0到R/2,R/2.生成Path切换坐标系到我们的View坐标系内假设P点坐标为xx,x取值范围为0到R/2,从而我们可以确认得到左上角路径上的PAB三点坐标其中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(); }}复制代码觉得不错的亲们动动手指分享转发下哈。转载于:https://juejin.im/post/5bc85103e51d450e925290d3
