学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就先到这边告一段落了,一样如果有错误及来源未附上欢迎留言指正,我们明天见!

上一篇:微服务架构 - 巧妙获取被墙的Docker镜像


下一篇:c++ vector常见用法