标签：java

一、获取鼠标坐标

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

事件处理的概念

事件：表示用户在应用界面的某种操作 例如单击、双击、鼠标移动等等 ，这些操作统称为事件 事件触发：当用户正在操作某个元素时，不同的操作会触发不同的事件 事件处理：当用户触发某种事件（操作）可以执行一些代码响应用户的操作

一、鼠标常用事件介绍

鼠标事按时件，是指通过鼠标操作才能触发的事件,根据操作不同，触发的事件也不同

[wm_tips]设置页面无边框 中加入：html,body{margin:0px;border:0; } [/wm_tips]

二 、手机触控常用事件【兼容鼠标】

鼠标的点击与手机触控事件可以兼容，这样在移动端，我们也可以通过事件进行操控

三 、监听处理事件

监听 ：监视用户在某个元素中触发的事件

例如：

步骤

//1、设置元素为可互动元素（权限设置）
元素名.interactive = true;
//2、监听某种事件，当用户触发该事件时执行函数
元素名.on("事件名称" , 负责处理事件的函数名);  
//3、定义负责处理事件的函数
function 函数名(){
}

代码示例

var js = new  PIXI.Sprite.fromImage("img/js1.png");
app.stage.addChild( js );
//1、设置与元素为可互动元素（权限设置）
js.interactive = true;
//2、监听、处理事件
//当鼠标在js元素中单击时，会执行handle函数中的代码
js.on("click", handle );
//3、定义处理事件的函数
function handle(){
//设置js.y坐标位置，向下移动10px
js.y = js.y+10;
}

代码讲解

(1)允许图片可以 交互

//允许js图片元素可以进行交互【重要步骤】
js.interactive = true;

(2)定义函数

// function move(){} ： 自定义函数名称为move
// js.y = js.y+10 ：表示 plane的垂直坐标在原有基础上+10 向下移动
// js.y = js.y+10 可以简写为 plane.y+=10;
function move(){
  js.y = js.y+10;
}

(3)处理事件

// click ：单击事件
// move ：当触发单击事件时，需要执行的函数
js.on("click",move);

概念

函数是一段功能代码，将功能代码定义到函数中通过反复执行降低冗余代码 提高程序的可维护性、可重用性

1、定义函数基础语法

//function ： 定义函数的关键字
//函数名  ： 函数的标识，当需要一个函数执行时，必须指定函数名
//(参数)  ： 调用时，接收一些数据
//{ }   ： 调用时，需要函数完成的功能代码
function 函数名(参数){
}

2、调用函数基础语法

函数名(); //当函数被调用时，会执行函数{ }中的代码

[wm_notice]可以反复调用函数，执行代码[/wm_notice]

示例

//例：f1函数
function f1(){
//当f1函数被调用时执行
//在开发者工具的 Console 窗口中输出一段文字
console.log("Hello");
}
//2、调用函数
//语法：函数名();
f1();
f1();
f1();
f1();

[wm_notice]f1()函数被调用了4次，所以在 Console（控制台）窗口中会出现4行Hello[/wm_notice]

执行流程

3、函数的参数

在函数中可以定义一些参数，用来接收调用者传入的数据 使函数变得更加强大，更加灵活

示例

//参数：可以接受调用者传入的数据
//str ：参数 ，调用者传入的数据会为str赋值
function f1(str){
//当f1函数被调用时执行
//在开发者工具的 Console 窗口中输出调用者传入的文字
console.log( str );
}
//2、调用函数
//语法：函数名(传递给函数的数据);
f1("闺中少妇不知愁");
f1("春日凝装上翠楼");
f1("忽见陌头杨柳色");
f1("悔教夫婿觅封侯");

执行流程

示例2

利用函数创建元素，提高复用性、提高可维护性

//用于创建元素添加元素的函数
//path ：路径
//inx ：元素x坐标位置
//iny ：元素y坐标位置
function add(path,inx,iny){
//创建元素 调用者传入path
var e = new PIXI.Sprite.fromImage( path );
e.x = inx;
e.y = iny;
//在应用窗口中添加元素
app.stage.addChild( e );
}
//调用函数 传入数据
add("img/js1.png",100,100);//x = 100,y=100
add("img/js2.png",150,150);//x = 150,y=150

[wm_tips]注意：多个参数与数据，需要使用 , 分隔[/wm_tips]