源码
各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动。而不是一直加速,有没有什么好办法?
PS:问题已经解决,谢谢评论的大神@Antineutrino !
http://files.cnblogs.com/files/kmsfan/pixi.js
<script src="~/Scripts/pixi.js"></script>
<div id="container"></div>
<script>
var renderer = PIXI.autoDetectRenderer(800, 500, { backgroundColor: 0x1099bb });
$("#container").append(renderer.view);
var stage = new PIXI.Container();
var container = new PIXI.Container();
stage.addChild(container);
var bunnyArray = new Array();
for (var i = 0; i < 5; i++)
{
bunnyArray[i] = new Array();
}
//载入图片
//for (var i = 0; i < 5; i++)
//{
// for (var j = 0; j < 5; j++)
// {
// var bunny = PIXI.Sprite.fromImage("/Content/img/bunny.png");
// bunny.x = 40 * j;
// bunny.y = 40 * i;
// bunny.interactive = true;
// //bunny.on("mousedown",onClick);
// bunnyArray[i][j]=bunny;
// container.addChild(bunnyArray[i][j]);
// }
//}
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
var rect = new PIXI.Graphics();
var width = 70;
rect.lineStyle(1, randomColor());
rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(width * i, width * j, width, width);
rect.drawRect(width * i, width * j, width, width);
bunnyArray[i][j] = rect;
container.addChild(bunnyArray[i][j]);
}
}
for (var i = 0; i < bunnyArray.length; i++)
{
for (var j = 0; j < bunnyArray[i].length; j++)
{
bunnyArray[i][j].on("click", onClick);
}
}
container.x = 200;
container.y = 60;
renderImage();
function renderImage()
{
requestAnimationFrame(renderImage);
//renderer.render(container);
renderer.render(container);
//renderer.render(stage);
}
function animate() {
requestAnimationFrame(animate);
var bunny1 = thisPointer;
bunny1.rotation += 0.03;
cancelAnimationFrame(request);
}
function animateErase()
{
//requestAnimationFrame(animateErase);
var bunny1 = thisPointer;
bunny1.rotation -= 0.01;
}
var thisPointer;
var request;
function onClick(eventData)
{
thisPointer = calcuatePos(eventData);
request = requestAnimationFrame(animate);
}
//生成随机颜色
function randomColor() {
var colorStr = Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase();
return "000000".substring(0, 6 - colorStr) + colorStr;
}
//判断是否点击了这个东西
function calcuatePos(eve)
{
var x = (eve.data.global.x);
var y = (eve.data.global.y);
x = x - container.x;
y = y - container.y;
for (var i = 0; i < bunnyArray.length; i++) {
for (var j = 0; j < bunnyArray[i].length; j++) {
var instance = bunnyArray[i][j];
if (instance.hitArea.x <= x && instance.hitArea.x + 70 >= x && instance.hitArea.y <= y && instance.hitArea.y+70>=y) {
instance.x = instance.hitArea.x+70/2;
instance.y = instance.hitArea.y+70/2;
instance.pivot.x = instance.hitArea.x+70/2;
instance.pivot.y = instance.hitArea.y+70/2;
return instance;
}
}
}
}
</script>
效果