Pixi.js学习（四）鼠标跟随、元素组合与图片位控

2024-06-09 10:18:02
开发
30

一、鼠标移动跟随

1.1 获取鼠标坐标

程序会记录鼠标在元素中触发时间的坐标位置（x,y）[监听器引入] 我们可以通过在自定义函数中设置参数获取触发事件时的（x,y）

getlocalPosition()

获取某个元素鼠标事件的触发位置

实例：

function move(event){
    var pos = event.data.getLocalPosition(app.stage);
    var x = pos.x ;
    var y = pos.y ;
    console.log("当前水平坐标为："+x+" "+"当前垂直坐标为："+y)
    }

注释：

event：触发的事件

data：数据

getlocalPosition()：获取某个元素鼠标事件的触发位置

var x = pos.x ;获取事件触发时的x坐标

var y = pos.y ;获取事件触发时的y坐标

任意一种鼠标事件，都可以通过以上案例的方式获取到鼠标坐标。

1.2 鼠标跟随

鼠标跟随就是控制元素，可以跟着鼠标指针一起移动。

思路：

鼠标移动触发mousemove事件

在事件中通过event.data.getLocalposition(app.stage)获取当前鼠标坐标(x,y)

把当前获取到的（x,y）设置为图片元素定位坐标

代码：

<script type="text/javascript">
			
			var app=new PIXI.Application(512,768);
			
			document.body.appendChild(app.view);																							

			function add(img,x,y){
				//创建图片元素
				var a=new PIXI.Sprite.fromImage(img);
				//将元素添加到页面中
				app.stage.addChild(a);
				//调整位置
				a.x=x
				a.y=y 
				
				//对当前元素直接开启监听
				a.interactive=true;
				
				return a;
			}

			//添加背景
			var bg = add("img/bg_01.png",0,0); 
			//添加飞机
			var plane = add("img/plane_blue_01.png", 100, 300);

			//设置飞机锚点
			plane.anchor.set(0.5);
			
			var zuobiao=new PIXI.Text("坐标：");
			app.stage.addChild(zuobiao);
			zuobiao.style.fill="#000000";
			zuobiao.x=50;
			zuobiao.y=40;

			//为背景设置鼠标移动事件绑定
			bg.on("mousemove",mousemove);
			//提供函数
			function mousemove(event){

				//获取鼠标触发时的坐标
				var pos=event.data.getLocalPosition(app.stage)
				//飞机元素鼠标跟随
				plane.x=pos.x
				plane.y=pos.y

				//将坐标显示到页面上			
				zuobiao.text = "坐标 X："+pos.x+"\n"+"坐标 Y：" + pos.y
				

			}

			
			
			
			
			
			
			
					
					
					
</script>

运行效果：

其中：zuobiao.text = "坐标 X："+pos.x+"\n"+"坐标 Y：" + pos.y

这句代码使用了字符拼接，将" "内的字符用 + 和获取到的字符进行了拼接

"\n" 是转义字符表示换行

我们可以看到这样坐标显示的总有一大串小数，我们不需要那么精确，小数太多反而影响观看，因此可以使用取整。

取整常用有方法：

//向上取整
Math.ceil(参数)

//向下取整
Math.floor()

//忽略小数部分
parseInt(参数)

然后我们对原代码进行编辑修改。

修改函数内的代码为：

            //提供函数
			function mousemove(event){

				//获取鼠标触发时的坐标
				var pos=event.data.getLocalPosition(app.stage)
				//飞机元素鼠标跟随
				plane.x=pos.x
				plane.y=pos.y
                
                //对获取到的坐标进行取整
				var zx=Math.ceil(pos.x)
				var zy=Math.ceil(pos.y)

				//将坐标显示到页面上			
				zuobiao.text = "坐标 X："+zx+"\n"+"坐标 Y：" + zy
				

			}

我们可以看到此时的坐标均为整数：

此时坐标显示便于观看。

二、锚点、元素组合

2.1 锚点

元素的锚点，也可以叫做定位点，指元素以x，y哪个点来对齐该坐标。

语法格式：

元素.anchor.set(值,值)

实例：

plane.anchor.set(1,1);

2.2 元素组合

将独立的多个元素合并到一起，视为一个整体，便于程序对多个元素的统一处理。

			//将元素添加到另一个元素中
			var liaoji1 = add("img/liaoji1.png", -120, 10)
			var liaoji2 = add("img/liaoji2.png", 60, 10)
			//将元素添加到舞台中
			plane.addChild(liaoji1,liaoji2);

liaoji1：添加元素定义的名称

add("img/liaoji1.png", -120, 10)：添加元素的本地路径

-120，10：添加元素位于被添加元素锚点的坐标

注意：辅元素添加到主元素中时，辅元素的默认起始位置等于主元素的锚点当为辅元素设置位置时（x,y），x与y表示的是辅元素与主元素之间的距离。

