今天我们来试着移动图片吧!
首先,一样先把图片放到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就先到这边告一段落了,一样如果有错误及来源未附上欢迎留言指正,我们明天见!