Pixi入门第三章：绘制更多内容

上一个章节绘制了长方形，原型，椭圆形，这节说下绘制线，绘制线和绘制图形的方式差不多，依然是是Graohics对象来绘制，先设置线条的样式，再绘制从某个点到某个点，绘制结束后将这条线加入到stage舞台上。

// 创建图形类
const graphics = new PIXI.Graphics()
//设置线的样式，第一个参数是线宽，第二个参数是颜色
graphics.lineStyle(5, 0xAAAAAA);
//线从第一个点，100,100的坐标点开始绘制
graphics.moveTo(100, 100);
//绘制到300，250的坐标点结束
graphics.lineTo(300, 250);
//将绘制的线加入到舞台stage上
app.stage.addChild(graphics);

效果图如下：

一旦可以绘制线了，其实绘制任何性状都可以了，因为图形就是多个线连起来得到的，比如，我们绘制一个三角形。

// 创建图形类
const graphics = new PIXI.Graphics()
//设置线的样式，第一个参数是线宽，第二个参数是颜色
graphics.lineStyle(5, 0xAAAAAA);
//线从第一个点，100,100的坐标点开始绘制
graphics.moveTo(100, 100);
//绘制到300，250的坐标点结束
graphics.lineTo(300, 250);
//绘制到220，250的坐标点结束
graphics.lineTo(220, 250);
//再绘制回到100, 100的坐标点结束
graphics.lineTo(100, 100);
//将绘制的线加入到舞台stage上
app.stage.addChild(graphics);

效果如下：

不过这又属于骚操作了，因为绘制图形的时候需要自己去计算每个点的坐标才能实现，同时要写很多行的line.to ,所以正常情况还是用提供的绘制图形方法更快一些。比如用标准的方式绘制一个多边形,可以看到同样是绘制一个三角形，但是代码行数变少了，而且还可以添加填充色，设置边框颜色等。

 // 创建图形类
const graphics = new PIXI.Graphics()
//设置多边形的填充色
graphics.beginFill(0xff0044);
//设置多边形的边框线样式
graphics.lineStyle(5, 0xffffff);
// 多边形的每个点放到同一个集合中，两两为一组
graphics.drawPolygon(100, 100, 300, 250, 350, 50);
// 添加到舞台上，也就是stage上
app.stage.addChild(graphics);

最后，再来尝试绘制一个贝塞尔曲线，贝塞尔曲线分为二阶和三阶，二阶的贝塞尔曲线有一个点来影响线的曲率，三阶贝塞尔曲线有两个点来影响线的曲率。下面先尝试下二阶的：

        // 创建图形类
        const graphics = new PIXI.Graphics()
        //设置填充颜色
        graphics.beginFill(0xff0044);
        //设置绘制的线条样式
        graphics.lineStyle(5, 0xffffff);
        //设置绘制的开始点，如果不设置会默认从0,0开始绘制
        graphics.moveTo(100, 180)
        //二阶贝塞尔曲线的中间点和目标点，前两个参数为中间点的x和y，后面两个参数为目标点的x和y
        graphics.quadraticCurveTo(90, 100, 210, 100 )
        // 添加到 stage 下
        app.stage.addChild(graphics);

效果图：

再来个三阶的，

        // 创建图形类
        const graphics = new PIXI.Graphics()
        //设置填充颜色
        graphics.beginFill(0xff0044);
        //设置绘制的线条样式
        graphics.lineStyle(5, 0xffffff);
        //设置绘制的开始点，如果不设置会默认从0,0开始绘制
        graphics.moveTo(100, 180)
        //三阶贝塞尔曲线的两个中间点和目标点，前四个参数为中间点的x和y，后面两个参数为目标点的x和y
        graphics.bezierCurveTo(90, 100, 210, 100, 300, 180)
        // 添加到 stage 下
        app.stage.addChild(graphics);

效果图

至此，基本的用Graphics绘制图形，绘制线的操作都全了，下面一章开始做更好玩一点的东西