学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就先到这边告一段落了，一样如果有错误及来源未附上欢迎留言指正，我们明天见！
最新文章
- 几大排序算法的Java实现
- web开发技术-过滤器
- linux 遇见的问题
- java分享第六天（冒泡排序）
- iOS－－时间类date详解
- 《Linux内核设计与实现》CHAPTER18阅读梳理
- 一位Erlang程序猿的自白
- sql分割以逗号隔开的字符串
- Spring实现AOP的4种方式(转)
- Apache Spark Mesos
- BZOJ 2005 能量采集
- JAVA中断机制详解
- vtop工具使用分析
- 数据结构-堆 Java实现
- spring切换多数据源
- 前端学习历程--localstroge
- 单细胞文献分析 Quantitative single-cell rna-seq with unique molecular identifers
- hive 索引
- android--Activity有返回值的跳转
- 循序渐进学.Net Core Web Api开发系列【12】：缓存