学JS的心路历程 - PixiJS -基础（三）

今天我们来试着移动图片吧！

首先，一样先把图片放到PIXI的stage中：

let app = new PIXI.Application（{

width: 800，

height: 600，

backgroundColor: 0x1099bb

}）；

let imageURL =“./image/bunny.png”；

PIXI.loader

.add（'bunny'，imageURL）

.load（init）；

function init（loader，resources）{

let bunny = new PIXI.Sprite（

resources['bunny'].texture

）；

app.stage.addChild（bunny）；

}

但是，一直显示在左上角实在是有点麻烦，我们可以这样写(vmwork)：

function init（loader，resources）{

let bunny = new PIXI.Sprite（

resources['bunny'].texture

）；

bunny.x = app.screen.width / 2；

bunny.y = app.screen.height / 2；

bunny.scale.set（3.5，3.5）；

app.stage.addChild（bunny）；

}

把bunny的x，y设为canvas的一半，并用scale把大小设为3.5倍。

接着我们监听鼠标事件：

function init（loader，resources）{

let bunny = new PIXI.Sprite（

resources['bunny'].texture

）；

bunny.x = app.screen.width / 2；

bunny.y = app.screen.height / 2；

bunny.scale.set（3.5，3.5）；

bunny.anchor.set（0.5）；

mouseEvent（bunny）；

app.stage.addChild（bunny）；

}

function mouseEvent（bunny）{

bunny.interactive = true；

bunny.buttonMode = true；

bunny.on（'mousedown'，onDragStart）

.on（'mouseup'，onDragEnd）

}

记得要把监听的物件的interactive设为true，否则会无法触发！

buttonMode是让鼠标靠近图片时会转为手指图案（截图弄不出来只能用说明的）。

然后，撰写监听事件，让图片按下时会透明。

function onDragStart（event）{

this.alpha = 0.5；

}

function onDragEnd（）{

this.alpha = 1；

}

接着我们需要能按下拖移：

bunny.on（'mousedown'，onDragStart）

.on（'mouseup'，onDragEnd）

.on（'mousemove'，onDragMove）；

function onDragStart（event）{

this.alpha = 0.5；

this.dragging = true；

}

function onDragEnd（）{

this.alpha = 1；

this.dragging = false；

}

function onDragMove（event）{

if（this.dragging）{

let newPosition = event.data.getLocalPosition（this.parent）；

this.x = newPosition.x；

this.y = newPosition.y；

}

}

首先，我们先对bunny新增一个dragging属性，判断鼠标按下及放开的状态；

接着再设定移动时，如果dragging为true，利用getLocalPosition取得bunny.parent的坐标位置，并同时更新bunny的坐标位置。

就可以顺利移动了喔(leafor)！

那么PixiJS就先到这边告一段落了，一样如果有错误及来源未附上欢迎留言指正，我们明天见！