七 近代史案例欣赏

news2025/1/16 16:06:06

在这里插入图片描述
首先打开我们的编译器，EgretWing,新建一个Egret项目。
新建好后如下图：
在这里插入图片描述

主要文件夹介绍

libs:包类文件夹
resource：资源文件夹
src：编写代码文件夹
template：前端文件夹

代码编写

1 打开src中Main.ts文件找到createGameScene()方法，这个方法是创建场景界面方法
2 它代码中删除掉不需要的代码（这是系统自带的显示代码没什么用），只留下下图部分（这是背景图的设置，还有背景图的宽和高）：
在这里插入图片描述

开始编写近代史案例

createGameScene()方法中编写

添加纹理图片（头像）
/**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
        let sky = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;
	   // 定义一个纹理  （头像）  
        let port: egret.Bitmap = new egret.Bitmap();
        //加载图片纹理（头像） 
        port.texture = RES.getRes('touxiang_jpg');
        //加载到列表中
        this.addChild(port);
        }

在这里插入图片描述

设置图片的宽和高
 /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
     let sky = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;
        
        // 定义一个纹理  （头像）  
        let port: egret.Bitmap = new egret.Bitmap();
        //加载图片纹理（头像） 
        port.texture = RES.getRes('touxiang_jpg');
        //加载到列表中
        this.addChild(port);
        //设置头像的宽高
        port.width = stageW / 2;
        port.height = stageH /2;

        //设置头像的宽高
        port.width = stageW / 2;
        port.height = stageH /2;
        
        //设置锚点的方式来实现水平居中
        //锚点也是一个点，是你的整个图片，缩放也好，位移也好，甚至位置也好的一个基点
        //X点
        port.anchorOffsetX = port.width /2;
        //Y点
        port.anchorOffsetY = port.height / 2;
        //高的一半
        port.x = stageW / 2;
        // 图片的宽度的一半
        port.y = port.height /2;
}

注意看：这个图片的位置已变。

在这里插入图片描述

设置图片的遮罩层
/**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
        let sky = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;
        
        // 定义一个纹理  （头像）  
        let port: egret.Bitmap = new egret.Bitmap();
        //加载图片纹理（头像） 
        port.texture = RES.getRes('touxiang_jpg');
        //加载到列表中
        this.addChild(port);
        //设置头像的宽高
        port.width = stageW / 2;
        port.height = stageH /2;

        //设置头像的宽高
        port.width = stageW / 2;
        port.height = stageH /2;

        //设置锚点的方式来实现水平居中
        //锚点也是一个点，是你的整个图片，缩放也好，位移也好，甚至位置也好的一个基点
        //X点
        port.anchorOffsetX = port.width /2;
        //Y点
        port.anchorOffsetY = port.height / 2;
        //高的一半
        port.x = stageW / 2;
        // 图片的宽度的一半
        port.y = port.height /2;


        //设置遮罩
        let circle: egret.Shape = new egret.Shape();
        //绘制一个圆形来
        circle.graphics.beginFill(0xff0000);
        circle.graphics.drawCircle(stageW/2,port.height/2,port.width/2);
        circle.graphics.endFill();
        //设置原型遮罩，让头像变成圆形图片
        port.mask =circle;
}

在这里插入图片描述

定义文本并添加内容，设置属性
    ....
    
      //设置遮罩
        let circle: egret.Shape = new egret.Shape();
        //绘制一个圆形来
        circle.graphics.beginFill(0xff0000);
        circle.graphics.drawCircle(stageW/2,port.height/2,port.width/2);
        circle.graphics.endFill();
        //设置原型遮罩，让头像变成圆形图片
        port.mask =circle;

        //定义文本
        let text: egret.TextField = new  egret.TextField();
        //直接添加到列表中
        this.addChild(text);
        //设置内容
        text.text = "《乡愁》 余乡中  \n  \n小时候\n  \n乡愁是一枚小小的邮票\n \n我在这头\n \n母亲在那头\n  ...";
        //设置文本的宽度是屏幕（舞台）的宽度
        text.width = stageW;
        //设置文本的颜色
        text.background = true;
        text.backgroundColor = 0xe8fff5;

        //设置文本的位置，距离头像底部 10
        text.y = port.height+10;
        //设置文本颜色
        text.backgroundColor = 0x199fc2;
        //设置文本的高度（文本内容上下留10）
        text.height = text.height +10

        //文本 居中 （水平/垂直）
        text.textAlign = egret.HorizontalAlign.CENTER;
        text.verticalAlign = egret.VerticalAlign.MIDDLE;
        
        ...
设置显示内容可滚动
声明滚动视图

在这里插入图片描述

声明滚动容器

在这里插入图片描述

修改头像和文本，让其加载到content可滚动容器中去
  /**
     * 创建场景界面
     * Create scene interface
     */
   protected createGameScene(): void {
        let sky = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;
        //定义滚动视图
        let scroll: egret.ScrollView = new egret.ScrollView();
        this.addChild(scroll);
        //设置可滚动范围
        scroll.width = stageW;
        scroll.height = stageH;
        let content1 :egret.Sprite = new egret.Sprite();
        scroll.setContent(content1);
        ...

注：之前的代码添加在本页面的方法(this.addChild())需要修改添加到文本方法（content1.addChild()）中，其中将头像添加到文本中 是因为这里不添加会出现显示BUG

 //# 将头像添加到文本中 是因为这里不添加会出现显示BUG
        content1.addChild(circle);
        
 //# 加载到文本列表中
        content1.addChild(port);
        
  //# 设置内容 这时的手机上可以进行对文本滚动了
        text.text = "《乡愁》 余乡中  \n  \n小时候\n  \n乡愁是一枚小小的邮票\n \n我在这头\n \n母亲在那头\n  \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n";

完整代码：

  /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
        let sky = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;
        //定义滚动视图
        let scroll: egret.ScrollView = new egret.ScrollView();
        this.addChild(scroll);
        //设置可滚动范围
        scroll.width = stageW;
        scroll.height = stageH;
        let content1 :egret.Sprite = new egret.Sprite();
        scroll.setContent(content1);

        // 定义一个纹理  （头像）  
        let port: egret.Bitmap = new egret.Bitmap();
        //加载图片纹理（头像） 
        port.texture = RES.getRes('touxiang_jpg');
        //# 加载到文本列表中
        content1.addChild(port);
        //设置头像的宽高
        port.width = stageW / 2;
        port.height = stageH /2;

        //设置头像的宽高
        port.width = stageW / 2;
        port.height = stageH /2;

        //设置锚点的方式来实现水平居中
        //锚点也是一个点，是你的整个图片，缩放也好，位移也好，甚至位置也好的一个基点
        //X点
        port.anchorOffsetX = port.width /2;
        //Y点
        port.anchorOffsetY = port.height / 2;
        //高的一半
        port.x = stageW / 2;
        // 图片的宽度的一半
        port.y = port.height /2;


        //设置遮罩
        let circle: egret.Shape = new egret.Shape();
        //绘制一个圆形来
        circle.graphics.beginFill(0xff0000);
        circle.graphics.drawCircle(stageW/2,port.height/2,port.width/2);
        circle.graphics.endFill();
        //# 将头像添加到文本中 是因为这里不添加会出现显示BUG
        content1.addChild(circle);
        //设置原型遮罩，让头像变成圆形图片
        port.mask =circle;
        

        //定义文本
        let text: egret.TextField = new  egret.TextField();
        //# 直接添加到文本列表中
        content1.addChild(text);
        //# 设置内容 这时的手机上可以进行对文本滚动了
        text.text = "《乡愁》 余乡中  \n  \n小时候\n  \n乡愁是一枚小小的邮票\n \n我在这头\n \n母亲在那头\n  \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n";
        //设置文本的宽度是屏幕（舞台）的宽度
        text.width = stageW;
        //设置文本的颜色
        text.background = true;
        text.backgroundColor = 0xe8fff5;

        //设置文本的位置，距离头像底部 10
        text.y = port.height+10;
        //设置文本颜色
        text.backgroundColor = 0x199fc2;
        //设置文本的高度（文本内容上下留10）
        text.height = text.height +10

        //文本 居中 （水平/垂直）
        text.textAlign = egret.HorizontalAlign.CENTER;
        text.verticalAlign = egret.VerticalAlign.MIDDLE;
}
添加背景音乐

