android开发自定义View(四)仿掌上英雄联盟能力值分析效果

最新推荐文章于 2019-01-24 11:21:09 发布
最新推荐文章于 2019-01-24 11:21:09 发布
阅读量5.3k 收藏 19
点赞数 5
分类专栏： android 文章标签： android android开发 canvas 英雄联盟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/as7210636/article/details/52692102
版权

本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

原始图效果

这里写图片描述



模仿效果

PNG
这里写图片描述

GIF
这里写图片描述

流程

  1. 绘制中心线，用于计算外层多边形各点的坐标
  2. 绘制最外层多边形
  3. 分析原型图算出每个多边形之间的间距
  4. 绘制里三层多边形
  5. 绘制字体

  6. 根据进度值绘制等级进度


难点

关键在于坐标的计算(三角函数的运用，哈哈)，与旋转角度的掌控。



绘制中心线

/**
     * 绘制中心线
     *
     * @param canvas
     */
    private void center(Canvas canvas) {
        //绘制七边形中心线
        canvas.save();//保存当前状态
        canvas.rotate(0, center, center);
        float startY = getPaddingTop() + 2 * str_rect.height();
        float endY = center;
        float du = (float) (360 / 7 + 0.5);
        for (int i = 0; i < 7; i++) {
            canvas.drawLine(center, startY, center, endY, center_paint);
            canvas.rotate(du, center, center);

        }
        canvas.restore();//恢复之前状态
    }

这里写图片描述
先计算出圆心到A点的坐标，
在计算出旋转的角度（360/7），
然后旋转7次Canvas，绘制7条中心线。
为了加深显示效果，先绘制一个绿色背景作参考。
这里写图片描述

绘制最外层正七边形

这里写图片描述
各坐标点的计算主要用到了三角函数。

A点

x ： 对应圆心center。
y ：paddingTop+2个字体高度的距离

B点
这里写图片描述

x ： A点的x坐标+EB

利用三角函数公式，BE=sin(AB的夹角)*OB

这里有个坑，Math.sin(x)里的x是弧度，而不是角度。

如果要计算角度则需要加上Math.sin(Math.toRadians(x))

center+ Math.sin(Math.toRadians(360/7)) *one_radius

y ：A点的y坐标+AE

同理AE=OA-OE,OE=cos(AB的夹角)*OB

OE=cos(AB的夹角)*OB

Math.abs(Math.cos(Math.toRadians(360/7)) *one_radius

由于余弦有正负值，这里要取绝对值

AE=OA-OE

(getPaddingTop() +2*str_rect.height() +one_radius

  • Math.abs(Math.cos(Math.toRadians(360/7)) *one_radius))

C点
这里写图片描述
x :圆心X+FC
Math.sin(Math.toRadians(360/7+360/7/2)) *one_radius

y: 圆心Y+OF
(Math.cos(Math.toRadians(360/7+360/7/2)) *one_radius) +center

D点
这里写图片描述

x :圆心x+HD

center+ Math.sin(Math.toRadians(360/7/2)) *one_radius

y：圆心y+OH

Math.cos(Math.toRadians(360/7/2)) *one_radius) +center

右边点绘制完后，左边点自然就简单了，y位置一样，x位置只需要把相加改成相减即可。

这里写图片描述


绘制内三层正七边形

绘制完最外层七边形后，剩下来的就好办了，只需要计算出每个七边形的间距即可。
由原型图分析，每一个正七边形占半径的四分之一。

 /**
     * 绘制第二层多边形
     *
     * @param canvas
     */
    private void twoPolygons(Canvas canvas) {
        distance = one_radius / 4;
        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance);                           //起始点
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.close();
        canvas.drawPath(path, two_paint);
    }

    /**
     * 绘制第三层多边形
     *
     * @param canvas
     */
    private void threePolygons(Canvas canvas) {
        distance = one_radius / 2;
        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance);                           //起始点
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));

        path.close();
        canvas.drawPath(path, three_paint);
    }

    /**
     * 绘制最内层多边形
     *
     * @param canvas
     */
    private void fourPolygons(Canvas canvas) {
        distance = one_radius / 2 + one_radius / 4;
        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance);                           //起始点
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));

        path.close();
        canvas.drawPath(path, four_paint);
    }

去掉绿色背景后，显示的效果
这里写图片描述


绘制字体

