前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >绘图(四)小练习[画心]

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

作者头像
李小白是一只喵
发布2020-04-24 08:45:07
4290
发布2020-04-24 08:45:07
举报
文章被收录于专栏:算法微时光算法微时光

image.png

目录

画心

使用PATH来绘制心形动画.

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

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

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

动画

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

代码语言:javascript
复制
       //刷新界面
        invalidate();

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

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

实现

HelloView.java文件:

代码语言:javascript
复制
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文件:

代码语言:javascript
复制
<?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自定义绘制动画

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目录
  • 画心
  • 动画
  • 实现
  • 运行效果
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档