使用Android原生canvas绘制炫酷的太极八卦图

2023-11-26 19:59
文章标签 android 使用 绘制 canvas 原生 炫酷 太极 八卦图

本文主要是介绍使用Android原生canvas绘制炫酷的太极八卦图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

内部的太极以及外部的八卦环都可以调节不同的速度和方向，实现效果：

、

 原代码：

EightDiagrams：
package com.hjq.myapplication;import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;public class EightDiagrams extends View {private final Paint mPaint;private final Paint whitePaint;   //白色画笔private final Paint blackPaint;private final Paint outlinePaint;   //轮廓画笔float mWidth;                 //控件宽float mHeight;                //控件高float mOutlineR1;float mOutlineR2;float mOutlineR3;float mOutlineR4;float mOutlineR5;private final String[][] listR1;private final String[] listR2;private final String[] listR3;private final String[] listR4;private final String[] listR5;private float degrees_tai = 0;          //旋转角度public EightDiagrams(Context context) {this(context, null);}public EightDiagrams(Context context, AttributeSet attrs) {this(context, attrs, 0);}public EightDiagrams(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);//路径whitePaint = new Paint();whitePaint.setAntiAlias(true);whitePaint.setColor(Color.WHITE);blackPaint = new Paint();blackPaint.setAntiAlias(true);blackPaint.setColor(Color.BLACK);mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setStyle(Paint.Style.FILL);outlinePaint = new Paint();outlinePaint.setAntiAlias(true);outlinePaint.setStyle(Paint.Style.STROKE);outlinePaint.setColor(Color.parseColor("#000000"));listR1 = new String[][]{{"|","|","|",""},{"¦","¦","¦",""},{"|","¦","¦",""},{"¦","|","¦",""},{"¦","|","|",""},{"¦","¦","|",""},{"|","¦","|",""},{"|","|","¦",""},{"","","",""}, {"☰","☷","☳","☵","☴","☶","☲","☱",""}};listR2 = new String[]{"申", "庚", "酉", "辛", "戌", "乾", "亥", "壬", "子", "癸", "丑", "艮","寅", "甲", "卯", "乙", "辰", "巽", "巳", "丙", "午", "丁", "未", "坤", ""};listR3 = new String[]{"天厨","天市","天梧","天苑","天命","天宫","天","太乙","天屏","太徽","天广","南极","天常","天境","天开","天汉","少徽","天乙","天魁","天廊","天皇","天铺","天叠","阴光",""};listR4 = new String[]{"夬", "乾", "姤", "大过", "鼎", "恒", "巽", "井", "蛊", "升", "诉", "困","未济", "解", "涣", "坎", "蒙", "师", "遯", "咸", "旅", "小过", "渐", "蹇", "艮","谦","否","萃","晋","豫","观","比","剥","坤","蕧","颐","屯","益","震","嘘咳","随","无安","明夷","贵","既济","家人","丰","难","革","同人","临","损","节","中孚","归妹","睽","兑","履","泰","大畜","需","小畜","大壮","否","萃","晋","豫","观","比","剥","坤","大有","离",""};listR5 = new String[]{"水","木","水","木","土","金","火","土","水","木","土","金","火","水","木","土","金","火","金","木","水","火","火","土","火","水","木","土","金","火","金","木","水","火","火","土","水","木","土","金","火","金","木","水","火","火","土","火","土","水","木","土","金","火","金","木","水","火","土","火",""};}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int width = measureWidth(widthMeasureSpec);int height = measureHeight(heightMeasureSpec);setMeasuredDimension(width, height);mWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();mHeight = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();}private int measureHeight(int measureSpec) {int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);int result = 0;switch (mode) {case MeasureSpec.EXACTLY:result = val;break;case MeasureSpec.AT_MOST:case MeasureSpec.UNSPECIFIED:break;}result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;return result + getPaddingTop() + getPaddingBottom();}private int measureWidth(int measureSpec) {int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);int result = 0;switch (mode) {case MeasureSpec.EXACTLY:result = val;break;case MeasureSpec.AT_MOST:case MeasureSpec.UNSPECIFIED:break;}result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;return result + getPaddingLeft() + getPaddingRight();}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);mOutlineR1 = mWidth * 0.17f;mOutlineR2 = mWidth * 0.24f;mOutlineR3 = mWidth * 0.307f;mOutlineR4 = mWidth * 0.371f;mOutlineR5 = mWidth * 0.432f;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (canvas == null)return;canvas.drawColor(Color.parseColor("#fff7f9fa"));//填充背景canvas.save();canvas.translate(mWidth / 2, mHeight / 2);//原点移动到中心//绘制各元件，后文会涉及到drawCenterInfo(canvas);drawOutline(canvas);}@SuppressLint("SuspiciousIndentation")private void drawOutline(Canvas canvas) {outlinePaint.setStrokeWidth(mWidth/350);mPaint.setColor(Color.WHITE);mPaint.setAlpha(255);mPaint.setTextAlign(Paint.Align.CENTER);mPaint.setTextSize(mWidth * 0.06f);mPaint.setColor(Color.parseColor("#000000"));//第一层canvas.save();canvas.rotate(-degrees_tai/4);canvas.drawCircle(0, 0, mOutlineR1, outlinePaint);for (int i = 0; i <= 8; i++) {double angle = 2 * Math.PI / 8 * i+Math.PI / 8 ;canvas.drawLine((float) StrictMath.cos(angle) * mWidth / 10, (float) StrictMath.sin(angle) * mWidth / 10,(float) StrictMath.cos(angle) * mOutlineR1, (float) StrictMath.sin(angle) * mOutlineR1, outlinePaint);canvas.save();float iDeg1 = 360 / 8f * i;canvas.rotate(iDeg1,0,0);mPaint.setTextAlign(Paint.Align.RIGHT);for (int j=0;j<=2;j++)canvas.drawText(listR1[i][j],  mOutlineR1*(0.9f-j*0.1f), getCenteredY()+mOutlineR1*0.28f, mPaint);canvas.restore();}canvas.restore();//第二层mPaint.setTextSize(mWidth * 0.03f);canvas.save();canvas.rotate(degrees_tai/6);canvas.drawCircle(0, 0, mOutlineR2, outlinePaint);for (int i = 0; i <= 24; i++) {double angle = 2 * Math.PI / 24f * i+5;canvas.drawLine((float) StrictMath.cos(angle) * mOutlineR1, (float) StrictMath.sin(angle) * mOutlineR1,(float) StrictMath.cos(angle) * mOutlineR2, (float) StrictMath.sin(angle) * mOutlineR2, outlinePaint);canvas.save();float iDeg1 = 360 / 24f * i;canvas.rotate(iDeg1);mPaint.setTextAlign(Paint.Align.RIGHT);canvas.drawText(listR2[i],  mOutlineR2*0.9f, getCenteredY(), mPaint);canvas.restore();}canvas.restore();//第三层mPaint.setTextSize(mWidth * 0.028f);canvas.save();canvas.rotate(-degrees_tai/6);canvas.drawCircle(0, 0, mOutlineR3, outlinePaint);for (int i = 0; i <= 24; i++) {double angle = 2 * Math.PI / 24f * i+5;canvas.drawLine((float) StrictMath.cos(angle) * mOutlineR2, (float) StrictMath.sin(angle) * mOutlineR2,(float) StrictMath.cos(angle) * mOutlineR3, (float) StrictMath.sin(angle) * mOutlineR3, outlinePaint);canvas.save();float iDeg1 = 360 / 24f * i;canvas.rotate(iDeg1);mPaint.setTextAlign(Paint.Align.RIGHT);canvas.drawText(listR3[i],  mOutlineR3*0.965f, getCenteredY(), mPaint);canvas.restore();}canvas.restore();//第四层mPaint.setTextSize(mWidth * 0.02f);canvas.save();canvas.rotate(degrees_tai/18);canvas.drawCircle(0, 0, mOutlineR4, outlinePaint);for (int i = 0; i <= 72; i++) {double angle = 2 * Math.PI / 72f * i+2;canvas.drawLine((float) StrictMath.cos(angle) * mOutlineR3, (float) StrictMath.sin(angle) * mOutlineR3,(float) StrictMath.cos(angle) * mOutlineR4, (float) StrictMath.sin(angle) * mOutlineR4, outlinePaint);canvas.save();float iDeg1 = 360 / 72f * i;canvas.rotate(iDeg1);mPaint.setTextAlign(Paint.Align.RIGHT);canvas.drawText(listR4[i],  mOutlineR4*0.95f, getCenteredY(), mPaint);canvas.restore();}canvas.restore();//第五层mPaint.setTextSize(mWidth * 0.025f);canvas.save();canvas.rotate(-degrees_tai/15);canvas.drawCircle(0, 0, mOutlineR5, outlinePaint);for (int i = 0; i <= 60; i++) {double angle = 2 * Math.PI / 60f * i+2;canvas.drawLine((float) StrictMath.cos(angle) * mOutlineR4, (float) StrictMath.sin(angle) * mOutlineR4,(float) StrictMath.cos(angle) * mOutlineR5, (float) StrictMath.sin(angle) * mOutlineR5, outlinePaint);canvas.save();float iDeg1 = 360 / 60f * i;canvas.rotate(iDeg1);mPaint.setTextAlign(Paint.Align.RIGHT);canvas.drawText(listR5[i],  mOutlineR5*0.95f, getCenteredY(), mPaint);canvas.restore();}canvas.restore();}//绘制太极private void drawCenterInfo(Canvas canvas) {canvas.save();canvas.rotate(degrees_tai);//绘制两个半圆int radius = (int) (Math.min(mWidth, mHeight) / 10);             //太极半径RectF rect = new RectF(-radius, -radius, radius, radius);   //绘制区域canvas.drawArc(rect, 90, 180, true, blackPaint);            //绘制黑色半圆canvas.drawArc(rect, -90, 180, true, whitePaint);           //绘制白色半圆//绘制两个小圆int smallRadius;   //小圆半径为大圆的一般smallRadius = radius / 2;canvas.drawCircle(0, -smallRadius, smallRadius, blackPaint);canvas.drawCircle(0, smallRadius, smallRadius, whitePaint);//绘制鱼眼（两个更小的圆）canvas.drawCircle(0, -smallRadius, smallRadius >> 2, whitePaint);canvas.drawCircle(0, smallRadius, smallRadius >> 2, blackPaint);canvas.restore();}public void setRotate(float degrees_tai) {this.degrees_tai = degrees_tai;invalidate();                   //重绘界面}/*** 中间对齐**/private float getCenteredY() {Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();return mPaint.getFontSpacing() / 2 - 4*fontMetrics.bottom;}}

EightDiagramsActivity：

package com.hjq.myapplication;import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.os.Message;public class EightDiagramsActivity extends Activity {private EightDiagrams eightDiagrams;private final Handler handler = new Handler(Looper.getMainLooper()) {private float degrees = 0;@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);eightDiagrams.setRotate(degrees += msg.what);this.sendEmptyMessageDelayed(msg.what, 50);}};@SuppressLint("MissingInflatedId")@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_eight_diagrams);eightDiagrams = findViewById(R.id.eight_diagrams_id);eightDiagrams.setOnClickListener(v -> {handler.removeCallbacksAndMessages(null);handler.removeMessages(2);handler.sendEmptyMessageDelayed(30, 30);handler.postDelayed(() -> {handler.removeCallbacksAndMessages(null);handler.removeMessages(30);handler.sendEmptyMessageDelayed(2, 30);}, 1000);});}@Overrideprotected void onDestroy() {super.onDestroy();handler.removeCallbacksAndMessages(null);finish();}}

 activity_eight_diagrams.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"><com.hjq.myapplication.EightDiagramsandroid:id="@+id/eight_diagrams_id"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_marginBottom="20dp" /></LinearLayout>

