本文主要介绍CanvasCustomPaint)API使用Flutter来制作桌上弹球。这篇文章很详细,对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
本文是Flutter中Canvas和CustomPaint API的一个例子。
首先看看我们想要达到的效果:
结合动画演示,最终目标如下:
程序运行后,显示一个小球;
每次启动程序,球的样式都是随机变化的,体现在三点:大小、颜色、位置。
小球跑的规则参考乒乓球或立体弹球游戏;
点击屏幕,球变色;
双击屏幕,球暂停/恢复运动;
按下长屏,球自动开始/停止变色。
应用的主要技术点:Canvas和CustomPaint API。
操作平台:安卓、iOS
源代码地址:
吉图比蒂
功能拆解
先把上一篇文章列出的六个成就目标拆解一下。显然,要实现这些目标,我们需要:
随机颜色生成器;
随机位置发生器;
随机大小生成器;
拉球逻辑;
小球运动的逻辑:
边界判断;
初始运动方向生成器;
方向位置更新器。
用户手势监视器。
功能实现
接下来,我们将逐步实现功能反汇编中列出的六个具体功能。
随机颜色生成器
随机颜色发生器用于程序启动、屏幕点击和自动颜色改变。在Flutter中,我们可以通过颜色类分别定义红色、绿色、蓝色和透明来定义一种独特的颜色。数值范围是0-255。对于透明度,0表示完全透明,255表示完全不透明。
对于随机值,我们使用Random类来生成0到255之间的随机整数。
随机颜色生成器主要通过使用上述两个类来实现。具体代码片段如下:
Color _color=Color.fromARGB(0,0,0,0);
//改变球的颜色
void changeColor() {
_color=Color.fromARGB(255,Random()。nextInt(255),Random()。nextInt(255),Random()。nextInt(255));
}
随机位置生成器
随机位置生成器在程序启动时使用。要生成随机位置,方法仍然是使用Random类,但是要注意随机值的范围。通常我们需要球的位置出现在屏幕上,所以需要产生两次随机数,分别代表球初始位置的X轴和Y轴坐标。坐标值分别小于屏幕的水平和垂直尺寸。当然,它们都必须大于0。
另外,我们还需要分别得到屏幕的宽度和高度。
因此,具体代码实现如下:
[获取屏幕宽度和高度]
双screenX,screenY
@覆盖
小部件构建(BuildContext上下文){
screenX=media query . of(context). size . width;
screenY=media query . of(context). size . height;
.
}
[生成随机位置]
double _x=0,_ y=0;
//生成球的初始位置和大小
空生成球(){
_x=Random()。next double()* screenX;
_y=Random()。next double()* screenY;
}
随机尺寸生成器
随机大小生成器在程序启动时使用。完成前面两个随机值的生成后,我们对这里的大小就很熟悉了。由于随机大小和随机位置是程序启动时调用的,操作对象都是小球,所以我们把它们的实现放在generateBall()方法中。最终代码如下:
double _x=0,_y=0,_ size=0;
//生成球的初始位置和大小
空生成球(){
_size=Random()。nextDouble() * (screenY - screenX)。ABS();
_x=Random()。next double()* screenX;
_y=Random()。next double()* screenY;
}
小球绘制逻辑
要在界面上画一个球,我们需要使用CustomPaint组件。而CustomPaint组件需要一个custompaint实例。小球的绘制工作主要在继承CustomPainter的类中。让我们直接看代码:
导入‘package:flutter/material . dart’;
导入“package:flutter/widgets . dart”;
class Ball扩展CustomPainter {
油漆_油漆;
double _x,_y,_ size
球(双x,双y,双尺寸,颜色颜色){
_ Paint=new Paint();
_ paint.isAntiAlias=true
_paint.color=颜色;
这个。_ x=x
这个。_ y=y
这个。_ size=size
}
@覆盖
空白绘画(画布画布,大小大小){
canvas . draw oval(rect . from center(center:Offset(_ x,_y),width: _size,height: _size),_ paint);
}
@覆盖
bool should repaint(custom painter old delegate){
返回旧代表!=这个;
}
}
通过阅读上面的代码,我们可以发现整个Ball类除了构造方法之外,只有两个override方法,可以说非常简单。
在构造方法中,我们初始化_paint对象,可以看作是一个“画笔”;
在paint()方法中,我们调用canvas对象的drawOval方法画一个圆来代表一个球。画布可以看作是“画板”;
shouldRepaint()方法指示刷新布局时是否需要重绘,重绘只有在返回true时才会发生。在这里,我们可以让程序自己判断。
我们将上面的代码保存为ball.dart以备后用。
注意,这里没有写固定的值,无论是位置、颜色还是大小。因为这个类只负责“画圆”,而画什么样的圆交给这个类的用户来定义,也就是main.dart
在main.dart中,我们将App设置为全屏,并添加一个全屏CustomPaint组件,在其中放置球对象。
@覆盖
小部件构建(BuildContext上下文){
screenX=media query . of(context). size . width;
screenY=media query . of(context). size . height;
返回脚手架(
body:手势检测器(
子:容器(
宽度:double.infinity,
高度:双倍.无穷大,
child:custom paint(painter:Ball(_ x,_y,_size,_color)),
onTap: () {
//改变球的颜色
change color();
},
onDoubleTap: () {
//暂停/恢复移动
_keep_move=!_ keep _ move
},
onLongPress: () {
//自动改变球的颜色
_auto_change_color=!_自动_更改_颜色;
},
));
}
在上面的代码中,GestureDetector组件负责接收用户的click事件,其中_keep_move和_auto_change_color是布尔变量,是球移动和自动变色功能的开关。
接下来,我们调用initState()方法中前面的随机位置生成器、随机大小生成器和随机颜色生成器,给_x、_y、_size和_color赋值。
@覆盖
void initState() {
super . initstate();
widgetsbinding . instance . addpostframcallback((时间戳)async {
generate ball();
change color();
calculateMoveAngle();
start move();
});
}
这里calculateMoveAngle()和startMove()方法分别对应初始运动方向生成器和启动运动并定时更新UI的方法。除了这两种方法之外,如果你现在运行程序,你应该可以看到屏幕上出现一个静态的小球,每次再次运行程序,小球的样式和位置都会发生变化。
接下来,让球动起来!
小球运动逻辑
要让球准确移动,需要遵循以下步骤:第一位老师随机移动方向;然后以60FPS的频率,在运动方向上一次前进5个像素的步长(当然也可以自定义);最后,注意边界判断,当球到达屏幕边缘时要正确转身。
让我们逐一实现它们。
初始运动方向发生器
既然是随机方向,那么平面上360度以内的任何角度都有可能。所以,我们需要老师做出0-360范围内的价值观。然后,根据三角函数和移动方向的速度,计算横坐标和纵坐标的速度。其实很简单。这是勾股定理。
double _step_x,_step_y,_ angle
//计算球的初始移动角度(方向)
void calculateMoveAngle() {
_angle=Random()。next double()* 360;
_ step _ x=sin(_角度)* _速度;
_ step _ y=cos(_ angle)* _ speed;
}
这里我们把运动的速度(_speed)看作三角形的斜边,把横坐标和纵坐标的速度(_step_x,_step_y)看作三角形的直角边。如果我没记错的话,都是初中几何知识。不会很难理解。
定向移动位置更新器
前文说到,我们将以60FPS的刷新率更新界面,这也就意味着,每隔大约16毫秒刷新一次小球位置。因为只有小球的运动,才能让人感到界面在"更新"。这一步骤,我们用到计时器类。并将更新器在initState()方法中调用,以便程序启动后,小球即刻运动,也就是前文代码中见到的开始移动()方法。
//开始移动
void startMove() {
定时器.周期(持续时间(毫秒:16),(定时器){
移动球();
setState((){ });
});
}
//小球移动
void moveBall() {
_ x=_ step _ x
_ y=_ step _ y
}
到此为止,小球已经可以开始沿着某个随机方向移动了。但很快,它将移出屏幕。
边界判定
显然,小球每前进一步,都要做屏幕边界判定,以防小球移出屏幕范围。而边界判定在移动球()方法中实现似乎是最恰当的。
我们可以轻松地总结出小球移动的规律,当小球移动到屏幕边缘时,我们只需让其反向运动即可。比如,小球以3的速度移动并接触屏幕的右边缘,接下来,仍以3的速度移动并朝向屏幕的左边缘。
水平方向如此,垂直方向亦如此。
因此,我们的边界判定逻辑如下:
//带有便捷判定的小球移动
void moveBall() {
if (_x=screenX || _x=0) {
_ step _ x=0-_ step _ x;
}
_ x=_ step _ x
if (_y=screenY || _y=0) {
_ step _ y=0-_ step _ y;
}
_ y=_ step _ y
}
用户手势监听器
最后,配合用户手势及相关的布尔变量,在每次刷新小球位置时实现变色和暂停移动。
继续修改移动球()方法:
//带有便捷判定的小球移动
void moveBall() {
if (_keep_move) {
if (_x=screenX || _x=0) {
_ step _ x=0-_ step _ x;
}
_ x=_ step _ x
if (_y=screenY || _y=0) {
_ step _ y=0-_ step _ y;
}
_ y=_ step _ y
if (_auto_change_color) {
改变颜色();
}
}
}
到此,程序全部实现完成。下面放上完整的主。镖代码:
导入”dart:异步”;
导入“飞镖:数学”;
导入包装:飘动/材质。“飞镖”;
导入“包装:颤振/服务。镖”;
导入“球。镖”;
void main() {
runApp(MyApp());
}
类MyApp扩展了无状态小部件{
@覆盖
小部件构建(构建上下文上下文){
系统铬。setenabledsystemuioverlays([]);
返回材料应用程序(
标题:"颤振演示",
主题:主题数据(
原色手表:颜色。蓝色,
视觉密度:视觉密度。适应平台密度,
),
home: BounceBall(),
);
}
}
类弹力球扩展StatefulWidget {
@覆盖
_ BounceBallState createState()=_ BounceBallState();
}
class _BounceBallState扩展StateBounceBall {
最终double _ speed=5;
double _x=0,_y=0,_ size=0;
双_步_x,_步_y,_角度
Color _color=Color.fromARGB(0,0,0,0);
bool _ auto _ change _ color=false
bool _ keep _ move=true
双screenX,screenY
@覆盖
void initState() {
超级棒。initstate();
widgetsbinding。实例。addpostframcallback((时间戳)异步{
生成球();
改变颜色();
calculateMoveAngle();
开始移动();
});
}
@覆盖
小部件构建(构建上下文上下文){
screenX=媒体查询。(上下文)的。尺寸。宽度;
screenY=媒体查询。(上下文)的。尺寸。身高;
返回脚手架(
正文:手势检测器(
子:容器(
宽度:double.infinity,
高度:双倍。无穷大,
子对象:自定义绘制(绘制者:球(_ x,_y,_size,_color)),
onTap: () {
//改变小球颜色
改变颜色();
},
onDoubleTap: () {
//暂停/恢复移动
_keep_move=!_保持_移动
},
onLongPress: () {
//自动改变小球颜色
_auto_change_color=!_自动_更改_颜色;
},
));
}
//开始移动
void startMove() {
定时器.周期(持续时间(毫秒:16),(定时器){
移动球();
setState((){ });
});
}
//改变小球颜色
void changeColor() {
_color=Color.fromARGB(255,Random().nextInt(255),Random().nextInt(255),
随机()。nextInt(255));
}
//生成小球初始位置和大小
空生成球(){
_size=Random().nextDouble() * (screenY - screenX).ABS();
_x=Random()。next double()* screenX;
_y=Random()。next double()* screenY;
}
//计算球的初始移动角度(方向)
void calculateMoveAngle() {
_angle=Random()。next double()* 360;
_ step _ x=sin(_角度)* _速度;
_ step _ y=cos(_ angle)* _ speed;
}
//球路移动,判断方便
void moveBall() {
if (_keep_move) {
if (_x=screenX || _x=0) {
_ step _ x=0-_ step _ x;
}
_ x=_ step _ x
if (_y=screenY || _y=0) {
_ step _ y=0-_ step _ y;
}
_ y=_ step _ y
if (_auto_change_color) {
change color();
}
}
}
}
让我们一起运行这个程序吧!
关于CanvasCustomPaint)API with Flutter的这篇文章到此为止。更多关于Flutter pinball的信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。