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

2023-11-26 19:59

本文主要是介绍使用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

相关文章

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND

C# $字符串插值的使用

《C#$字符串插值的使用》本文介绍了C#中的字符串插值功能,详细介绍了使用$符号的实现方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录$ 字符使用方式创建内插字符串包含不同的数据类型控制内插表达式的格式控制内插表达式的对齐方式内插表达式中使用转义序列内插表达式中使用

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语