一、创建文本元素

文本元素是用来在应用窗口中显示一段文字(字符 文本)

示例

1、创建文本元素

// new PIXI.Text(); :创建文本元素
// "得分:10000" : 文本元素中的内容(文字、字符)
// var score : 文本元素的别名
var score = new PIXI.Text("得分:10000");

2、在应用窗口中添加文本元素

//在名为app的应用窗口中(stage),添加一个元素(addChild),元素名为 score
app.stage.addChild( score );
注意:文本元素中的默认字体颜色为黑色

二、设置文本元素属性

属性:可以理解为配置,我们可以自定义属性的值来修改原有的配置

示例

//score  : 文本元素的名称
//style  : 风格
//fill  : 填充颜色
// = "green" :绿色
//修改文本元素的属性,将颜色改为白色
score.style.fill = "green";
我们可以将“ ”号中的颜色改为自己需要的颜色

颜色可以使用十六进制颜色编码表示

十六进制颜色编码:为每种颜色匹配的一个编号,不需要背,当需要使用某种颜色时,可以从百 度中直接输入十六进制颜色编码表,找到自己需要 的颜色 编码

使用十六进制 颜色编码设置文本颜色

// "#cff060" :就表示了一种颜色
score.style.fill = "#cff060"

三、定位元素

在应用窗口中元素默认的位置实在左上角(原点),可以通过修改定位点来改变元素的位置 定位点由两部分构成,分别是x坐标点与y坐标点

例如:

chap2_文本元素与元素属性

1.应用窗口的宽度为500px,高度为400px,以左上角为原点向下延伸属于y轴,向右延伸属于x轴,

2.元素越靠右x的值越大,元素越靠下y的值越大

3.设置元素的x坐标与y坐标来定义元素在窗口中的位置

调整元素位置代码

//设置文本元素位置
元素别名.x = 340;//设置x坐标为340
元素别名.y = 20;// 设置y坐标为20

调整后效果

chap2_文本元素与元素属性

四、练习赛课游戏界面

1.示例代码

<!-- 引入外部的pixi.min.js -->
<script src="../js/pixi.min.js"></script>
<script>
//1、创建应用窗口(宽 480 ,高 700)
var app = new PIXI.Application(480,700);
//2、在页面中添加应用窗口
document.body.appendChild( app.view );
//3、创建图片元素(背景图片)路径:img/bg.jpg
var bg = new PIXI.Sprite.fromImage("img/bg.jpg");
//4、在应用窗口中添加图片
app.stage.addChild( bg );
//5、创建图片元素(赛车1图片)路径:img/saiche-2_03.png
var c1 = new PIXI.Sprite.fromImage("img/saiche-2_03.png");
//6、设置图片元素位置:x = 165 , y = 275
c1.x = 165;
c1.y = 275;
//7、在应用窗口中添加图片
app.stage.addChild( c1 );
//8、创建图片元素(赛车2图片)路径:img/saiche-3_03.png
var c2 = new PIXI.Sprite.fromImage("img/saiche-3_03.png");
//9、设置图片元素位置:x = 255 , y = 575
c2.x = 255;
c2.y = 575;
//10、在应用窗口中添加图片
app.stage.addChild(c2);“
</script>

2.运行效果

chap2_文本元素与元素属性

3.编程套路

1、引用pixi.min.js
<script src="路径"></script>
2、加入script标签(将来在script标签中编码)
<script> </script>
3、创建应用窗口元素
var app = new PIXI.Application(宽,高);
4、在页面中添加应用窗口元素
document.body.appendChild( app.view );
5、根据需要创建元素(文本、图片)设置元素属性(颜色、位置)
6、在应用窗口中添加元素
app.stage.addChild( 元素名 );
如果页面中由多个元素构成 5/6步,反复编写

未经允许不得转载:作者:西瓜君✔, 转载或复制请以 超链接形式 并注明出处
原文地址:《chap2_文本元素与元素属性》 发布于2020-03-09

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册