一、获取鼠标坐标

程序会记录鼠标在元素中触发事件时的坐标位置(x,y) 我们可以通过在自定义函数中设置参数获得触发事件时的x,y

示例

var  app = new PIXI.Application(512,768);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("img/bg_01.png");
app.stage.addChild(bg);
bg.interactive = true;
bg.on("click",move);
function move(event){
var  pos = event.data.getLocalPosition(app.stage);
var x = pos.x;
var y = pos.y;
console.log(x+"  "+y);
}

1、创建应用窗口并添加到页面中

var  app = new PIXI.Application(512,768);
document.body.appendChild(app.view);

2、创建背景图片并添加到 窗口中

var bg = new PIXI.Sprite.fromImage("img/bg_01.png");
app.stage.addChild(bg);

3、设置背景图片 可以互动

bg.interactive = true;

4、为背景图片添加mousemove事件,并在事件发生时调用move函数

bg.on("click",move);

5、定义move函数,添加event参数,通过event获取鼠标 坐标

//event :被触发的事件
//data ; 数据
//getLocalPosition ; 获取某个元素鼠标事件触发位置
//app.stage ; 仅在获取程序窗口中的鼠标位置

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

//console.log(x+"  " +y) ; 开发者工具的控制台中输出x坐标与y坐标
function move(event){
    var pos = event.data.getLocalPosition(app.stage);
    var x = pos.x;
    var y = pos.y;
   console.log(x+"   "+y);
}
任意一种鼠标事件,都可以通过上述代码获得鼠标坐标

完成效果:在单击页面窗口中的某个位置时,console中会出现坐标

Chap6_鼠标移动跟随

二、鼠标跟随

鼠标跟随,就是控制显示元素,跟随鼠标指针一起移动

思路

1.当鼠标移动时会触发mousemove事件

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

3.用获取到的x,y坐标为图片定位

4.这样图片就会跟随鼠标一起移动

代码示例

var  app = new PIXI.Application(512,768);
document.body.appendChild(app.view);
//图片元素(背景)
var bg = new PIXI.Sprite.fromImage("img/bg_01.png");
app.stage.addChild(bg);
//图片元素(飞机)
var plane = new PIXI.Sprite.fromImage("img/plane.png");
plane.x = 250;
plane.y = 250;
app.stage.addChild(plane);
bg.interactive = true;
bg.on("mousemove", movePlane);
function  movePlane(event){
  //1、获取鼠标触发事件时的位置
var pos  = event.data.getLocalPosition(app.stage);
  //2、设置元素位置与鼠标位置一致
plane.x = pos.x;
plane.y = pos.y;
}

三、设置锚点

元素的锚点,也可以叫做定位点,指元素显示在某个x,y坐标时时元素以哪个点来对齐该坐标

例:当我们把飞机图片定位到200,100位置时,图片是以左上角与该位置对齐并显示在窗口中,那么此时的锚点就是左上角

Chap6_鼠标移动跟随

设置锚点代码

元素.anchor.x = x方向锚点位置

元素.anchor.y = y方向锚点位置

元素.anchor.set(x值,y值):同时设置x、y方向锚点位置

锚点取值范围 0~1

Chap6_鼠标移动跟随

常见锚点配置

设置锚点为左上角:
元素.anchor.x=0,元素.anchor.y=0 或 元素.anchor.set(0,0)

设置锚点为右上角:
元素.anchor.x=1,元素.anchor.y=0 或 元素.anchor.set(1,0)

设置锚点为左下角:
元素.anchor.x=0,元素.anchor.y=1 或 元素.anchor.set(0,1)

设置锚点为右下角:
元素.anchor.x=1,元素.anchor.y=1 或 元素.anchor.set(1,1)

设置锚点为中心:
元素.anchor.x=0.5,元素.anchor.y=0.5 或 元素.anchor.set(0.5,0.5)

代码示例

var plane = new PIXI.Sprite.fromImage("img/plane.png");
plane.x = 250;
plane.y = 250;
//设置锚点为中心点
plane.anchor.x = 0.5;
plane.anchor.y = 0.5;
app.stage.addChild(plane);

四、字符拼接

字符与变量可以使用+号进行拼接,不变的字符内容用" "号包裹,变量用+号拼接

例:在应用窗口中显示坐标x,y

function move (event ){
    //获取鼠标触发事件时的位置
    var pos = event.data.getLocalPosition(app.stage);
    //为文本元素设置内容(x,y坐标位置)
    //"x:" +pos.x + "y:" +pos.y
    txt.text = "x:"+pos.x + "y:"+pos.y;
}

小数取整

Math.ceil(1.5); //向上取整结果为:2
parseInt(1.5); //忽略小数部分结果为:1

坐标取整后字符拼接

function move( event ){
//获取鼠标触发事件时的坐标
var pos = event.data.getLocalPosition(app.stage);
//为文本元素设置内容(x,y坐标位置)
//"x:"+pos.x + "y:"+pos.y
txt.text = "x:"+ parseInt(pos.x) + " y:" + parseInt(pos.y);

未经允许不得转载:作者:西瓜君✔, 转载或复制请以 超链接形式 并注明出处
原文地址:《Chap6_鼠标移动跟随》 发布于2020-03-16

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册