根据最外层多边形各点坐标以及字体的长度高度 微调。


privateRectstr_rect;//字体矩形

String[]str= {"击杀","生存","助攻","物理","魔法","防御","金钱"};

 /**
     * 绘制字体
     *
     * @param canvas
     */
    private void PaintFout(Canvas canvas) {
        canvas.drawText(str[0], center - str_rect.width() / 2, (float) (getPaddingTop() + 1.5 * str_rect.height()), str_paint);
        canvas.drawText(str[1], (float) (center + Math.sin(Math.toRadians(360 / 7)) * one_radius + str_rect.height() / 2), (float) ((getPaddingTop() + 2 * str_rect.height() + one_radius - Math.abs(Math.cos(Math.toRadians(360 / 7)) * one_radius))), str_paint);
        canvas.drawText(str[2], (float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius + str_rect.height() / 2), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius) + center + str_rect.height() / 2, str_paint);
        canvas.drawText(str[3], (float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * one_radius - str_rect.height() / 2 + str_rect.width() / 2), (float) ((Math.cos(Math.toRadians(360 / 7 / 2)) * one_radius) + center + str_rect.height()), str_paint);
        canvas.drawText(str[4], (float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * one_radius + str_rect.height() / 2 - str_rect.width() * 1.5), (float) ((Math.cos(Math.toRadians(360 / 7 / 2)) * one_radius) + center + str_rect.height()), str_paint);
        canvas.drawText(str[5], (float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius - str_rect.height() / 2 - str_rect.width()), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius) + center + str_rect.height() / 2, str_paint);
        canvas.drawText(str[6], (float) (center - Math.sin(Math.toRadians(360 / 7)) * one_radius - str_rect.height() / 2 - str_rect.width()), (float) ((getPaddingTop() + 2 * str_rect.height() + one_radius - Math.abs(Math.cos(Math.toRadians(360 / 7)) * one_radius))), str_paint);

    }

这里写图片描述


绘制各能力值进度

 /**
     * 绘制等级进度
     */
    private void PaintRank(Canvas canvas) {

        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + f1);                           //起始点
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - f2)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - f2))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f3)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f3)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - f4)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - f4)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - f5)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - f5)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f6)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f6)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - f7)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - f7))));
        path.close();
        canvas.drawPath(path, mPaint);

    }

这里写图片描述

感兴趣的同学可直接到github下载源码查看。
如果你觉得还不错，可以给个star，支持下，谢谢了！
https://github.com/jiangzehui/polygonsview

