Android画一个太极图

最新推荐文章于 2024-03-04 10:19:48 发布
最新推荐文章于 2024-03-04 10:19:48 发布
阅读量628 收藏
点赞数
分类专栏： android 自定义控件 文章标签： android path canvas

转载地址：http://www.jianshu.com/p/2a9e5ddbeb26


今天练手一下，一起来画个太极图吧~

最终效果如下：


最终效果

一般都是先讲原理，我就反其道而行，先讲实现吧。

1.继承实现初始化方法

继承View，实现基本的构造函数：

public TestView(Context context) {
    this(context, null);
}

public TestView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
    this(context, attrs, defStyleAttr, 0);
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public TestView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

在init()方法中，进行初始化操作，这里初始化一下画笔就好。

private Paint mPaint;

private void init() {
    initPaint();
}

/**
 * 初始化画笔
 */
private void initPaint() {
    mPaint = new Paint();               //创建画笔对象
    mPaint.setColor(Color.BLACK);       //设置画笔颜色
    mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充
    mPaint.setStrokeWidth(10f);         //设置画笔宽度为10px
    mPaint.setAntiAlias(true);          //设置抗锯齿
    mPaint.setAlpha(255);               //设置画笔透明度
}

在onSizeChanged()方法中获取高宽，便于之后绘制计算。

private int mWidth;
private int mHeight;    

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

创建两个路径，一下计算就在这两个路径中进行。

private Path path0 = new Path();
private Path path1 = new Path();

然后到最关键的onDraw()方法了，这里会分几步来演示。

1.移动布局到中间

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //移动布局到中间
    canvas.translate(mWidth / 2, mHeight / 2);
}

ps：为了简洁，之后的代码都是在onDraw()中逐层增加的，之后就不写onDraw()的外出括号了。

2.画背景黄色

    mPaint.setColor(0xffffff00);
    path0.addRect(-400, -400, 400, 400, Path.Direction.CW);
    canvas.drawPath(path0, mPaint);

第二步.png

3.画白色圆背景，即太极图的白鱼部分。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

第三步.png

4.画黑色圆背景，即太极图的黑鱼部分，和白鱼一样大小位置，只是把白鱼盖住了，这里就需要用一些boolean运算进行绘制了。

//白鱼的背景
mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

//黑鱼的背景
mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);//这一段注意，之后要删除

第四步.png

5.对黑鱼（path1）进行boolean计算，把不需要的部分去掉。这里就是要把圆的右半边消除，这里就需要用到path.op()方法了。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);
canvas.drawPath(path0, mPaint);//这一段注意，之后要删除

第五步.png

6.这时候我们已经把不需要的另一半黑色去掉了，但是黑鱼应该有个圆的头，那么我们就拼接一个头给它。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);

path0.rewind();
path0.addCircle(0, -100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.UNION);

canvas.drawPath(path1, mPaint);//这一段注意，之后要删除

第六步.png

7.到这里，我们看到，只需要在绘制一个白鱼的头就可以了，那么也和第五步一样，使用一个boolean运算把多余的黑色去掉即可。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);

path0.rewind();
path0.addCircle(0, -100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.UNION);

path0.rewind();
path0.addCircle(0, 100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);
canvas.drawPath(path1, mPaint);

第七步.png

8.至此，已经绘制好了八卦图的背景了，只需要在绘制鱼的眼睛即可。

//画黑色小圆
path0.rewind();
path0.addCircle(0, 100, 50, Path.Direction.CW);
mPaint.setColor(0xff000000);
canvas.drawPath(path0, mPaint);

//画白色小圆
path0.rewind();
path0.addCircle(0, -100, 50, Path.Direction.CW);
mPaint.setColor(0xffffffff);
canvas.drawPath(path0, mPaint);

第八步.png

完成，最后上完整的代码。代码写得有点乱，不过也是练习而已，哈哈。至于其中的boolean运算什么的，之后在我的自定义View的笔记中在写吧。

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Whitelaning on 2016/6/28.
 * Email: whitelaning@qq.com
 */
public class TestView extends View {

    private Paint mPaint;
    private int mWidth;
    private int mHeight;

    public TestView(Context context) {
        this(context, null);
    }

