PIXI_锚点图片位控
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.yzd.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
PIXI_锚点图片位控相关推荐
- 原创“.NET研究”企业级控件库之图片浏览控件
在上两篇:我介绍了原创企业级控件库之组合查询控件 和原创企业级控件库之大数据量分页控件,受到了很多朋友的支持,给了我很大的动力,在此我特表感谢.有的朋友要求把源码提供上来,我在第一篇就讲了,源码会在我 ...
- Android学习笔记26：图片切换控件ImageSwitcher的使用
在Windows操作系统中,要查看多张图片,可以通过使用"Windows照片查看器"在"上一张"和"下一张"之间切换,进行多张图片的浏览. ...
- 图片盒子控件 winform 114868210
图片盒子控件 winform 114868210 引入控件 放图片 控制图片的大小 效果 图片变的与控件一模一样大
- matlab修改图片位深度_如何利用matlab统一处理照片亮度对比度
第一:下软件MATLAB,和插件SHINEtoolbox.安装路径最好不要有中文. 将插件复制到文件夹下见图片 注意:不用学习matlab的具体应用,会使用插件就行了,插件是已经做好的编程,仅需把插件 ...
- 图片剪裁控件——ClipImageView
这段时间在做自己的项目时,须要使用到图片剪裁功能,当时大概的思考了一些需求.想到了比較简单的实现方法.因此就抽了点时间做了这个图片剪裁控件--ClipImageView 这里先贴上ClipImageV ...
- 64位win7/win8/win10系统注册32位控件（.OCX）
64位win7/win8/win10系统注册32位控件(.OCX) win7/win8/win10问题所在: 64位系统一般都是可以安装32位程序的,只是需要执行 C:\Windows\SysWOW6 ...
- Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来
转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/8769904 首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我 ...
- Android微信九宫格图片展示控件
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/214 Android微信九宫格图片展示控件 半年前,公司产 ...
- 模仿微信九宫格图片展示控件
主题 仿微信九宫格图片展示控件 github地址:点击打开链接 使用方法以及源码都在github上面
最新文章
- Hadoop之zookeeper快速安装
- 数据结构 · 二叉树遍历
- java day07第七课静态的和单例设计模式
- 计算机科学与技术专业用英语怎么写,计算机科学与技术专业专业英文简历模板...
- linux设备模型，bus，device，driver，实验遇到的问题
- 批量生成数组_JavaScript【重温基础】13.迭代器和生成器
- 光伏发展路线图将发布 促产业优胜劣汰
- React-引领未来的用户界面开发框架-读书笔记（二）
- Go--4大基本数据类型之布尔类型
- 2022年中国美妆护肤品行业投资研究报告
- 接口规范 6. 查看在线用户
- c#app.config配置文件使用
- #333. 【NOIP2017】宝藏
- 关于欧几里德第五公设的感言
- bzoj2339: [HNOI2011]卡农
- Linux下如何识别TF卡
- 【NovelAI】在QQ群中部署AI画图机器人
- SpringMVC复习
- 陆白_淘宝电商代运营
- warnings模块