该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html

一、绘制三角形

在上一篇文章中,我们已经新建了虚拟方向键的自定义控件DirectionKeys类,下面我们继续。

本项目中的虚拟方向键的背景是4个三角形组成的矩形,其实是4个三角形的按钮。

系统自带的按钮是矩形的,怎么做一个三角形按钮呢?

首先我需要了解,所有控件的外观都是画出来的,当然不是我们手工去画而是用程序去画。

用程序怎么画呢?

很多技术平台上都有绘图功能,用起来也很相似。既然都是面向对象的思想,我们可以与现实中画画类比。

首先我们需要一块画布(canvas),然后需要一支画笔(paint)和颜料(color),现实中这就可以画了。然而现在是要程序去画,必须要告诉程序你要画什么。由于每个人画的东西不一样,五花八门,所以画不同的东西,告诉程序的方式也可能不同。我们画三角形选择用path对象告诉程序,下面细讲。然后程序就给你画出来了。

了解了绘图的基本流程,下面我们用代码来实现。

在android.view.View中有个方法叫onDraw的方法,我们只要重写(Override)该父类方法,在该方法中画我们想要的东西即可。

在Android Studio中输入onDraw时根据智能提示生成了如下代码:

    /**
* 通过重写父类的onDraw方法来绘制我们需要的图形
*
* @param canvas 这里的canvas是系统提供的一块矩形画布,我们要做的就是在这块画布上画我们想要的东西。
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}

从上面的代码中可以看到,onDraw方法给我们传来了一个叫canvas的对象,canvas就是一个画布,我们可以在上面画画。自动生成的“super.onDraw(canvas);”是调用了父类中的onDraw方法,我们可以点进去看看。

    /**
* Implement this to do your drawing.
*
* @param canvas the canvas on which the background will be drawn
*/
protected void onDraw(Canvas canvas) {
}

发现父类中的onDraw方法是空的,可以不调用。

现在有画布了,我们还需要画笔。这好办,new一个就行了。

        //准备画笔
Paint paint = new Paint();

画笔要蘸什么颜色的颜料呢?比如红色吧。

        //设置画笔的颜色
paint.setColor(Color.RED);

这里的颜色是一个int类型的整数,是一个ARGB值。系统提供了几种常用颜色做为常量,比如Color.RED=0xFFFF0000,你也可以按照自己的喜好设置一种颜色。

下面我们以画左边的三角形为例。

画布上的每一个像素都有它的坐标,坐标系原点是画布的左上角。要画三角形就需要知道三个顶点的坐标。

设画布宽为width,高为height;

则画布4个顶点和中心点的坐标分别是:

左上点 0,0
        左下点 0,height
        右上点 width,0
        右下点 width,height
        中心点 width/2,height/2

那么左边三角形的三个顶点坐标分别是(0,0)(width/2,height/2)(0,height)

下面该path对象出场了。path的意思是路径,它能告诉程序沿着设计好的路径画图。我们知道三角形是由三段直线段组成的,程序中也是这么设计的:

        //画布的宽
int width = canvas.getWidth();
//画布的高
int height = canvas.getHeight(); //画左方向键背景三角形的路径
Path pathLeft = new Path();
//从画布左上点开始
pathLeft.moveTo(0, 0);
//画直线到画布中心点
pathLeft.lineTo(width / 2, height / 2);
//再画直线到画布左下点
pathLeft.lineTo(0, height);
//自动闭合图形。从最后一个点(左下点)画直线到第一个点(左上点)。
pathLeft.close();

到目前为止DirectionKeys类的所有代码如下:

package net.chengyujia.happysnake;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View; /**
* Created by ChengYuJia on 2016/8/19.
* 屏幕上的虚拟方向键
*/
public class DirectionKeys extends View { //只有一个参数的构造方法是我们在程序中通过“new”关键字创建实例时调用。
public DirectionKeys(Context context) {
super(context);
} //有两个参数的构造方法是系统在XML布局文件中创建实例时调用。
public DirectionKeys(Context context, AttributeSet attrs) {
super(context, attrs);
} /**
* 通过重写父类的onDraw方法来绘制我们需要的图形
*
* @param canvas 这里的canvas是系统提供的一块矩形画布,我们要做的就是在这块画布上画我们想要的东西。
*/
@Override
protected void onDraw(Canvas canvas) {
//画布的宽
int width = canvas.getWidth();
//画布的高
int height = canvas.getHeight();
/*
(小提示:在计算机中一般都是将左上角作为坐标原点的)
画布上四个顶点和中心点的坐标如下:
左上点 0,0
左下点 0,height
右上点 width,0
右下点 width,height
中心点 width/2,height/2
*/ //画左方向键背景三角形的路径
Path pathLeft = new Path();
//从画布左上点开始
pathLeft.moveTo(0, 0);
//画直线到画布中心点
pathLeft.lineTo(width / 2, height / 2);
//再画直线到画布左下点
pathLeft.lineTo(0, height);
//自动闭合图形。从最后一个点(左下点)画直线到第一个点(左上点)。
pathLeft.close(); //准备画笔
Paint paint = new Paint();
//设置画笔的颜色
paint.setColor(Color.RED);
//设置画笔为实心(默认就是实心,这里不设置也行)
paint.setStyle(Paint.Style.FILL);
//按照刚才的路径设计画了一个实心的红色三角形
canvas.drawPath(pathLeft, paint);
}
}

