chap2_文本元素与元素属性

 一、创建文本元素

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

示例

1、创建文本元素

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

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

//在名为app的应用窗口中(stage),添加一个元素(addChild),元素名为 score
app.stage.addChild( score );

[wm_notice]注意:文本元素中的默认字体颜色为黑色[/wm_notice]

二、设置文本元素属性

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

示例

//score  : 文本元素的名称
//style  : 风格
//fill  : 填充颜色
// = "green" :绿色
//修改文本元素的属性,将颜色改为白色
score.style.fill = "green";

[wm_notice]我们可以将“ ”号中的颜色改为自己需要的颜色[/wm_notice]

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

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

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

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

三、定位元素

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

例如:

[wm_red]

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

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

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

[/wm_red]

调整元素位置代码

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

调整后效果

四、练习赛课游戏界面

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.运行效果

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( 元素名 );

[wm_warn]如果页面中由多个元素构成 5/6步,反复编写[/wm_warn]

发表评论