代码：

		<script type="text/javascript">
			
			var app=new PIXI.Application(500,700);
			
			document.body.appendChild(app.view);																							
			function add(img,x,y){
				//创建图片元素
				var a=new PIXI.Sprite.fromImage(img);
				//将元素添加到页面中
				app.stage.addChild(a);
				//调整位置
				a.x=x
				a.y=y 
				
				//对当前元素直接开启监听
				a.interactive=true;
				
				return a;
			}


			var bg = add("img/bg_01.png",0,0); 
			var plane = add("img/plane_blue_01.png", 250, 350);
			
			plane.anchor.set(0.5,0.5);
			


			//为个元素绑定移动事件
			bg.on("mousemove",planemove);
			
			function planemove(event){
				var pos=event.data.getLocalPosition(app.stage)
				
				plane.x=pos.x;
				plane.y=pos.y;
				
			}
			
			
			//将元素添加到另一个元素中
			var liaoji1 = add("img/liaoji1.png", -120, 10)
			var liaoji2 = add("img/liaoji2.png", 60, 10)
			//将元素添加到舞台中
			plane.addChild(liaoji1,liaoji2);
			
			
								
		</script>

运行效果：

此时小飞机跟随大飞机的移动，它和大飞机成为一个整体。

三、图片图层

图片图层：图片在应用窗口的层级

默认图层效果：先插入的元素低于后插入的元素（后插入的元素会遮盖先插入的元素）

合并元素图层效果：辅元素会与主元素图层一致并将主元素向下压一级（辅元素会遮盖主元素）原来遮盖主元素的其他元素，现在将同时遮盖主元素与辅元素

		<script type="text/javascript">
			

		
			var app = new PIXI.Application(1008,640);
			document.body.appendChild( app.view );
			//第一个元素,层级最低的元素 主元素
			var bg = new PIXI.Sprite.fromImage("img/bg1.png");
			bg.x = 0;
			bg.y = 0;
			app.stage.addChild(bg);
			//第二个元素 此图层高于背景
			var js = new PIXI.Sprite.fromImage("img/js1.png");
			js.x = 600;
			js.y = 400;
			app.stage.addChild(js);

					
					
		</script>

效果展示：

注意：当两个元素合并时，辅元素的默认宽高会受到主元素的影响，如果不希望辅元素受到影响，需要为辅元素单独设置宽高。

四、实战

例题一：完成合金弹头人物交互

要求：

创建应用，宽600，高380.
左右键，人物移动转身。（人物上半身，下半身应该是主辅元素的关系）

结果图：

例题二：反恐重击瞄准和弹痕

要求：

创建应用，宽800，高600.
瞄准镜瞄准移动显示坐标
按下鼠标留下弹坑

示范图：

例题一代码：

		<script type="text/javascript">
			
			var app=new PIXI.Application(600,380);
			
			document.body.appendChild(app.view);																							
			function add(img,x,y){
				//创建图片元素
				var a=new PIXI.Sprite.fromImage(img);
				//将元素添加到页面中
				app.stage.addChild(a);
				//调整位置
				a.x=x
				a.y=y 
				
				//对当前元素直接开启监听
				a.interactive=true;
				
				return a;
			}


			var bg = add("img/bg.png",0,0); 
			var shen = add("img/image1390.png", 300, 250);
			var zuo=add("img/zuo.png", 20, 250);
			var you=add("img/you.png", 90, 250);
			//
			shen.anchor.set(0.5);
			//初始为左
			shen.scale.x = 1
			zuo.on("click",fzuo);
			you.on("click",fyou);


			function fzuo(){
				if(shen.scale.x == 1){
				    shen.x-=20;
				}else{
					shen.scale.x = 1
					// shen.x+=20;
				}	
								
			}
			function fyou(){
				if(shen.scale.x == -1){
				    shen.x+=20;
				}else{
					shen.scale.x = -1
					// shen.x+=20;
				}	

			}


			
			
			//将元素添加到另一个元素中
			var jiao = add("img/image1334.png", 0,18 )
			shen.addChild(jiao);
			//将元素添加到舞台中
			

					
		</script>

运行效果：

例题二代码：

		<script type="text/javascript">
			
			var app=new PIXI.Application(800,600);
			
			document.body.appendChild(app.view);																							

			function add(img,x,y){
				//创建图片元素
				var a=new PIXI.Sprite.fromImage(img);
				//将元素添加到页面中
				app.stage.addChild(a);
				//调整位置
				a.x=x;
				a.y=y;
				
				//对当前元素直接开启监听
				a.interactive=true;
				
				return a;
			}


			var bg = add("img/bg.jpg",0,0); 
			var miao = add("img/miao.png",0,0);
			
			//设置瞄准锚点
			miao.anchor.set(0.5);
			
			var zuobiao=new PIXI.Text("坐标：");
			app.stage.addChild(zuobiao);
			zuobiao.style.fill="000000";
			zuobiao.x=30;
			zuobiao.y=500;


			
			bg.on("mousemove",mousemove);
			miao.on("click",danmove);
			
			function danmove(event){
				var pos=event.data.getLocalPosition(app.stage)
				add("img/dan.png",pos.x,pos.y);
			}



			//瞄准镜瞄准移动 添加坐标函数
			function mousemove(event){
				var pos=event.data.getLocalPosition(app.stage)	
				miao.x=pos.x;
				miao.y=pos.y;

				//将坐标显示到页面上
				zuobiao.text="X："+Math.ceil(pos.x)+"\n"+"Y："+Math.ceil(pos.y);

				
			}

			
			
						
					
		</script>

运行结果：

本文所用到的图片以及项目源码：

https://download.csdn.net/download/qq_56376552/89412764

总结

本文鼠标跟随、元素组合与图片位控就此结束，

如有错误或者网址更新，步骤更改，代码错误欢迎私信作者进行更正，

感谢您的观看。

原文地址:https://blog.csdn.net/qq_56376552/article/details/139375367 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1799626980254158848.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部