本文主要是介绍Pixi绘制地图和小车，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
之前已经用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;}
})
这篇关于Pixi绘制地图和小车的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
