Pixi绘制地图和小车

        之前已经用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;
          }
})