怎么在Android中實(shí)現(xiàn)一個(gè)多邊形統(tǒng)計(jì)圖

本篇文章為大家展示了怎么在Android中實(shí)現(xiàn)一個(gè)多邊形統(tǒng)計(jì)圖，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、淶水ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的淶水網(wǎng)站制作公司

 @Override
 protected void onDraw(Canvas canvas) {
 if (!canDraw()) {
 return;
 }
 canvas.translate(width / 2, height / 2);
 computeMaxPoint();
 drawPolygon(canvas);
 drawLine(canvas);
 drawArea(canvas);
 drawText(canvas);
 }

繪制多邊形

??繪制多邊形主要用到的是Path這個(gè)東西。具體的思路就是先計(jì)算好每個(gè)點(diǎn)的位置，同Path的lineTo方法連接起來，然后繪制。

??我的做法是先算出最大的半徑（再之后還會用到，建議單獨(dú)存起來），然后根據(jù)所在層數(shù)來計(jì)算每一層的半徑，利用cos函數(shù)各sin函數(shù)計(jì)算出每一層各頂點(diǎn)的位置。

計(jì)算最大半徑并且保存頂點(diǎn)

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 width = w;
 height = h;
 maxRadius = (float) ((width / 2) * 0.8);
 postInvalidate();
 }

 /*
 計(jì)算最大半徑，之后的位置都是基于最大半徑的比例
 */
 public void computeMaxPoint() {
 maxPointXList = new ArrayList<>();
 maxPointYList = new ArrayList<>();
 for (int i = 0; i < eageCount; i++) {
 float currentAngle = i * angle - 90;
 float currentX = (float) (maxRadius * Math.cos((currentAngle / 180) * Math.PI));
 float currentY = (float) (maxRadius * Math.sin((currentAngle / 180) * Math.PI));
 maxPointXList.add(currentX);
 maxPointYList.add(currentY);
 }
 }

??注意：cos和sin都是按照弧度制計(jì)算的，要換算。

??這里解釋一下為currentAngle什么要減去90度

??按照android的坐標(biāo)系，如果不減去90度直接乘上cos的話，第一個(gè)頂點(diǎn)會默認(rèn)在中心的右側(cè)，而一般的認(rèn)知是第一個(gè)點(diǎn)在正上方，所以減去90度

按照比例和層數(shù)邊數(shù)繪制多邊形

 /*
 繪制多邊形和每一層
 */
 private void drawPolygon(Canvas canvas) {
 Path path = new Path();
 for (int i = 0; i < loopCount; i++) {
 path.reset();
 //依據(jù)最大半徑和角度來判斷每一層點(diǎn)的位置
 float rate = computeRate(i + 1, loopCount);
 for (int j = 0; j < eageCount; j++) {
 float currentX = maxPointXList.get(j) * rate;
 float currentY = maxPointYList.get(j) * rate;
 if (j == 0) {
  path.moveTo(currentX, currentY);
 } else {
  path.lineTo(currentX, currentY);
 }
 }
 path.close();
 canvas.drawPath(path, eagePaint);
 }
 }

??代碼還是很容易的吧，要是看不懂的話自己動手算算就知道了，很容易計(jì)算各個(gè)點(diǎn)的位置。

繪制連線

??由于之前保存了頂點(diǎn)的坐標(biāo)，這個(gè)就很容易了

 /*
 畫出從中心向各頂點(diǎn)的連線
 */
 private void drawLine(Canvas canvas) {
 Path path = new Path();
 for (int i = 0; i < eageCount; i++) {
  path.reset();
  path.lineTo(maxPointXList.get(i), maxPointYList.get(i));
  canvas.drawPath(path, eagePaint);
 }
 }

繪制覆蓋區(qū)域

??這個(gè)原理其實(shí)和繪制多邊形是一樣的，就是對頂點(diǎn)坐標(biāo)乘的比例發(fā)生了變化。每個(gè)方向的數(shù)值是由用戶傳遞進(jìn)來的。

 /*
 繪制個(gè)方向值覆蓋的區(qū)域
 */
 private void drawArea(Canvas canvas) {
 Path path = new Path();
 //原理就是用path根據(jù)各方向值創(chuàng)建一個(gè)封閉的區(qū)域，然后填充
 for (int i = 0; i < eageCount; i++) {
  float rate = pointValue.get(i);
  float currentX = maxPointXList.get(i) * rate;
  float currentY = maxPointYList.get(i) * rate;
  if (i == 0) {
  path.moveTo(currentX, currentY);
  } else {
  path.lineTo(currentX, currentY);
  }
 }
 path.close();
 canvas.drawPath(path, areaPaint);
 }

繪制文字

