????????之前已經用Pixi繪制出了各種圖形以及通過圖片繪制精靈，這節用pixi繪制網格地圖，并通過圖片制作一個Sprite，讓這個Sprite在網格地圖上運動。首先需要在頁面中添加一個div用來后期展示canvas的畫布，并將此div實例化為PIXI的Application，作為接下來使用的stage，

<div ref="pixiContainer" style="width: 100%;height: 100%"></div>let width = window.innerWidthlet height = window.innerHeightthis.app = new PIXI.Application({width: width, height: height,backgroundColor: '#FFFFFF'});this.$refs.pixiContainer.appendChild(this.app.view)

????????然后給地圖中添加點位，這里用for循環添加，繪制一個20*10的一共200個點位，為了讓點位不單調，這里用兩種顏色，底色為黑色，大小為6，上面再放一個大小為3的藍色圓。

for (let i = 0; i < 20; i++) {for (let j = 0; j < 10; j++) {this.drawPoint(100+i*50,100+j*50,6)}}
drawPoint(x,y,size){const graphicsOut = new PIXI.Graphics();// 創建一個Graphics對象用于繪制圖形graphicsOut.beginFill('#000000'); // 設置填充顏色為黑色graphicsOut.drawCircle(x, y, size); // // 繪制一個半徑為2的圓形，作為點graphicsOut.endFill();// 結束填充this.app.stage.addChild(graphicsOut); // 將圖形添加到舞臺const graphics = new PIXI.Graphics();// 創建一個Graphics對象用于繪制圖形graphics.beginFill('#0000FF'); // 設置填充顏色為藍色graphics.drawCircle(x, y, size/2); // 繪制一個半徑為2的圓形，作為點graphics.endFill();// 結束填充this.app.stage.addChild(graphics);// 將圖形添加到舞臺},

?

有了點位之后開始放車了，這里的車使用一個黑色車形狀的圖片代替，繪制好后要將車的中心點設置為車的中心點，否則今后旋轉的時候會圍繞著左上角旋轉而不是自身的中心，

      PIXI.Assets.load('/static/images/transfer_vehicle.png').then((texture) =>{let sprite = new PIXI.Sprite(texture);sprite.scale.set(0.02,0.02,0.02)sprite.x=x;sprite.y=y;sprite.anchor.set(0.5)this.app.stage.addChild(sprite);

????????但是此時車是靜止不動的，因為沒有加循環移動的方法，PIXI添加移動方法是用this.app.ticker就類似于ThreeJs中的requestAnimationFrame,是通過不斷重新渲染場景，在每次渲染的時候改變場景中對象的屬性，就可以實現看起來在移動的效果。這里添加的動畫是車從原始點位移動到y軸為500的位置，移動到點位后停止。

this.app.ticker.add(() =>{if(sprite.y<500){sprite.y += 1;}
})