二、测试

现在我们就能用一下我们自定义的控件了,和用系统自带的控件一样,只不过在XML布局文件中需要用类的全名做标签,不然会报错。

我们将MainActivity的布局文件修改如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="net.chengyujia.happysnake.MainActivity"> <!--自定义控件一定要用类的全名,不然会报错。-->
<net.chengyujia.happysnake.DirectionKeys
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

然后运行一下,截图如下:

好了,本篇到此结束,下篇继续。

如果遇到问题可以在下面的评论中交流。^_^

Android快乐贪吃蛇游戏实战项目开发教程-03虚拟方向键(二)绘制一个三角形的更多相关文章

  1. Android快乐贪吃蛇游戏实战项目开发教程-04虚拟方向键(三)三角形按钮效果

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.知识点讲解 当我们点击系统自带的按钮时,按钮的外观会发生变化.上篇博文中我们 ...

  2. Android快乐贪吃蛇游戏实战项目开发教程-02虚拟方向键(一)自定义控件概述

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.自定义控件简介 在本项目中,无论是游戏主区域还是虚拟方向键都是通过自定义控件 ...

  3. Android快乐贪吃蛇游戏实战项目开发教程-06虚拟方向键(五)绘制方向键箭头

    本系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html本系列教程项目源码GitHub地址:https://github.com/jack ...

  4. Android快乐贪吃蛇游戏实战项目开发教程-05虚拟方向键(四)四个三角形按钮

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.如何判断点击的是哪个方向键按钮 在上篇教程中我们实现了左边的三角形按钮效果, ...

  5. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  6. 原生Js贪吃蛇游戏实战开发笔记

    前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...

  7. Android实现贪吃蛇游戏

    [绥江一百]http://www.sj100.net                                                  欢迎,进入绥江一百感谢点击[我的小网站,请大家多 ...

  8. 【C语言项目】贪吃蛇游戏(上)

    目录 00. 目录 01. 开发背景 02. 功能介绍 03. 欢迎界面设计 3.1 常用终端控制函数 3.2 设置文本颜色函数 3.3 设置光标位置函数 3.4 绘制字符画(蛇) 3.5 欢迎界面函 ...

  9. 使用Love2D引擎开发贪吃蛇游戏

    今天来介绍博主近期捣腾的一个小游戏[贪吃蛇],贪吃蛇这个游戏相信大家都不会感到陌生吧.今天博主将通过Love2D这款游戏引擎来为大家实现一个简单的贪吃蛇游戏,在本篇文章其中我们将会涉及到贪吃蛇的基本算 ...

随机推荐

  1. MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息

    MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...

  2. 客户端的验证插件validator

    简单,智能,令人愉悦的表单验证~~~ 官方文档:http://www.niceue.com/validator/ <!DOCTYPE html> <html> <head ...

  3. 启用 Open vSwitch - 每天5分钟玩转 OpenStack(127)

    Linux Bridge 和 Open vSwitch 是目前 OpenStack 中使用最广泛的两种虚机交换机技术. 前面各章节我们已经学习了如何用 Linux Bridge 作为 ML2 mech ...

  4. 【开源】.Net 分布式服务中心

    分布式服务中心 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ServiceCenter 当垂直应用越来越多,应用之间交互不可避免,将 ...

  5. 菜鸟Python学习笔记第二天:关于Python黑客。

    2016年1月5日 星期四 天气:还好 一直不知道自己为什么要去学Python,其实Python能做到的Java都可以做到,Python有的有点Java也有,而且Java还是必修课,可是就是不愿意去学 ...

  6. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  7. BI分析受阻?FineBI推出SPA螺旋式分析新功能!

    过去,企业级的数据分析通常会有这么几种场景,业务部门托信息部门分析数据,结果报表一出,唇枪舌剑争论你我高低,数据不准,指标不对.信息部门欠缺业务概念,业务部门不懂技术逻辑,数据分析之路,暂时搁浅. 后 ...

  8. 分享一个MySQL分库分表备份脚本(原)

    分享一个MySQL分库备份脚本(原) 开发思路: 1.路径:规定备份到什么位置,把路径(先判断是否存在,不存在创建一个目录)先定义好,我的路径:/mysql/backup,每个备份用压缩提升效率,带上 ...

  9. 我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗

    文章背景,回答提问:我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗? 我的建议是这样:1. 不要辞职.首先说,你对整个开发没有一个简单的了解,或一个系统的入门学习.换句 ...

  10. 机器指令翻译成 JavaScript —— No.4 动态跳转

    上一篇,我们用模拟流程的方式,解决了跳转问题. 不过静态跳转,好歹事先是知道来龙去脉的.而动态跳转,只有运行时才知道要去哪.既然流程都是未知的,翻译从何谈起? 动态跳转,平时出现的多吗?非常多!除了 ...