源码
各位,请教一个问题,我这个还有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>
效果