将音乐（MP3格式）添加到如下资源文件夹中在这里插入图片描述

..
       //添加背景音乐
        let sound = RES.getRes('xc_mp3');
        sound.play();
        }
添加缓动动画，实现头像不停旋转
   //省略代码
	...
  //添加背景音乐
        let sound = RES.getRes('xc_mp3');
        sound.play();

        //使头像转动起来
        var  change = ()=>{
            //默认 port （头像变量名）  旋转角度为0
            port.rotation  = 0;
            // 使用动画来激活头像 
            egret.Tween.get(port).to({
                //旋转360度
                rotation : 360
                //设置5秒的旋转时间 call 回调函数 一直旋转这个方法
            },5000).call(change);
        }
        //调用这个方法
        change();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/145148.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Scala中的协变点、逆变点、不变点如何确定？

Scala中的协变点、逆变点、不变点如何确定？

阅读《scala编程》时，我们知道了类的类型参数是可以型变（variance）的。型变包含以下三种： 协变（convariant）：如果S是T的子类型，则C1[S]也是C1[T]的子类型，则称C1在类型参…
阅读更多...
leetcode 208. 实现 Trie (前缀树)【字典树（前缀树）的介绍与思路整理】

leetcode 208. 实现 Trie (前缀树)【字典树（前缀树）的介绍与思路整理】

