Chap6_鼠标移动跟随

一、获取鼠标坐标

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

示例

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);
}

[wm_notice]任意一种鼠标事件，都可以通过上述代码获得鼠标坐标[/wm_notice]

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

二、鼠标跟随

[wm_tips]鼠标跟随，就是控制显示元素，跟随鼠标指针一起移动[/wm_tips]

思路

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;
}

三、设置锚点

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

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

设置锚点代码

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

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

或

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

锚点取值范围 0~1

常见锚点配置

设置锚点为左上角：
元素.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);

四、字符拼接

[wm_tips]字符与变量可以使用+号进行拼接，不变的字符内容用" "号包裹，变量用+号拼接[/wm_tips]

例：在应用窗口中显示坐标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);

发表评论