标签：元素属性

chap3_常用元素属性

一、元素属性分类

[wm_tips]1、公共属性：所有元素都具备的属性（例如：x,y）
2、独有属性：只作用于某一种元素（例如：style.fill 字体颜色）

[/wm_tips]

二、常用属性

【了解即可】旋转弧度示例

[wm_notice]一个圆是360°,也是2π
1角度 = 360分之1 ，也就是2π的360分之1
2π的360分之 1 = 180分之 π
所以1角度 = π/180 rad[/wm_notice]

三、代码示例

<body>
		<script src="../js/pixi.min.js"></script>
		<script>
			//1.创建应用窗口
			var app = new PIXI.Application(1010,650);
			//2.在页面添加应用窗口
			document.body.appendChild(app.view);
			//3.创建图片元素（背景图）
			 var bj = new PIXI.Sprite.fromImage("img/bg1.png");
			//4.在应用窗口添加背景图片
			 app.stage.addChild(bj);
			//5.创建图片元素
			var kk = new PIXI.Sprite.fromImage("img/item.png");
			//6.设置图片位置
			kk.x = 2;
			kk.y = 1;
			//7.在应用窗口中添加图片
			app.stage.addChild( kk );
			//8.创建文本元素
			var fs= new PIXI.Text("520");
			//9.创建文本颜色
			fs.style.fill = "#000000";
			//10设置文本元素的位置
			fs.x = 18;
			fs.y = 64;
			//11.在应用窗口中添加文本内容
			app.stage.addChild(fs);
			//12.创建僵尸图片元素
			var js3 = new PIXI.Sprite.fromImage("img/js3.png");
			//13.设置图片位置
			js3.x = 650;
			js3.y = 120;
			//14.在应用窗口中添加图片
			app.stage.addChild(js3);
			//15.创建僵尸图片元素
			var js2 = new PIXI.Sprite.fromImage("img/js2.png");
			//16.设置图片位置
			js2.x = 650;
			js2.y = 230;
			//17.在应用窗口添加图片
			app.stage.addChild(js2);
			//18.创建僵尸图片元素
			var js4 = new PIXI.Sprite.fromImage("img/js4.png");
			//19.设置图片位置
			js4.x = 450;
			js4.y = 340;
			//20.在应用窗口添加图片
			app.stage.addChild(js4);
			//21.创建僵尸图片元素
			var js1 = new PIXI.Sprite.fromImage("img/js1.png");
			//22.设置图片位置
			js1.x = 800;
			js1.y = 340;
			//23.在应用窗口添加图片
			app.stage.addChild(js1);
		</script>
	</body>

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]