??說實(shí)話，前面的沒有什么難點(diǎn)，但是唯獨(dú)繪制文字有許多麻煩事。主要是文字是默認(rèn)自左向右的，最上面和最先面的文字倒是沒啥，左側(cè)和右側(cè)的文字就會出現(xiàn)問題了，文字會繪制到多邊形上，看起來特別難受。這里我的解決辦法就是前面圖中看到的，讓字跟著多邊形的頂點(diǎn)位置一起旋轉(zhuǎn)。

 /*
 繪制文字
 */
 private void drawText(Canvas canvas) {
 if (pointName == null) {
  return;
 }
 //繪制文字的難點(diǎn)在于無法最好的適配屏幕的位置，會發(fā)生難以控制的偏倚
 for (int i = 0; i < pointName.size(); i++) {
  //解決辦法就是讓文字在不同的角度也發(fā)生旋轉(zhuǎn)，并且在x軸上減去一定的數(shù)值來保證正確的位置
  float currentAngle = i * angle;
  //180度需要也別的處理，讓它正著顯示，不然就是倒著的
  if (currentAngle == 180) {
  float currentX = maxPointXList.get(i) * 1.1f;
  float currentY = maxPointYList.get(i) * 1.1f;
  canvas.drawText(pointName.get(i), currentX - (textPaint.getTextSize() / 4)
   * (pointName.get(i).length()), currentY, textPaint);
  } else {
  canvas.save();
  float currentX = maxPointXList.get(0) * 1.1f;
  float currentY = maxPointYList.get(0) * 1.1f;
  //旋轉(zhuǎn)畫布，達(dá)到旋轉(zhuǎn)文字的效果
  canvas.rotate(currentAngle);
  canvas.drawText(pointName.get(i), currentX - (textPaint.getTextSize() / 4)
   * (pointName.get(i).length()), currentY, textPaint);
  canvas.restore();
  }
 }
 }

到這里，整個(gè)組件就繪制完成了

額外的屬性

如果單純只是想畫出這個(gè)組件來，其實(shí)沒啥難度。我們可以在加一些別的東西讓他更加實(shí)用。

動畫效果

??利用屬性動畫的知識，我們可以做到讓中間的填充區(qū)域慢慢的擴(kuò)散出來。原理也簡單，就是把0到1用屬性計(jì)算展開，當(dāng)做一個(gè)演化的比例，讓各個(gè)方向的值乘上這個(gè)數(shù)值，繪制一個(gè)比原先覆蓋區(qū)域小的區(qū)域就可以了。

 /*
 用屬性動畫繪制組件
 */
 public void draw() {
 if (canDraw()) {
  final Float[] trueValues = pointValue.toArray(new Float[pointValue.size()]);
  ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
  valueAnimator.setDuration(1000);
  valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
   float rate = animation.getAnimatedFraction();
   for (int i = 0; i < pointValue.size(); i++) {
   pointValue.set(i, trueValues[i] * rate);
   }
   invalidate();
  }
  });
  valueAnimator.start();
 }
 }

定義xml屬性

??我們正常使用系統(tǒng)組件的時(shí)候都會寫一大堆的xml來控制我們組件的屬性，自定義View也可以嘗試這些

??首先在value下創(chuàng)建atts文件

??然后指定你想要的屬性名稱和類型

??再然后就是讓atts和我們的view聯(lián)系上。這個(gè)也簡單，仔細(xì)觀察View的構(gòu)造方法中的參數(shù)，有這么一個(gè)玩意 AttributeSet attrs

public PolygonView(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs);
 }
 public PolygonView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs);
 }

??它就是聯(lián)系xml和view的紐帶

xmlns:app="http://schemas.android.com/apk/res-auto"
<com.totoro.xkf.polygonview.PolygonView
 android:id="@+id/pv_polygon_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:areaColor="@android:color/holo_blue_light"
 app:eageColor="@android:color/black"
 app:eageCount="6"
 app:loopCount="4"
 app:textColor="@android:color/black" />

public void init(Context context, AttributeSet attrs) {
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Polygon);
 initPaint();
 setTextColor(typedArray.getColor(R.styleable.Polygon_textColor, Color.BLACK));
 setLoopCount(typedArray.getInteger(R.styleable.Polygon_loopCount, 0));
 setEageCount(typedArray.getInteger(R.styleable.Polygon_eageCount, 0));
 setAreaColor(typedArray.getColor(R.styleable.Polygon_areaColor, Color.BLUE));
 setEageColor(typedArray.getColor(R.styleable.Polygon_eageColor, Color.GRAY));
 typedArray.recycle();
 }

xmlns:app=http://schemas.android.com/apk/res-auto

上述內(nèi)容就是怎么在Android中實(shí)現(xiàn)一個(gè)多邊形統(tǒng)計(jì)圖，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：怎么在Android中實(shí)現(xiàn)一個(gè)多邊形統(tǒng)計(jì)圖
轉(zhuǎn)載來源：http://muchs.cn/article22/pgohcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站收錄、域名注冊、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)