Question

点击Sprite Image时，我想停止旋转。我怎么能这样做？我想点击那个Bunny并让它停止旋转，当我再次点击它时，它将再次开始旋转。谢谢。

var renderer = PIXI.autoDetectRenderer(400, 300, { backgroundColor: 0x1099bb });
$("#container").append(renderer.view);
var stage = new PIXI.Container();

var texture = PIXI.Texture.fromImage("/Content/img/bunny.png");
var bunny = new PIXI.Sprite(texture);

bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

animate();

function animate()
{
    requestAnimationFrame(animate);
    bunny.rotation += 0.1;

    renderer.render(stage);
}

function onClick(eventData)
{

}

我更新了我的代码，点击事件现在可以使用了，但是如何取消绑定 onclick 事件？

var bunny = PIXI.Sprite.fromImage("/Content/img/bunny.png");
//var bunny = new PIXI.Sprite(texture);

bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 200;
bunny.position.y = 150;
bunny.interactive = true;

bunny.on("click", onClick);
stage.addChild(bunny);

renderImage();

function renderImage()
{
    requestAnimationFrame(renderImage);
    renderer.render(stage);
}

function animate()
{
    requestAnimationFrame(animate);
    bunny.rotation += 0.1;
    renderer.render(stage);

}

function onClick(eventData)
{
    //animate()
    requestAnimationFrame(animate);

}

Answer 1

您的代码似乎需要点击事件。因此，如果可能，请提供您想要点击ID的元素。

如果pixi库已经分配了id？尝试右键单击浏览器中的元素，然后单击inspect元素，看看是否可以找到id。

一旦你有了元素的id，然后为文档创建一个事件监听器，因为我假设在页面加载后创建了你想要点击的元素。

js code：

//add the event listener
document.addEventListener("click",function(event){//begin event listener


/*
if the event target id equals the id of the element you want to click on
and the animation is running
*/
if(event.target.id === "idofyourelement" && isRunning()){//begin if then


   //call the function to stop your animation here

}//end if then

/*
if the event target id equals the id of the element you want to click on
and the animation is not running
*/
if(event.target.id === "idofyourelement" && !isRunning()){//begin if then


   //call the function to start your animation here

}//end if then




});//end event listener

function isRunning(){

/*
place your to check if the animation is running in here 
hint have it return true if it is running and return false if 
it is not running
*/   

if(condition to check it is running){//begin if then

    return true;

}
else{

    return false;

}//end if then else

现在你需要做一些工作来连接你正在使用的库的特定功能，但希望这会给你一个良好的开端。

Answer 2

您无需添加一堆不同的渲染功能。只需在bunny对象上设置一个布尔属性，并在点击监听器中切换它的值。

var renderer = PIXI.autoDetectRenderer(400, 300, { backgroundColor: 0x1099bb });
$("#container").append(renderer.view);
var stage = new PIXI.Container();

var texture = PIXI.Texture.fromImage("/Content/img/bunny.png");
var bunny = new PIXI.Sprite(texture);

bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

//Boolean property allows bunny to rotate
bunny.canRotate = true;

//Click listener turns on/off rotate property
bunny.on("click", function() {
  this.canRotate = !this.canRotate;
});

// start animating
animate();
function animate() {
    if(bunny.canRotate)
        bunny.rotation += 0.1;
    requestAnimationFrame(animate);
    renderer.render(stage);
}

pixi.js：单击精灵时停止旋转？

2 个答案: