2. 程式人生 > >Android實現蜘蛛網圖繪製

Android實現蜘蛛網圖繪製

阿新 • • 發佈：2018-12-25

先看看效果圖,別讓文字把你們嚇跑了.

下面開始講解一下這個效果圖的實現過程!!!!

首先,講解一下思路:

1.繪製網格(4個六邊形)

2.繪製6條軸

3.繪製頂點

4.根據頂點座標繪製path

5.利用隨機函式隨機生成一組數值並展示

思路就是這些,在知道怎麼去完成這件事件後,我們還需要知道完成這件事件需要的準備工作,接下來就說說一些準備工作.

準備工作:

1.對Android座標軸的理解

2.對Canvas操作有一定的瞭解

3.對Path的繪製有一定了解

4.初中數學知識

我們依次道來~

Android系統中的座標粗略概念

在數學概念中,我們的座標軸是以水平向右延伸的線條為x軸,以豎直向上延伸的線條為y軸,如圖所示:

在Android中,座標原點位於螢幕的左上角,水平向右為x軸,豎直向下為y軸,如圖中圖1所示,因此我們需要將Android的座標系轉換成我們熟悉的數學中的座標系的樣子來進行繪圖操作,這樣理解起來就不會吃力.

Canvas的基本功能

Canvas翻譯過來是"帆布,畫布"之意,好比繪畫中的畫板上的紙.因此我們可以在上面自有發揮我們想要畫的內容,在生活中,除了畫紙,還需要畫筆來進行繪畫,而畫筆有不同顏色,不同粗細的畫筆,Android繪圖也一樣,需要畫筆來繪製,即Paint,同理,Paint也可以根據自己需要進行顏色設定,粗細設定等等.有了畫筆之後我們就可以盡情的繪製了,在小學,我們在美術課堂上是從基本的線條,基本圖形開始學習畫畫,這裡也一樣,因此canvas可以繪製

點:

drawPoint(...);

線:

drawLine(...);

矩形:

drawRect(...);

圓形

drawCircle(...);

三角形:

drawArc(...);

等等.還有一個路徑繪製drawPath(...),我們這裡只做一些基本的方法講解,更詳細的Canvas用法可以自行百度.

Path

翻譯過來即為"路徑",我們知道,兩點可以確定一條線,Path也不例外,因此就有了moveTo(int,int),lineTo(int,int)等等方法

在大概知道這些準備工作後,我們還需要用到初中所學的正餘弦函式來進行座標計算.在瞭解這些準備工作和思路之後,我們來正式進行程式碼編寫吧!

 

第一步:

我們需要對對應的"畫板"和"畫筆"等進行宣告並初始化

// 畫筆物件
    private Paint mPaint;

    // 繪製6條座標軸
    private Path mPath;

    // view寬度
    private int mWidth;

    // view高度
    private int mHeight;
    /**
     * 範圍在(0,400],預設數值
     */
    private int[] values = {100, 150, 200, 150, 300, 400};
/**
     * 初始化畫筆相關
     * @param context 上下文
     * @param attrs 屬性
     */
    private void init(Context context, AttributeSet attrs) {
        // 例項化畫筆
        mPaint = new Paint();

        // 設定畫筆樣式為描邊模式
        mPaint.setStyle(Paint.Style.STROKE);

        // 開啟抗鋸齒
        mPaint.setAntiAlias(true);

        // 例項化座標軸path
        mPath = new Path();

        // 移動至座標原點
        mPath.moveTo(0, 0);

    }


第二步:將Android系統中的座標系轉換成我們熟悉的數學座標系,如下圖,

// 設定畫筆顏色為藍色
        mPaint.setColor(Color.BLUE);

        // 設定畫筆寬度為1
        mPaint.setStrokeWidth(1);

        // 移動畫布到螢幕中心
        canvas.translate(mWidth / 2, mHeight / 2);

        // 第1次儲存畫布在螢幕中心畫布狀態,restoreCount為0
        canvas.save();

        // 座標以X軸翻轉
        canvas.scale(1, -1);

        // 第2次,儲存座標以x軸翻轉的畫布狀態,restoreCount為1
        canvas.save();


 

第三步:繪製網格:

// 繪製網路
    private void drawNet(Canvas canvas) {
        // 第2-5儲存旋轉後的線條狀態
        canvas.save();
        for (int i = 0; i < 5; i++) {
            drawOneNet(canvas, i * 100);
            if (i == 4) {
                drawLines(canvas, i * 100);
            }
        }
    }

/**
     * 繪製網格
     * @param canvas
     * @param width
     */
    private void drawOneNet(Canvas canvas, int width) {
        int height = (int) (width * Math.cos(Math.toRadians(30)));
        for (int i = 0; i < 6; i++) {
            canvas.restore();
            canvas.drawLine(-width / 2, height, width / 2, height, mPaint);
            canvas.rotate(60, 0, 0);
            canvas.save();
        }
    }

