Baker的博客

最近在用pixi绘制地图的时候需要做带箭头的线，用来从一个点执行另一个点，表示此段路线可行，但是发现pixie是没有自带的绘制带箭头线段的，那就只能自己绘制了，在此记录一下，pixi底层是用的canvas，所以绘图和方法和canvas很像，先通过PIXI创建Graphics对象。然后开始给这个线段绘制箭头，绘制箭头的功能可以封装为一个方法，箭头的位置，朝向等，由于线段的朝向不确定性，箭头也需要根据线段的方向来算，通过两个点的夹角方向获取到箭头的朝向，

Pixi绘制地图和小车

上一个章节绘制了长方形，原型，椭圆形，这节说下绘制线，绘制线和绘制图形的方式差不多，依然是是Graohics对象来绘制，先设置线条的样式，再绘制从某个点到某个点，绘制结束后将这条线加入到stage舞台上。最后，再来尝试绘制一个贝塞尔曲线，贝塞尔曲线分为二阶和三阶，二阶的贝塞尔曲线有一个点来影响线的曲率，三阶贝塞尔曲线有两个点来影响线的曲率。一旦可以绘制线了，其实绘制任何性状都可以了，因为图形就是多个线连起来得到的，比如，我们绘制一个三角形。

新替换的方法最后一个值就是圆角的半径，类似div中的radius值，和radius一样，你如果长方形改为正方形，并把圆角的半径设置为边的一半，你就会得到一个圆形。上一个章节已经大概介绍了Pixi，并做了一个简单的例子，这节正式入门，因为pixi是用来绘制图形的，那么这节就从头开始说用pixi绘制一个简单的图形，先从最简单的长方形开始，当然这是通过骚操作的方式实现的，正儿八经的绘制方法如下，绘制好的效果和上图一模一样，唯一的区别就是长方形的x和y是开始绘制的点，圆的x和y是圆心，

Pixi.js迅速受到了开发者的喜爱，因为它具有出色的性能和易用性。安装完成后先引入pixi.js，然后后创建一个pixi的场景，并设置宽高颜色等参数，并添加到body中，再通过图片创建一个图片，pixi里叫sprite，意思是小精灵，创建后设置x，y的值，添加到舞台Stage中（类似three的scene），最终你就可以得到一个简单的pixi页面了，当然直接用canvas也可以很容易实现这些，但是后面的内容就可以慢慢看出pixi的优势了，好了第一章入门就到这里，代码下方放置了效果图可以参考下效果。