之前已经用Pixi绘制出了各种图形以及通过图片绘制精灵，这节用pixi绘制网格地图，并通过图片制作一个Sprite，让这个Sprite在网格地图上运动。首先需要在页面中添加一个div用来后期展示canvas的画布，并将此div实例化为PIXI的Application，作为接下来使用的stage，
<div ref="pixiContainer" style="width: 100%;height: 100%"></div>
let width = window.innerWidth
let height = window.innerHeight
this.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;
}
})
