PIXI_锚点&图片位控

锚点

概念：元素与坐标所对齐的位置，应用中所有元素默认的锚点为左上角
修改锚点
1、
元素.anchor.x=x方向锚点
元素.anchor.y=y方向锚点
2、
元素.anchor.set（x,y）
同时设置锚点
锚点取值范围：0~1之间，默认为x=0，y=0

		//设置舞台
		var app=new PIXI.Application(800,600)
		document.body.appendChild(app.view)
		// 设置背景
		var back = new PIXI.Sprite.fromImage('img/bg1.jpg')
		app.stage.addChild(back)
		// 准星
		var zx = new PIXI.Sprite.fromImage('img/zhunxing.png')
		app.stage.addChild(zx)
		//设置准星起始X,Y位置
		zx.x=381;
		zx.y=256;
		//设置准星锚点为中心
		zx.anchor.set(0.5,0.5)
		
		//注意在这个里面监听时不要去监听准星，如果监听了准星，可以实现准星跟随鼠标移动，但是之后click就没有效果了
		//因为你在点击时，单击的是准星的图层，没有单击到背景图，造成其单击效果失效

		//监听背景
		back.interactive = true;
		//定义准星的处理事件函数
		function one(event){
			//获取鼠标移动时的X,Y坐标
			var pos = event.data.getLocalPosition(app.stage)
			//将坐标赋值给准星的x,y坐标，实现准星跟随鼠标移动
			zx.x=Math.round(pos.x);
			zx.y=Math.round(pos.y);
		}
		//当鼠标移动时触发one函数
		back.on('pointermove',one)

效果图

元素合并

讲独立的多个元素合并到一起，视为一个整体，便于程序对多个元素进行统一操作
	 **合并后效果**
	1、主元素移动时副元素会跟随移动
	2、副元素的坐标以主元素的锚点位置为基准
	3、副元素的x,y坐标不再表示副元素在应用窗口的位置，而是与主元素锚点的间距
	4、当主元素调整宽度与高度时，副元素会等比例调整
	5、副元素的图层与主元素一致
	例子
	// 将副元素添加到主元素中[元素合并]
	splan.addChild(ljone)

修改后代码

//设置舞台
		var app=new PIXI.Application(800,600)
		document.body.appendChild(app.view)
		// 设置背景
		var back = new PIXI.Sprite.fromImage('img/bg1.jpg')
		app.stage.addChild(back)
		// 准星
		var zx = new PIXI.Sprite.fromImage('img/zhunxing.png')
		app.stage.addChild(zx)
		zx.x=381;
		zx.y=256;
		//设置准星锚点为中心
		zx.anchor.set(0.5,0.5)
		//文字X坐标
		var t = new PIXI.Text("X:000")
		//文字Y坐标
		var z = new PIXI.Text("Y:000")
		//添加坐标
		app.stage.addChild(t)
		app.stage.addChild(z)
		//设置文字颜色
		t.style.fill="#fff";
		z.style.fill="#fff";
		//设置字体大小
		t.style.fontSize=30;
		z.style.fontSize=30;
		//监听背景
		back.interactive = true;
		//定义准星的处理事件函数
		function one(event){
			//获取鼠标移动时的X,Y坐标
			var pos = event.data.getLocalPosition(app.stage)
			//将坐标赋值给准星的x,y坐标，实现准星跟随鼠标移动
			zx.x=Math.round(pos.x);
			zx.y=Math.round(pos.y);
			//修改文字内容，实现数值跟随鼠标位置变化
			t.text="X:"+zx.x;
			z.text="Y:"+zx.y;
		}
		//定义子弹的处理事件函数
		function fire(event){
			//子弹
			var zd = new PIXI.Sprite.fromImage('img/danhen.png')
			var pos = event.data.getLocalPosition(app.stage)
			app.stage.addChild(zd)
			zd.x=pos.x;
			zd.y=pos.y
			zd.anchor.set(0.5,0.5)
		}
		t.y=500;
		t.x=45;
		z.y=530;
		z.x=45;
		//当鼠标移动时触发one函数
		back.on('pointermove',one)
		//当鼠标单击时触发fire函数
		back.on("click",fire)

效果图

图片图层

	 图层：图片在应用中的上下层级(层级越高能遮盖的元素就越多，层级越低将会被更多的元素所遮盖)
	 图层默认图层：受元素的添加顺序影响(后来者居上),元素添加的时机越晚他的图层就越靠上
	 
	 //当鼠标移入到按钮时更改为小手图标；
	 .buttonMode=true