/**
     * 繪製線條
     *
     * @param canvas
     */
    private void drawLines(Canvas canvas, int width) {
        for (int i = 0; i < 6; i++) {
            canvas.restore();
            if (i == 0) {
                canvas.rotate(30, 0, 0);
            } else {
                canvas.rotate(60, 0, 0);
            }
            mPath.lineTo(0, width);
            canvas.drawPath(mPath, mPaint);
            canvas.save();
        }
    }

到這裡我們可以得到如果效果:

好的,有點樣子了,繼續往下看.

 

第四步:繪製頂點

/**
     * 繪製素所有座標頂點
     *
     * @param canvas
     */
    private void drawPoints(Canvas canvas, int[] values) {
        Point[] points = new Point[values.length];
        // 繪製頂點
        for (int i = 0; i < values.length; i++) {
            Point point = getRotatePoint(i, values[i]);
            points[i] = point;
            drawPoint(point, canvas);
        }

    }


第五步:連線各個頂點

/**
     * 連線各個頂點
     *
     * @param canvas 畫筆工具
     * @param points 頂點
     */
    private void point2Line(Canvas canvas, Point[] points) {
        canvas.restoreToCount(1);
        Path path = new Path();
        Paint paint = new Paint();
        paint.setColor(0x7f1aaf03);// 50%的透明度的綠色
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(4);

        path.moveTo(points[0].getX(), points[0].getY());
        for (int i = 1; i < points.length; i++) {
            path.lineTo(points[i].getX(), points[i].getY());
        }
        // 閉合線路
        path.close();
        canvas.drawPath(path, paint);
    }

這樣我們就大功告成了!


 

下面貼上完整程式碼

MainActivity

public class MainActivity extends AppCompatActivity {

