PIXI_锚点&图片位控

最新推荐文章于 2024-10-02 07:01:53 发布

「已注销」

最新推荐文章于 2024-10-02 07:01:53 发布

阅读量2.2k

点赞数

分类专栏： PIXI 文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/sttk111/article/details/105690196

版权

本文介绍了在PIXI.js中如何操作锚点进行元素定位，包括元素的锚点设置，通过`.anchor.x`和`.anchor.y`属性调整锚点位置，以及使用`.anchor.set(x, y)`同时设置锚点。此外，还探讨了元素合并和图片图层的相关技巧，展示了修改锚点后的效果。" 109184802,8153423,开放实体识别数据集大全,"['自然语言处理', '深度学习', '命名实体识别', '数据集', 'pytorch']

摘要由CSDN通过智能技术生成

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就没有效果了
		//因为你在点击时，单击的是准星的图层，没有单击到背景图，造成其单击效果失