江城北望
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
Android自定义圆形能力图（天赋，能力分布图）
08-20
Android自定义圆形能力图（天赋，能力分布图），类似选手能力分布，个人天赋分布图。
自定义View之LOL能力七星图
Fu
10-26 6203
掌盟中能力七星图截图仿照完成的效果截图基本上模仿的与原控件一致了，就是文字与顶点的距离有一些小瑕疵，这块还需需要优化。本文目的 可以使读者： 1. 巩固自定义控件的基础知识以及正多边形的绘制，熟悉绘制流程。 2. 复习了高中的一点数学几何知识。 源码地址 https://github.com/qq908323236/AbilityMapView 整体思路 通过数学几何知识计算
Android 能力图实现（超强）
kimimoko的博客
01-24 602
文章目录效果思路实现使用写在最后 效果 国际惯例，效果奉上 思路 首先确定的是所有的参数，三个画笔（画线，画图，画字） 确定画出的形状参数，几边形、几层图形（上图一共为4层显示）、最外圈的半径、每层图形的角度和半径就可以算出来了； 确定该如何画出点（也就是能力值） 最后绘制文字 Tips: 好的封装可以实现自定义设置View的各种属性； 实现 确定参数 在构造函数中实现了三个方法，分别初...
Android自定义View---掌上英雄联盟能力分析简单实现
哈怂的博客
11-30 1270
模仿掌上英雄联盟能力分析效果  原图：                                                                  实现：                                     方法流程： 绘制中心线，用于计算外层多边形各点的坐标绘制最外层多边形分析原型图算出每个多边形之间的间距绘制里三层多边形
Android自定义View仿微信LetterView效果
01-20
public class LetterView extends View { private String TAG = LetterView.class.getSimpleName(); //A,B,C....Z,# public List<String> letters; private Paint mPaint; private int selectPosition = -1; ...
Android自定义View控件实现刷新效果
01-05
三种得到LinearInflater的方法 a. LayoutInflater inflater = getLayoutInflater(); b....(LayoutInflater)context.getSystemService (Context.LAYOUT_INFLATER_...效果图: 点击一下换颜色 onDraw画完图后,给控件设置点
Android自定义View仿微博运动积分动画效果
01-21
自定义View一直是自己的短板，趁着公司项目不紧张的时候，多加强这方面的练习。这一系列文章主要记录自己在自定义View的学习过程中的心得与体会。 刷微博的时候，发现微博运动界面，运动积分的显示有一个很好看的...
Android自定义View实现打字机效果
01-20
一、先来看看效果演示 二、实现原理： 这个其实不难实现，通过一个定时器不断调用TextView的setText就行了，在setText的时候播放打字的音效。 具体代码如下： import java.util.Timer; import java.util....
Android 自定义View（四）实现股票自选列表滑动效果
06-06
博文地址：https://blog.csdn.net/jaynm/article/details/106576284
android自定义view多边形战斗力分析图任意多边形
09-14
android自定义view多边形战斗力分析图，支持任意多边形，可扩展
仿掌上英雄联盟能力值图形绘制
icuihai的博客
11-08 7139
一，前沿 相信玩撸啊撸的撸友们一定记得掌上英雄联盟App的能力值吧~~ 好吧，不记得没关系我来给大家上张图！！ 所以今天呢我就抽空模仿了一下： 照例线来张GIF，有图有真相 下面是我的微博账号希望可以关注哈： Email:[email protected]. Github: https://github.com/icuihai. weibo:http://wei
Android仿掌上英雄联盟首页，实现折叠效果
wapchief的博客
07-04 2504
不单单是掌上英雄联盟，像微博发现页也用了这样的布局，当滑动到一定距离的时候，自动隐藏轮播图，或者标题栏下面的布局。并且使tablayout置顶。与之相似的还有简书的个人页面也是这样的布局。 图片处理的有些不清楚。建议下载安装包自行查看效果 * 安装包下载-2.83M首页大概分为几个部分 状态栏 标题栏 轮播图 切换的Tab 资讯列表 资讯列表头部推荐 刷新控件 整个页面是一个Activity，最
仿掌上英雄联盟能力值分析效果
郭霖
11-07 1084
教你如何绘制超酷的自定义多边形。
自定义view（画一个LOL能力图表）
dream_caoyun的博客
01-10 1740
在介绍下列的自定义图表的时候，我们先说明一下绘图的三大要素，canvas 翻译叫画布，paint叫画笔，Path对象叫路径， 一、canvas属性：       ①：canvas画布本身是有一个坐标系的，它决定了view在Windows层的什么位置，其坐标原点在Windows层的左上角，不同于我们代数几何学中的笛卡尔坐标系，Windows层的向右向下移动是累加正数的也就是收，以屏幕左上角为原点
Android实现掌盟战绩图（矩形进度条）
梁超杰
12-13 2137
掌上英雄联盟App有一个页面我挺感兴趣的，就是荣誉详情页面，上面记录了你玩游戏所获得所有荣誉和战绩（如下图所示）尤其是里面的胜54% 1193场 这个矩形进度条越看越喜欢，就想自己也自定义一个view，说干就干。下面是我的粗糙的实现：看起来还是有点差距，不过功能是和原图是一样的，大家先仔细看原图里面的细节然后下面详细我分享下实现过程：思路： View包括三部分，最底部是灰色外边框，中间是蓝色的梯
android开发之自定义Seekbar滑动条，文字跟随滑动按钮一起滑动
江城北望
08-10 8569
由于工作需要做出此效果，在网上没找到特别合适的，所以自己自定义写了一个。先上效果图思路：原始的seekbar只有滑动条并没有下方的提示文字，所以我们必须要继承Seekbar重写这个控件。代码：在values文件夹下新建attrs.xml,用于设置跟随滑动按钮的文字大小，颜色，背景。<declare-styleable name="MySeekBar"> <attr name="te
Android 自定义View
最新发布
05-19
Android 自定义 View 是一种在 Android 应用程序中创建自定义用户界面元素的方式。它允许你创建独特的 UI 元素，以便更好地满足应用程序的需求。自定义 View 在 Android 应用程序中可以用于很多方面，如绘制图形、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值