这篇关于使用Android原生canvas绘制炫酷的太极八卦图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/426234。

相关文章

从零教你安装pytorch并在pycharm中使用

从零教你安装pytorch并在pycharm中使用

《从零教你安装pytorch并在pycharm中使用》本文详细介绍了如何使用Anaconda包管理工具创建虚拟环境,并安装CUDA加速平台和PyTorch库,同时在PyCharm中配置和使用PyTor... 目录背景介绍安装Anaconda安装CUDA安装pytorch报错解决——fbgemm.dll连接p
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
使用Python创建一个能够筛选文件的PDF合并工具

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4
阅读更多...
一文详解如何在Python中使用Requests库

一文详解如何在Python中使用Requests库

《一文详解如何在Python中使用Requests库》：本文主要介绍如何在Python中使用Requests库的相关资料,Requests库是Python中常用的第三方库,用于简化HTTP请求的发... 目录前言1. 安装Requests库2. 发起GET请求3. 发送带有查询参数的GET请求4. 发起PO
阅读更多...
Java中的Cursor使用详解

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码，有一段代码涉及到Cursor，感觉写法挺有意思的。注意是Cursor，而不是Consumer
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
Android开发中gradle下载缓慢的问题级解决方法

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Rust中的注释使用解读

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例：行注释2. 块注释示例：块注释3. 文档注释示例：文档注释4. 综合示例总结Rust 中的注释
阅读更多...
Linux使用cut进行文本提取的操作方法

Linux使用cut进行文本提取的操作方法

《Linux使用cut进行文本提取的操作方法》Linux中的cut命令是一个命令行实用程序,用于从文件或标准输入中提取文本行的部分,本文给大家介绍了Linux使用cut进行文本提取的操作方法,文中有详... 目录简介基础语法常用选项范围选择示例用法-f：字段选择-d：分隔符-c：字符选择-b：字节选择--c
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2