专栏首页算法微时光绘图(四)小练习[画心]

绘图(四)小练习[画心]

image.png

目录

画心

使用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自定义绘制动画

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 俄罗斯方块之心(cocos2d-js+html5)

    就截取了两张图,有兴趣的朋友可以去微博上查阅视频版。 微博地址: http://video.weibo.com/show?fid=1034:42671171...

    李小白是一只喵
  • Android系统编译流程详解(一)

    脚本代码依次查找{device, vendor, product}目录下的vendorsetup.sh文件,并分别导入到当前环境中来!

    李小白是一只喵
  • Android Bundle简介

    Bundle经常使用在Activity之间或者线程间传递数据,传递的数据可以是boolean、byte、int、long、float、double、string...

    李小白是一只喵
  • JS 中 this 在各个场景下的指向

    很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。 this 的功能很强大,但需要一定付出才能慢慢理解它。

    前端小智@大迁世界
  • jsvascript—谜之this?

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • 如何用 vue 制作一个探探滑动组件

    前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组...

    程序员宝库
  • 自制简单的range(Vue)

    IMWeb前端团队
  • ES6基础-ES6 class

    面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它的特性有哪些。比如有姓名,性别,出生年月,身高等,...

    达达前端
  • 22this关键字

    this文键字是Javascript中最复杂的机制之ー。它是一个很特别的关键字,被自动定义在所有函数的作用域中。但是即使是非常有经验的 Javascript开发...

    Dreamy.TZK
  • JS面向对象二:this/原型链/new原理

    也可以看看这篇文章周大侠啊 进击的 JavaScript(六) 之 this先了解一下`this的四种绑定规则和箭头函数的this绑定

    代码之风

扫码关注云+社区

领取腾讯云代金券