    public TestView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public TestView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        initPaint();
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        mPaint = new Paint();               //创建画笔对象
        mPaint.setColor(Color.BLACK);       //设置画笔颜色
        mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充
        mPaint.setStrokeWidth(10f);         //设置画笔宽度为10px
        mPaint.setAntiAlias(true);          //设置抗锯齿
        mPaint.setAlpha(255);               //设置画笔透明度
    }

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

    private Path path0 = new Path();
    private Path path1 = new Path();

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //移动布局到中间
        canvas.translate(mWidth / 2, mHeight / 2);

        //画大背景颜色
        mPaint.setColor(0xffffff00);
        path0.addRect(-400, -400, 400, 400, Path.Direction.CW);
        canvas.drawPath(path0, mPaint);

        mPaint.setColor(0xffffffff);
        path0.rewind();
        path0.addCircle(0, 0, 200, Path.Direction.CW);
        canvas.drawPath(path0, mPaint);

        mPaint.setColor(0xff000000);
        path1.addCircle(0, 0, 200, Path.Direction.CW);

        path0.rewind();
        path0.addRect(0, -200, 200, 200, Path.Direction.CW);
        path1.op(path0, Path.Op.DIFFERENCE);

        path0.rewind();
        path0.addCircle(0, -100, 100, Path.Direction.CW);
        path1.op(path0, Path.Op.UNION);

        path0.rewind();
        path0.addCircle(0, 100, 100, Path.Direction.CW);
        path1.op(path0, Path.Op.DIFFERENCE);
        canvas.drawPath(path1, mPaint);

        //画黑色小圆
        path0.rewind();
        path0.addCircle(0, 100, 50, Path.Direction.CW);
        mPaint.setColor(0xff000000);
        canvas.drawPath(path0, mPaint);

        //画白色小圆
        path0.rewind();
        path0.addCircle(0, -100, 50, Path.Direction.CW);
        mPaint.setColor(0xffffffff);
        canvas.drawPath(path0, mPaint);
    }
}

Whitelaning
It's very easy to be different but very difficult to be better


