源碼

?　　各位，請教一個問題，我這個還有BUG，我是想實現(xiàn)，點擊一下可以 停止轉(zhuǎn)動，然后再點一下重新轉(zhuǎn)動。而不是一直加速，有沒有什么好辦法？

PS:問題已經(jīng)解決，謝謝評論的大神@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>

效果?

??

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的(原)用pixi.js 实现 方块阵点击后原地自转效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。