    private Button mBtnStart;
    private PathView mPathView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPathView = (PathView) findViewById(R.id.pathView);
        mBtnStart = (Button) findViewById(R.id.btn_start);
        mBtnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int[] values = rand();
                mPathView.setValues(values);
            }
        });
    }

    private int[] rand() {
        int[] values = new int[6];
        for (int i = 0; i < 6; i++) {
            int value = new Random().nextInt(400)%(301) + 100;
            values[i] = value;
        }
        return values;
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    >

    <com.android.anqiansong.pathdemo.PathView
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:id="@+id/pathView" />
    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="切換"
        />


</LinearLayout>

PathView

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;


/**
 * path學習
 */

public class PathView extends View {

    // 畫筆物件
    private Paint mPaint;

    // 繪製6條座標軸
    private Path mPath;

    // view寬度
    private int mWidth;

    // view高度
    private int mHeight;
    /**
     * 範圍在(0,400],預設數值
     */
    private int[] values = {100, 150, 200, 150, 300, 400};

    public PathView(Context context) {
        super(context);
        init(context, null);
    }

    public PathView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public PathView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    public PathView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }

    /**
     * 初始化畫筆相關
     * @param context 上下文
     * @param attrs 屬性
     */
    private void init(Context context, AttributeSet attrs) {
        // 例項化畫筆
        mPaint = new Paint();

        // 設定畫筆樣式為描邊模式
        mPaint.setStyle(Paint.Style.STROKE);

        // 開啟抗鋸齒
        mPaint.setAntiAlias(true);

        // 例項化座標軸path
        mPath = new Path();

        // 移動至座標原點
        mPath.moveTo(0, 0);

    }


    /**
     * 先繪製網格
     * 其次,繪製5條直線,並設定值,旋轉度數,計算旋轉後頂點的座標
     * 第三,根據頂點繪製path
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 設定畫筆顏色為藍色
        mPaint.setColor(Color.BLUE);

        // 設定畫筆寬度為1
        mPaint.setStrokeWidth(1);

        // 移動畫布到螢幕中心
        canvas.translate(mWidth / 2, mHeight / 2);

        // 第1次儲存畫布在螢幕中心畫布狀態,restoreCount為0
        canvas.save();

        // 座標以X軸翻轉
        canvas.scale(1, -1);

        // 第2次,儲存座標以x軸翻轉的畫布狀態,restoreCount為1
        canvas.save();

        // 繪製網格
        drawNet(canvas);

        // 繪製所有座標頂點
        drawPoints(canvas, values);

    }


    /**
     * 動態設定值
     *
     * @param values 待展示值,每個座標不能超過400
     */
    public void setValues(int[] values) {
        this.values = values;
        invalidate();// 重新繪製
    }

    /**
     * 連線各個頂點
     *
     * @param canvas 畫筆工具
     * @param points 頂點
     */
    private void point2Line(Canvas canvas, Point[] points) {
        canvas.restoreToCount(1);
        Path path = new Path();
        Paint paint = new Paint();
        paint.setColor(0x7f1aaf03);// 50%的透明度的綠色
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(4);

        path.moveTo(points[0].getX(), points[0].getY());
        for (int i = 1; i < points.length; i++) {
            path.lineTo(points[i].getX(), points[i].getY());
        }
        // 閉合線路
        path.close();
        canvas.drawPath(path, paint);
    }

    // 繪製網路
    private void drawNet(Canvas canvas) {
        // 第2-5儲存旋轉後的線條狀態
        canvas.save();
        for (int i = 0; i < 5; i++) {
            drawOneNet(canvas, i * 100);
            if (i == 4) {
                drawLines(canvas, i * 100);
            }
        }
    }

    /**
     * 繪製素所有座標頂點
     *
     * @param canvas
     */
    private void drawPoints(Canvas canvas, int[] values) {
        Point[] points = new Point[values.length];
        // 繪製頂點
        for (int i = 0; i < values.length; i++) {
            Point point = getRotatePoint(i, values[i]);
            points[i] = point;
            drawPoint(point, canvas);
        }

        // 連線各個頂點
        point2Line(canvas, points);
    }


    /**
     * 繪製網格
     * @param canvas
     * @param width
     */
    private void drawOneNet(Canvas canvas, int width) {
        int height = (int) (width * Math.cos(Math.toRadians(30)));
        for (int i = 0; i < 6; i++) {
            canvas.restore();
            canvas.drawLine(-width / 2, height, width / 2, height, mPaint);
            canvas.rotate(60, 0, 0);
            canvas.save();
        }
    }

    /**
     * 繪製線條
     *
     * @param canvas
     */
    private void drawLines(Canvas canvas, int width) {
        for (int i = 0; i < 6; i++) {
            canvas.restore();
            if (i == 0) {
                canvas.rotate(30, 0, 0);
            } else {
                canvas.rotate(60, 0, 0);
            }
            mPath.lineTo(0, width);
            canvas.drawPath(mPath, mPaint);
            canvas.save();
        }
    }

    /**
     * 繪製座標頂點
     *
     * @param point 座標頂點
     */
    private void drawPoint(Point point, Canvas canvas) {
        // 回滾到第二次儲存狀態
        canvas.restoreToCount(1);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(10);
        canvas.drawPoint(point.getX(), point.getY(), mPaint);
    }

    /**
     * 根據值計算旋轉後的座標頂點
     *
     * @param index 第幾條邊,起始邊為1點鐘方向那條邊
     * @param value 待計算值
     * @return
     */
    private Point getRotatePoint(int index, int value) {
        int degrees = index * 60 + 30;
        double radians = Math.toRadians(degrees);
        double sin = Math.sin(radians);
        double cos = Math.cos(radians);
        int x = (int) (sin * value);
        int y = (int) (cos * value);
        Log.d("tag", "x:" + x + ",y:" + y);
        Point point = new Point();
        point.setX(x);
        point.setY(y);
        return point;
    }


}


說明:本文章並非轉載,如果有轉載請註明轉載說明,喜歡可以關注一下,後面會不定時分享技術.
 

相關推薦

Android實現蜘蛛網圖繪製

先看看效果圖,別讓文字把你們嚇跑了. 下面開始講解一下這個效果圖的實現過程!!!! 首先,講解一下思路: 1.繪製網格(4個六邊形) 2.繪製6條軸 3.繪製頂點 4.根據頂點座標繪製path 5.利用隨機函式隨機生成一組數值並展示 思路就是這些,在知道怎麼

Android 實現截圖和分享

直接上程式碼： xml的佈局： <Button android:id="@+id/btn_jp" android:layout_marginTop="10dip" android:layout

Android實現截圖方式

本文介紹了Android 實現截圖方式整理，分享給大家。希望對大家有幫助可能的需求：截自己的屏截所有的屏帶導航欄截圖不帶導航欄截圖截圖並編輯選取一部分自動擷取某個空間或者佈局擷取長圖在後臺去截圖1.只擷取自己應用內部介面1.1 擷取除了導航欄之外的螢幕?12345678910

Android實現截圖方式整理（總結）

http://www.jb51.net/article/119881.htm本文介紹了Android 實現截圖方式整理，分享給大家。希望對大家有幫助可能的需求：截自己的屏截所有的屏帶導航欄截圖不帶導航欄截圖截圖並編輯選取一部分自動擷取某個空間或者佈局擷取長圖在後臺去截圖1.

android實現截圖操作