l_215851356
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 画一个太极图实例代码
09-01
以上步骤完成后，一个简单的太极图就在Android应用中绘制出来了。当然，你还可以根据需求添加更多的细节，比如渐变色、动态效果等，让太极图更加生动和真实。总的来说，通过理解Android的Canvas和Path类，我们可以...
二十多行代码画太极(Android中的Canvas)
GcsSloop
12-26 5838
作者微博: @攻城师sloop先上效果图说明本内容主要讲解安卓中2D绘图相关内容，安卓中2D绘图主要用的是Canvas(翻译过来好像叫画布吧)先简单介绍一下Canvas的常用功能：Canvas可以绘制的对象...
Android绘图之绘制太极图
chenkai19920410的专栏
12-16 1033
Android是通过graphics类来显示2D图形的。其中graphics中包括了Canvas、Paint、Color、Bitmap等类。graphics具有绘制点、线、颜色、2D几何图形、图像处理等功能。其中Color和Bitmap是很常用的类，我要讲的是Canvas和Paint。顾名思义就是画布和画笔。接下来我将通过绘制太极图来学习Android绘图机制。 　　Paint类 　　和日常绘图
Python绘图实例：太极图
weixin_40762926的博客
04-19 4367
所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。易经系辞:“是故易有太极，是生两仪”。两仪即为太极的阴、阳二仪。太极图式说是《庄子》"太极"思想在儒、道两家结出的硕果。
Python-绘制太极图
最新发布
Smooth的博客
03-04 1102
步骤分析 导入turtule库，并命名为t import turtle as t 设置画笔起点、颜色、粗细等参数，画出外面最大的圆。 t.setup(800,800) t.penup() t.goto(0,300) # t.fd(300) t.pendown() t.pensize(5) t.pencolor("black") t.circle(-300) 给画笔设置落点参数（0，125），粗细5，颜色黑色，角度25，画出第一个圆。
Python零基础学习 | 分享一个使用Python画出太极阴阳八卦图的代码
m0_68104000的博客
04-20 6332
每日一个 Python 小问题分享~
Android 绘制太极图实例详解
01-04
绘制一个太极图实现代码： package com.jackie.taijicircle; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android....
Android-自定义View绘制一个太极旋转图片demo
08-13
本示例“Android-自定义View绘制一个太极旋转图片demo”聚焦于如何通过自定义View来绘制并动画化一个太极图案。下面将详细介绍这个过程中的关键知识点。 1. **自定义View的基础**： 自定义View通常继承自`View`或`...
用python 之turtle库（模块）画太极图、楼梯等
cnds123的专栏
06-28 5854
用python 之turtle库（模块）画太极图、楼梯等 画简易的太极图 代码如下： import turtle t=turtle.Turtle() t.up() t.goto(0,-50)#设置起始坐标 t.down() t.begin_fill() t.fillcolor('black') t.circle(150,extent=180) t.circle(75,extent=180) #半径正负代表逆时针和顺时针画 t.circle(-75,extent=180) .
python绘图：turtle画太极图
热门推荐
gouxf_0219的博客
12-01 1万+
参考：https://www.jianshu.com/p/2a6fb8f38a16 原理 分解这个图形，图片中有四种颜色去心啊，每条曲线上的箭头表示乌龟移动的方向，首先从中心画一个半圆（红线），以红线所示圆的直径作半径画一个校园，半径为红线所示圆半径的0.15倍（蓝线），之所以选择0.15倍，是因为这样嵌入红圆内的小圆直径和红圆直径接近黄金分割。 代码 导入turtle库 import tur...
画太极图的C++代码实现
05-09
绘制太极图的原理简单来说就是画两个半圆一黑一白 拼成一个正圆 再在大圆的左侧和右侧画两个恰好相切的黑圆和白圆作为突出端 最后分别在这两个突出端里面画两个一黑一白的小洞 MFC里利用void CDrawView::OnDraw CDC pDC 这个函数进行绘图 和课堂上绘制正弦曲线相比 如果用一笔一笔循环的方式画圆将会很复杂 因此我就参考网上的 用Pie函数和Ellipse函数画弧和圆 画图用了CBrush画刷和CPen画笔 ">绘制太极图的原理简单来说就是画两个半圆一黑一白 拼成一个正圆 再在大圆的左侧和右侧画两个恰好相切的黑圆和白圆作为突出端 最后分别在这两个突出端里面画两个一黑一白的小洞 MFC里利用void CDrawView::OnDraw CDC pDC 这 [更多]
旋转的太极图（代码和注释）.py
07-25
# 然后下次循环的goto在tracer(0,0)之前这个很有讲究。这相当于是tracer(1,10)执行的一个语句。 # 如果没有的话，会导致tracer(1,10)直接被tracer(0,0)覆盖，还是会什么也画不出来。。
python turtle 绘制太极图的实例
01-20
效果如下所示： # -*- coding: utf-8 -*- import turtle # 绘制太极图函数 def draw_TJT(R):     turtle.screensize(800, 600, green)  # 画布长、宽、背景色 长宽单位为像素     turtle.pensize(1)  # 画笔宽度     turtle.pencolor('black')  # 画笔颜色     turtle.speed(10)  # 画笔移动速度     TJT_color = {1: 'white', -1: 'black'}  # 太极图填充色 1 白色 -1 黑色  
用turtle库画旋转太极图
Re:从零开始的代码生活的博客
03-05 3959
之前写过一篇用Python的turtle库画太极图的文章，当时画出来的太极图是静态的，现在就想着能不能让太极转起来，废话不多话，直接上代码 import turtle import time angle = 270 def tai(): r = 200 # 设置半径 turtle.penup() # 拿起画笔 turtle.goto(0, 0) # 到画布中心 turtle.setheading(angle) # 设置当前朝向为angle角度 turtle
用Python画一个太极图
杨旭华的博客
11-26 8958
import turtle t = turtle.Turtle() t.penup() t.goto(0,-50) t.pendown() t.begin_fill() t.fillcolor("black") t.circle(150,extent=180) t.circle(75,extent=180) t.circle(-75,extent=180) t.end_fill() t.circl...
用python代码画太极图
weixin_35750953的博客
12-31 1913
好的，这是用 Python 画太极图的代码： import turtle# 画一个圆 def draw_circle(radius, color): turtle.pencolor(color) turtle.circle(radius) # 画一个太极 def draw_taiji(): turtle.speed(10) # 设置画图速度 turtle.pen...
Android自定义view之太极图
计蒙不吃鱼的博客
12-10 1万+
太极图 周四课余时间比较多，正好前几天为了给小学弟解决问题，回顾了一些Android的知识，（上学还是不能把以前上班学到的东西丢掉）于是写一篇关于自定义view的文章。 文章目录太极图最后完成的样子（可旋转）一、先画一个太极二、让太极旋转三、自定义属性（颜色，动画速度）四、源码总结 最后完成的样子（可旋转） 这篇文章主要内容为使用Canvas画简单图案，自定义属性，以及属性动画ObjectAnimator中的旋转动画 提示：以下是本篇文章正文内容 一、先画一个太极 先介绍一下定义的东西：
【python turtle画图】太极图绘制实例
赖德发的博客
04-19 5190
turtle 画图，使用Python画出太极阴阳八卦图的代码 # -*- coding: utf-8 -*- import turtle as t # 设置背景和笔的移动速度及大小 t.bgcolor('yellow') t.speed(10) t.pensize(6) # 画黑色的半圆 t.fillcolor("black") t.begin_fill() t.circle(100,180) t.left(0) t.circle(50,180) t.circle(-50,180) t.end_fil
python系列之简单太极图
m0_74152222的博客
12-24 2179
太极图！！！！！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值