android 正五边形图表,Android 自定义View 仿蚂蚁信用分析----正多边形绘制
支付宝芝麻信用分-分析中,有个正五边形,试着做了下
效果图:
分析图:
已知半径为R,圆心点O(a,b),点A(a, c=b-R), OA=OB=R,圆心角O的度数
> 求出弦AB的长度
> 利用两点间距离公式,得到两个方程AB、OB相关的,解出y的值
> 将y代入其中一个方程,解出x的值 (我这里代入的是AB的方程)
> 利用canvas旋转,循环绘制OA、AB
package com.stone.canvaspath.zhima;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/**
* 正N边形
* author : stone
* email : aa86799@163.com
* time : 2016/11/17 14 12
*/
public class ZhimaView extends View {
private Paint mPaint;
private float mR, mCx, mCy;
private static final int mN = 9;
private static final float DEGREES_UNIT = 360 / mN; //正N边形每个角 360/mN能整除
public ZhimaView(Context context) {
this(context, null);
}
public ZhimaView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ZhimaView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
float mW = getMeasuredWidth();
float mH = getMeasuredHeight();
mCx = mW / 2;
mCy = mH / 2;
mR = Math.min(mCx, mCy) / 4 * 3;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.BLUE);
mPaint.setStyle(Paint.Style.STROKE);
float d = (float) (2 * mR * Math.sin(Math.toRadians(DEGREES_UNIT / 2)));
float c = mCy - mR;
float y = (d * d + mCy * mCy - c * c - mR * mR) / (2 * (mCy - c));
float x = (float) (mCx + Math.sqrt(-1 * c * c + 2 * c * y + d * d - y * y));
for (int i = 0; i < mN; i++) {
canvas.save();
canvas.rotate(DEGREES_UNIT * i, mCx, mCy);
canvas.drawLine(mCx, mCy, mCx, c, mPaint);
canvas.drawLine(mCx, c, x, y, mPaint);
canvas.restore();
}
}
}
简单的绘制正多边形,发现如上就可以了,但是想在各顶点外绘制文字、图片就还是要取到
具体的坐标值才行。所以用三角函数算出圆弧上的各顶点;在圆之外的就以增大半径值来计算
效果图:
最后还有个问题,就是这里默认是0度线起始绘制,如果想以任意度数起始绘制,
可以加个简单的旋转在最开始时,如:
canvas.rotate(30, mCx, mCy);
这时效果图:
现在多边形和文本一起旋转了,这就有了新的问题:如果只旋转多边形,而不旋转对应文本呢?
可以根据公式解出旋转后的点坐标
最终效果图:
android 正五边形图表,Android 自定义View 仿蚂蚁信用分析----正多边形绘制相关推荐
- Android模拟蚂蚁爬动画,Android 自定义View 仿蚂蚁信用分析(正多边形)
上一篇 我实现了正多边形的绘制,不过是用比较取巧的方式,仅能绘制出多边形,而不知道任意顶点坐标,没法再在顶点外绘制图片.文字... 支付宝芝麻信用分-分析中,有个正五边形,各顶点外还有图片与文字,想绘 ...
- Android仿支付宝UI功能开发,Android 自定义view仿支付宝咻一咻功能
支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画 还有就是这是好几 ...
- android 高仿 探探卡片滑动,Android自定义View仿探探卡片滑动效果
Android自定义View仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是RecyclerView来实现的,但是我们今天来换一种实现思路,只用一个自定义的ViewGroup来搞定这 ...
- android wear支付宝6,Android自定义View仿支付宝输入六位密码功能
跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义 ...
- android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
- Android 自定义View 仿微信好友,字母排序
一 :具体说下思路(注意:一下代码如果没有显示则访问 https://www.jianshu.com/p/2da89b56871f ) 1 :整体用到的控件,list view(recyc ...
- Android中实现Bitmap在自定义View中的放大与拖动
一基本实现思路: 基于View类实现自定义View –MyImageView类.在使用View的Activity类中完成OnTouchListener接口,实现对MotionEvent事件的监听与处理 ...
- Android软件开发之盘点自定义View界面大合集(二)
Android软件开发之盘点自定义View界面大合集(二) - 雨松MOMO的程序世界 - 51CTO技术博客 雨松MOMO带大家盘点Android 中的自定义View界面的绘制 今天我用自己写的一个 ...
- Android 雪花飘落动画效果 自定义View
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
最新文章
- 中科大京东最新成果:让AI像真人一样演讲,手势打得惟妙惟肖
- javascript 循环语句 while、do-while、for-in、for用法区别
- SpringMVC 整合新浪微博登录 Java SDK
- linux c implicit declaration of function 警告的解决方法
- 归档程序错误。在释放之前仅限于内部连接
- 关于map的一个习题,忽略大小写和标点符号单词的计数器
- C++11 并发指南一(C++11 多线程初探)
- C#类型与SQLSEVER类型对比
- JSON基础与数据解析、JSON方法、AJAX初识
- python学习笔记8-列表、集合、字典推导式
- 计算机组成原理课件ppt6,唐朔飞 计算机组成原理课件6.ppt
- C# asp.net常见编译|运行错误
- 卡巴斯基病毒库离线更新教程(转)
- 【机智云专题】①:乐鑫esp8266巧用机智云自动代码生成功能,移植加入驱动单路继电器,实现智能定时插座。(附带demo)
- PMP项目管理是什么?
- 用三色带摄像管替换电视机显像管的摄像机
- 政务智能办体验升级、乳腺癌创新药加速研发,飞桨和文心大模型驱动应用智能涌现...
- 涨点技巧:基于Yolov5的微小目标检测,多头检测头提升小目标检测精度
- 【算法学习】四 二分法查找(折半法或者折半查找)
- 自然语音处理(NLP)系列(三)——什么是序列标注?