题目 Trie（发音类似 “try”）或者说 前缀树 是一种树形数据结构，用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景，例如自动补完和拼写检查。 请你实现 Trie 类： Trie() 初始化前缀树对象。…
阅读更多...
HCL Notes/Domino 12.0.2版本正式发布

HCL Notes/Domino 12.0.2版本正式发布

大家好，才是真的好。 之前代号为多瑙河版本的Notes/Domino产品，昨天晚上正式露出了神秘的面纱，版本号也正式定为12.0.2。从版本上来看，是12.0版本的小版本，但从功能和特性上来说，这完全就是一个大版本。 …
阅读更多...
Duboo优雅关闭(附源码分析)

Duboo优雅关闭(附源码分析)

Dubbo优雅关闭 1. 关闭有什么问题 当服务提供方要上线的时候，一般是通过部署系统完成实例重启。在这个过程中，服务提供方的团队并不会事先告诉调用方他们需要操作哪些机器，从而让调用方去事先切走流量。而对调用方来说，它也无法…
阅读更多...
LeetCode刷题复盘笔记—一文搞懂动态规划之72. 编辑距离问题（动态规划系列第四十一篇）

LeetCode刷题复盘笔记—一文搞懂动态规划之72. 编辑距离问题（动态规划系列第四十一篇）

今日主要总结一下动态规划的一道题目，72. 编辑距离 题目：72. 编辑距离 Leetcode题目地址 题目描述： 给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&…
阅读更多...
FME对调查云平台完成变更调查照片的批量迁移

FME对调查云平台完成变更调查照片的批量迁移

目录 前言 二、实际步骤 1.准备基础数据 2.模拟登录 3.获取图斑标识码 4.获取图形信息 5.通过空间位置关系过滤不合格照片 5.通过深度学习模型过滤照片特征错误图斑 6.照片迁移 总结 前言 又到了一年一度国土变更调查的苦日子，因为项目规则原因，…
阅读更多...
【架构设计】你的应用该如何分层呢？

【架构设计】你的应用该如何分层呢？

前言 最近review公司的代码，发现现在整个代码层级十分混乱，一个service类的长度甚至达到了5000多行。而且各种分层模型DTO、VO乱用， 最终出现逻辑不清晰、各模块相互依赖、代码扩展性差、改动一处就牵一发而动全身等问题。 我们在吸取了阿里…
阅读更多...
spring之aop底层实现

spring之aop底层实现

1.aop之ajc增强 什么是ajc增强？ ajc是aop的另外一种实现， 通过aspectj编码器来改动class源文件实现aop 2.aop之agent增强 什么是agent增强？ agent是aop的另外一种实现，是通过类加载时改动class类 3.aop之proxy增强-jdk代理 …
阅读更多...
Mac系统入门之电脑卡死怎么办

Mac系统入门之电脑卡死怎么办

当你兴冲冲的从菜鸡驿站提回来一台新的电脑,你欣喜若狂,迫不及待的拆开快递箱,里面是一台苹果电脑,这时,你不禁抓耳挠腮:Mac系统怎么用啊? 下面,这篇专栏教你如何入门Mac系统 https://blog.csdn.net/cyyyyds857/category_12163999.html –––––前言 你正兴致勃勃的写着…
阅读更多...
mysql中字符串拼接、填充和切片

mysql中字符串拼接、填充和切片