最近開發了一些Android小遊戲，想在遊戲結束或者完成之後把整個螢幕擷取下來並分享到社交平臺上。先上效果吧。 網上一搜，截圖的方法很多。這裡只貼出了一種，將擷取到Bitmap賦給Dialog上的ImageView並彈出對話方塊。對對話方塊加了彈出和收起的動畫。看起來就

Android實現截圖和截長圖功能的幾種方法

一般情況下各種型號的手機都會有自帶的截圖功能，也會有諸如“開關機鍵+音量鍵”的截圖快捷鍵，只要手機是亮屏狀態，都會將手機螢幕的可視區域（包含狀態列）全部擷取下來。如果開發中想要調取系統的截圖功能，理論上講是可以的，需要在APK中呼叫“adb shell screencap -

android音訊波形圖繪製

  給連結吧，這是個直接使用pcm資料來繪製圖形. http://stackoverflow.com/questions/8325241/android-audio-fft-to-display-fundamental-frequency?rq=1  關鍵程式碼貼出來吧:

Android實現截圖，將截圖檔案儲存到本地資料夾

Android實現對當前介面截圖，並將截圖檔案存放至本地資料夾 首先需要動態申請兩項許可權（Android6.0後危險許可權之類的都需要動態申請），在AndroidManifest.xml中靜態新增 <uses-permission android:name="android.perm

Android實現全景圖

在玩頭條的時候，現在我們會發現有很多的全景圖的廣告這樣快看起來非常的酷。今天就來說說這個小效果的實現。我瞭解的有2種方式的實現： 1、Three.js,和前端互動實現的 2、依賴庫：OpeanGL 哈哈我就挑個簡單的方式來實現，選擇第二種方式。 (1)、在build。gra

android實現gif圖與文字混排

public class AnimatedImageSpan extends DynamicDrawableSpan { private Drawable mDrawable; public AnimatedImageSpan(Drawable d) { super();

Android圓形餅圖繪製（當餅圖佔比很小時描述文字的分開繪製）

由於專案中需要用到餅圖，用MpAndroidChart，當餅圖部分佔比很小時，描述文字重疊，所以自己重新繪製了餅圖，並提供餅圖各部分的點選監聽，效果圖如下： 繪製餅圖的類： package com.karoline.views.bars; import

android實現截圖功能程式碼

android開發中通過View的getDrawingCache方法可以達到截圖的目的，只是缺少狀態列！ APP原始介面 儲存截圖的檔案 程式碼的實現 1. 新增許可權（AndroidManifest.xml檔案裡） <uses-perm

Android 實現多圖分享到微信朋友圈

1.ShareActivity 類 public class ShareActivity extends Activity{ private Button mButtonGetValue; // 獲取資料按鈕 private Gr

手動擼個Android雷達圖（蜘蛛網圖）RadarView

startx ech tro eset 部分 starty fill 中心 公司 公司產品需要一個雷達圖來展示各維度的比重，網上找了一波，學到不少，直接自己上手來擼一記 無圖言虛空 簡單分析一波，確定雷達圖正幾邊形的--正五邊形 int count=5，分為幾個層數--4

Android實現儲存圖片，長圖、長佈局（webView等）

最近開發遇到一個問題，分享的時候 需要分享一個佈局內容，但是要用圖片分享的格式，最開始思考感覺不可能實現，手機上很少有功能可以實現長圖儲存的， 可是經理說，髮長微博的時候就是自動儲存的長圖片，頓時傻眼了，人家是怎麼做的呢？？？ 本已經放棄該功能，可這麼一說，又開始在網上找，並沒有很明確的找到

Python實現條形圖的繪製

Python實現條形圖的繪製： 說明：程式碼執行環境：Win10+Python3+jupyter notebook 條形圖是一種用來描繪已彙總的分型別資料的頻數分佈、相對頻數分佈或百分數頻數分佈。（百分數頻數就是相對頻數乘以100%） 方法1：pandas中的Series物件或者Data

android實現輪播圖

實現輪播圖 新增依賴 compile 'com.youth.banner:banner:1.4.10' compile 'com.github.bumptech.glide:glide:3.7.0'   程式碼： package com.bdsx.tiantianzhu

Android開發 ImageView上繪製旋轉圓環（透明度不同的旋轉圓環，利用canvas drawArc實現）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Android實現圖片轉ascii碼字元圖的一些嘗試

z2IN.png 抖音上炫程式碼的不少，有些真的讓人歎為觀止，作為一個androider，當我看到下面這段舞蹈的時候，終於忍不住了，想要通過android實現一樣的效果。 jilejingtu.gif 這麼好玩的東西，為啥就沒有大佬做呢，原因可能有兩個，

利用C#實現條形圖、餅圖的繪製（二）

using System;   using System.Data;   using System.Drawing;   using System.Drawing.Text;   using System.Drawing.Drawing2D;   using System.Collections.G