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

news2024/10/6 14:28:49

目录

一、鼠标移动跟随

1.1 获取鼠标坐标

1.2 鼠标跟随

二、锚点、元素组合

2.1 锚点

2.2 元素组合

三、图片图层

四、实战

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

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

例题一代码：

例题二代码：

总结

前言

为了提高作者的代码编辑水品，作者在使用博客的时候使用的集成工具为 HBuilderX。

下文所有截图使用此集成工具，读者随意。

此系列文章需要：HTML ，JavaScript 基础知识

操作系统：

版本    Windows 11 家庭中文版
版本    23H2
安装日期    ‎2024/‎5/‎28
操作系统版本    22631.3593
体验    Windows Feature Experience Pack 1000.22700.1003.0

一、鼠标移动跟随

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

总结

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

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

感谢您的观看。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1813385.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

利用flask + pymysql监测数据同步中的数据是否完整

利用flask + pymysql监测数据同步中的数据是否完整

一、背景 最近项目搞重构&#xff0c;将原有的系统拆分成了多个子系统。但是有数据表需要在不同系统中数据&#xff0c;同时为了解决项目性能最了一个很简单的方案&#xff0c;就是公共数据存在每个系统之中。 二、分析 分析这些表&#xff0c;这些表相比源数据表&#xff0c;表…
阅读更多...
ArrayList和LinkedList的区别！！！

ArrayList和LinkedList的区别！！！

总结&#xff1a; 1、数据结构的实现 ArrayList&#xff1a;动态数组。 LinkedList&#xff1a;双向链表。 2、时间复杂度不同 ArrayList&#xff1a;O(1) LinkedList: O(n) ①&#xff1a;随机访问---- ArrayList > LinkedList &#xff08;ArrayList采用下标&#xff0…
阅读更多...
＜＜虾皮shopee来赞达lazada＞＞商品详情API@各区域item~get

＜＜虾皮shopee来赞达lazada＞＞商品详情API@各区域item~get

数据采集API接口——搭建电商数据采集系统 可采集30多个电商平台数据&#xff0c;采集字段高达40多个&#xff0c;包含标题、价格、图片等&#xff1b; 可采集单个SKU某个时间段的全数据&#xff1b; 采集数据准确率高达98%。 虾皮shopee电商数据&#xff08;来赞达lazada同理&…
阅读更多...
一个数据查询导出工具

一个数据查询导出工具

数据查询导出工具 安装说明 安装完成后在桌面会创建“数据查询导出工具”的查询工具。 程序初始化 配置数据库连接 首次运行&#xff0c;请先配置数据库连接 点击“数据库连接”后&#xff0c;会出现下面的窗体&#xff0c;要求输入维护工程师密码。&#xff08;维护工程师密码…
阅读更多...
Android帧绘制流程深度解析 （一）

Android帧绘制流程深度解析 （一）

Android帧绘制技术有很多基础的知识&#xff0c;比如多buffer、vsync信号作用等基础知识点很多笔记讲的已经很详细了&#xff0c;我也不必再去总结&#xff0c;所以此处不再过多赘述安卓帧绘制技术&#xff0c;基础知识这篇文章总结的很好&#xff0c;一文读懂"系列&#…
阅读更多...
7.数据集处理库Hugging Face Datasets

7.数据集处理库Hugging Face Datasets

数据集处理库Hugging Face Datasets Datasets 首先解决数据来源问题 使用 Datasets 下载开源数据集 Datasets.load_dataset 实现原理简介 构造 DatasetBuilder 类的主要配置 BuilderConfig 如果您想向数据集添加额外的属性，例如类别标签。有两种方法来填充BuilderConfig类或其…
阅读更多...
web刷题记录（5）

web刷题记录（5）

[羊城杯 2020]easycon 进来以后就是一个默认测试页面&#xff0c; 在这种默认界面里&#xff0c;我觉得一般不会有什么注入点之类的&#xff0c;所以这里先选择用御剑扫扫目录看看有没有什么存在关键信息的页面 扫了一半发现&#xff0c;很多都是和index.php文件有关&#xff0…
阅读更多...
【docker】adoptopenjdk/openjdk8-openj9:alpine-slim了解

【docker】adoptopenjdk/openjdk8-openj9:alpine-slim了解

adoptopenjdk/openjdk8-openj9:alpine-slim 是一个 Docker 镜像的标签&#xff0c;它指的是一个特定的软件包&#xff0c;用于在容器化环境中运行 Java 应用程序。 镜像相关的网站和资源&#xff1a; AdoptOpenJDK 官方网站 - AdoptOpenJDK 这是 AdoptOpenJDK 项目的官方网站&…
阅读更多...
柯桥成人外语培训|职场商务英语剑桥国际英语口语外贸商务英语

柯桥成人外语培训|职场商务英语剑桥国际英语口语外贸商务英语