一、本文主要结构 在编程过程往往会遇到，多个字符串需要进行拼接或者填充固定值或者截取部分数据，本文主要实战下面四个函数 concat(str1, str2,…)：字符串进行拼接 lpap（）：左边填充 rpad（&…
阅读更多...
【C语言】指针经典题分析

【C语言】指针经典题分析

🏖️作者：malloc不出对象 ⛺专栏：《初识C语言》 👦个人简介：一名双非本科院校大二在读的科班编程菜鸟，努力编程只为赶上各位大佬的步伐🙈🙈 目录前言一、指针与数组经典题解析二、经…
阅读更多...
创新的概念、设计和生产鞋类和鞋类软件丨Jevero及Botcha 3D功能简介

创新的概念、设计和生产鞋类和鞋类软件丨Jevero及Botcha 3D功能简介

Jevero功能简介 重新定义鞋类发展 Jevero是图案工程师、鞋类开发人员和设计师的优秀支持。从设计到生产都在一个工具中完成。 产品功能及优势 01、更快的开发，缩短上市时间 Jevero使您的图案工程师、鞋类开发人员、工业设计师之间能够进行协作。利用Rhino平台产…
阅读更多...
两数相加 java语言

两数相加 java语言

leetcode地址：两数相加描述：给你两个 非空 的链表，表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的，并且每个节点只能存储 一位 数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除…
阅读更多...
DevData Talks | 张乐、茹炳晟、应阔浩、任晶磊：研发效能实践的2022年复盘和展望

DevData Talks | 张乐、茹炳晟、应阔浩、任晶磊：研发效能实践的2022年复盘和展望

跌宕起伏的 2022 年已经成为过去时。在这一年，我们既看到外部环境变幻莫测，也看到研发效能行业沉下心来稳步发展，从宏大的概念和价值，转向具体的问题，和务实、可行动的解决方案。 在新一年的开端上回望，20…
阅读更多...
靶机测试CyNix笔记

靶机测试CyNix笔记

靶机测试CyNix笔记 靶机描述 Level: Intermediate-HardUser flag: user.txtRoot flag: root.txtDescription: It’s a Boot2Root machine. The machine is VirtualBox compatible but can be used in VMWare as well (not tested but it should work). The DHCP will assign …
阅读更多...
webpack中模块加载器Loader、插件plugins、optimization属性

webpack中模块加载器Loader、插件plugins、optimization属性

目录 模块加载器（Loader） 导入css文件 加载图片 方法一 方法二 转换es6（向下兼容es5） html代码组件导入导出 导入less文件 自定义loader（Markdown文件加载器） markdown-loader.js文件 webpack.c…
阅读更多...
【Linux】程序的翻译过程（图示详解）

【Linux】程序的翻译过程（图示详解）

因为淋过雨，所以懂的为别人撑伞；因为迷茫过，所以懂得为别人指路。 我们都知道写好代码后，编译器会帮助我们把代码生成可执行程序，细加了解又会知道程序的生成又分为四步：预处理、编译、汇编、链接。那么这四…
阅读更多...
STM32MP157驱动开发——Linux IIO驱动(上)

STM32MP157驱动开发——Linux IIO驱动(上)

STM32MP157驱动开发——Linux IIO驱动（上 ）0.前言一、IIO 子系统简介1.iio_dev 结构体2.iio_dev 申请与释放3.iio_dev 注册与注销4.iio_info5.iio_chan_spec二、驱动开发1. ICM20608 的 IIO 驱动框架搭建2.IIO 设备申请与初始化3.基于以上驱动框架开发 I…
阅读更多...
[JavaEE初阶] 线程安全问题的原因和解决方案

[JavaEE初阶] 线程安全问题的原因和解决方案

努力努力,月薪过亿!!! 格局打开~~~ 文章目录前言1. 线程安全问题的概念2. 线程安全问题的原因3. 线程安全问题解决--加锁3. synchronized4. 死锁4.1 产生死锁的情况4.3 产生死锁的必要条件4.4 避免死锁的方法前言 线程安全这里可能会出道面试题,在日常工作中也是很重要的内容.…
阅读更多...
MathType公式对齐不正确

MathType公式对齐不正确

MathType公式对齐不正确1.软件环境⚙️2.问题描述🔍3.解决方法🐡4.1.通过标尺对齐4.2.通过输入具体的制表符位置对齐1.软件环境⚙️ Windows10 教育版64位 Word 2021 MathType 7 2.问题描述🔍 在使用Word写论文的时候，总是避免不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023