Android应用开发笔记之绘图（四）小练习[画心]

image.png

目录

第一篇：Android应用开发笔记之Android Studio第一个程序（一）
第二篇：Android应用开发笔记之线性布局LinearLayout（二）
第三篇：Android应用开发笔记之线性布局LinearLayout（二）小练习
第四篇：Android应用开发笔记之相对布局RelativeLayout（三）
第五篇：Android应用开发笔记之绘图［上］（四）
第五篇：Android应用开发笔记之绘图［下］（四）
第六篇：Android应用开发笔记之绘图（四）小练习[画心]

画心

使用PATH来绘制心形动画.

绘制心形大致需要以下步骤:

1. 绘制心形的左边半圆(使用函数addArc)
2. 绘制心形的右边半圆(使用函数arcTo)
3. 连接右边半圆到底角
4. 连接左边半圆到底角

当然涉及到一些角度的计算,都很简单,不再过多解释.O(∩_∩)O

动画

动态的绘制图形,需要使用到invalidate和postInvalidate函数,本次我们使用的是:

       //刷新界面
        invalidate();

invalidate方法和postInvalidate方法都是用于进行View的刷新，invalidate方法应用在UI线程中，而postInvalidate方法应用在非UI线程中，用于将线程切换到UI线程，postInvalidate方法最后调用的也是invalidate方法。

废话不多说,接下来上源码.O(∩_∩)O

实现

HelloView.java文件:

package com.example.user.test11;

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

public class HelloView extends View{

    public HelloView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        this.x = 0;
        this.y = 0;
    }

    //心顶部中心点坐标
    private int x;
    private int y;
    //每次移动加速度
    private int x_d = 1;
    private int y_d = 1;
    //画心的一半的横轴宽度
    private int line = 200;
    //顶点到底点的距离
    //计算方法(几何方法)
    private int xin_b = 170;
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);

        // 设置画笔
        Paint mPaint = new Paint();
        // 设定画笔颜色
        mPaint.setColor(Color.RED);
        //抗锯齿
        mPaint.setAntiAlias(true);
        //设置宽度
        mPaint.setStrokeWidth(20);
        //设定画笔填充类型(不填充)
        mPaint.setStyle(Paint.Style.FILL);

        //获取控件的宽高
        int width = getWidth();
        int height = getHeight();
        //移动坐标系
        canvas.translate(width / 2, height / 2);

        //制定路径
        Path mPath = new Path();
        //绘制心形的左边半圆
        mPath.addArc((this.x- this.line), (this.y-this.line),this.x,this.y, 135 ,225);
        //绘制心形的右边边半圆
        mPath.arcTo((this.x),(this.y-this.line),(this.x + this.line),this.y, -180, 225, true);
        //连接右边半圆到底角
        mPath.lineTo(this.x,(this.y+this.xin_b));
        //连接左边半圆到底角
        mPath.lineTo((this.x-this.xin_b),(this.y+this.xin_b-this.line));

        //绘制五角星
        canvas.drawPath(mPath, mPaint);

        this.x += this.x_d;

        if(this.x + this.line >= width / 2)
            this.x_d = -1;
        if(this.x - this.line <= -(width / 2))
            this.x_d = 1;

        this.y += this.y_d;
        if(this.y  + this.line >= height / 2)
            this.y_d = -1;
        if(this.y - this.line <= -(height / 2))
            this.y_d = 1;
        //刷新界面
        invalidate();
    }

}

activity_main.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.user.test11.HelloView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

绘图效果:

image.png

运行效果

由于是动画,所以只能用两张图片来表示了,偷个懒O(∩_∩)O

第一张图:

image.png

第二张图:

image.png

参考

android Path.setFillType(Path.FillType ft) 设置填充方式
Android界面刷新之invalidate与postInvalidate的区别
Android使用Canvas和Path自定义绘制动画