01 “puppy love”是什么意思&#xff1f; 大家都知道&#xff0c;puppy有“幼犬&#xff0c;小狗”的意思&#xff0c;love是“爱”&#xff0c;那puppy love是什么意思呢&#xff1f;可不是字面上表达的小狗的爱哦&#xff01; 其实&#xff0c;"puppy love"真正的…
阅读更多...
小巧精悍的电脑磁盘分析工具，程序大小仅830KB，支持汉化。

小巧精悍的电脑磁盘分析工具，程序大小仅830KB，支持汉化。

一、简介 1、一款小巧精悍的电脑磁盘分析工具&#xff0c;程序大小仅830KB&#xff0c;支持汉化&#xff1b;当你启动它&#xff0c;指定要分析的系统盘&#xff0c;它会自动将文件和文件夹按照所占用空间大小从小到大可视化显示。各个文件会以大小不同的块展示出来&#xff0c…
阅读更多...
VirtFuzz：一款基于VirtIO的Linux内核模糊测试工具

VirtFuzz：一款基于VirtIO的Linux内核模糊测试工具

关于VirtFuzz VirtFuzz是一款功能强大的Linux内核模糊测试工具&#xff0c;该工具使用LibAFL构建&#xff0c;可以利用VirtIO向目标设备的内核子系统提供输入测试用例&#xff0c;广大研究人员可以使用该工具测试Linux内核的安全性。 工具要求 1、Rust&#xff1b; 2、修补的Q…
阅读更多...
word空白页删除不了怎么办？

word空白页删除不了怎么办？

上方菜单栏点击“视图”&#xff0c;下方点击“大纲视图”。找到文档分页符的位置。将光标放在要删除的分节符前&#xff0c;按下键盘上的“Delet”键删除分页符。
阅读更多...
Linux基础（2）基础命令与vim

Linux基础（2）基础命令与vim

文件的复制和移动 cp 拷贝文件和目录 cp file file_copy --> file 是目标文件&#xff0c;file_copy 是拷贝出来的文件 cp file one --> 把 file 文件拷贝到 one 目录下&#xff0c;并且文件名依然为 file cp file one/file_copy --> 把 file 文件拷贝到 one 目录下…
阅读更多...
vue input 限制输入，小数点后保留两位 以及 图片垂直居中显示 和 分享 git 小技巧

vue input 限制输入，小数点后保留两位 以及 图片垂直居中显示 和 分享 git 小技巧

&#xff08;1&#xff09;input 限制输入&#xff0c;小数点后保留两位 <template><div><el-input v-model"number" input"checkNumber" blur"completeNumber" placeholder"请输入"></el-input></div>…
阅读更多...
军事地图管理系统|DW-S403实现军用地图科学管理

军事地图管理系统|DW-S403实现军用地图科学管理

军用地图管理系统DW-S403系统通过数据采集、物联网技术&#xff0c;实现数字化智能管控&#xff0c;以提高军用物资的地图的科学化管理&#xff0c;也有助于消除生产过程中的不确定性。 军用地图是反映实际地形的最可靠的资料&#xff0c;是指挥员的"左膀右臂"。在作…
阅读更多...
[Algorithm][动态规划][二维费用的背包问题][一和零][盈利计划]详细讲解

[Algorithm][动态规划][二维费用的背包问题][一和零][盈利计划]详细讲解

目录 0.原理讲解1.一和零1.题目链接2.算法原理详解3.代码实现 2.盈利计划1.题目链接2.算法原理详解3.代码实现 0.原理讲解 本质仍然是背包问题&#xff0c;但是相较于普通的背包问题&#xff0c;只是限制条件多了一个而已 1.一和零 1.题目链接 一和零 2.算法原理详解 思路&…
阅读更多...
03-3.5.1~4 特殊矩阵的压缩存储

03-3.5.1~4 特殊矩阵的压缩存储

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…
阅读更多...
vue elementui 自定义loading显示的icon 文本 背景颜色

vue elementui 自定义loading显示的icon 文本 背景颜色

<div v-loading"modalLoading"element-loading-text"拼命加载中"element-loading-spinner"el-icon-loading"element-loading-background"rgba(0, 0, 0, 0.8)" class"loading-box" v-if"modalLoading"></…
阅读更多...
由于人工智能，他们的语言更容易理解

由于人工智能，他们的语言更容易理解

密歇根大学、墨西哥国家天体物理研究所和光学与电子研究所的研究人员正在使用人工智能模型来破译狗的语言。 在国际会议上提出的新研究展示了先进的人工智能 模型如何帮助人类了解动物。 密歇根大学人工智能实验室主任 Rada Mihalcea 强调了这项研究的重要性&#xff1a;对于…
阅读更多...
初出茅庐的小李博客之CJSON库解析心知天气数据

初出茅庐的小李博客之CJSON库解析心知天气数据

心知天气数据JSON格式介绍 JSON格式介绍http://t.csdnimg.cn/pJX1n 下面代码是利用CJSON库进行数据解析 解析代码 #include <stdio.h> #include <string.h> #include "cJSON.h" // 假设你的CJSON库头文件路径是正确的int main(void) {// 提供的JSON…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023