基于laya Air引擎的游戏开发之基础篇下

最新推荐文章于 2024-05-27 11:49:31 发布
最新推荐文章于 2024-05-27 11:49:31 发布
阅读量1.2k 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vince_13/article/details/131932063
版权

LayaAir的graphics矢量绘图API概述

 LayaAir可以通过laya.display.Graphic类绘制各种矢量图形，关于Graphics绘图的相关方法如下：


​ 

（图1）laya.display.Graphic的方法

绘制直线与折线

一、绘制直线

​ 在API中搜索laya.display.Graphics类可以查看到该API的各种矢量绘图方法。其中drawLine();用于绘制矢量直线。该方法的详细说明如下图所示：

 （图2）

下面我们用LayaAir引擎画一条直线，示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  4.     import WebGL = Laya.WebGL;
  6.     export class Sprite_DrawShapes {
  7.         private sp: Sprite;
  9.         constructor()
  10.         {
  11.             Laya.init(500, 300, WebGL);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.             //画直线
  19.             this.sp.graphics.drawLine(10, 58, 146, 58, "#ff0000", 3);
  21.         }
  22.     }
  23. }
  24. new laya.Sprite_DrawShapes();

发布后如下图所示，我们画了一条红色的直线

 

（图3）

二、绘制折线

那么如何绘制折线呢？直接使用drawLines();方法即可。该方法与drawLine比较像，编码时千万不要漏掉了末尾的“s”。drawLines的参数详细说明如下图所示：

   

 

（图4）

下面我们用LayaAir引擎画一条折线，示例代码如下：

代码运行

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  4.     import WebGL = Laya.WebGL;
  6.     export class Sprite_DrawShapes {
  7.         private sp: Sprite;
  9.         constructor()
  10.         {
  11.             Laya.init(500, 300, WebGL);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.             //画折线
  19.             this.sp.graphics.drawLines(20, 88, [0, 0, 39, -50, 78, 0, 120, -50], "#ff0000", 3);
  20.       }
  21.     }
  22. }
  23. new laya.Sprite_DrawShapes();

效果：

通过代码，我们可以看出，画折线与画直线的参数区别是从第三位开始，第三位参数是Array类型的折线点集合，其中的“0，0”是折点A的起始坐标。“39，-50”是折点B的起始坐标。“78, 0”是折点C的起始坐标，“120, -50”是终点D的坐标。但是这里需要大家理解和注意的是，第三位参数中所有的坐标都是相对坐标，都会受到第一位和第二位参数的“20，88”而影响。一旦“20，88”产生改变，整体折线都会受到影响。

大家可以在实际编码的过程中，通过手动调整参数去感受区别。

三、用LayaAirIDE拖动控件绘制直线

步骤一：打开我们的LayaAirIDE，点击设计模式，新建一个View页面

 

（图5）

步骤二：将组件中的曲线组件拖动到View页面上，就会自动生成默认的直线

 

 （图6）

步骤三：修改（添加/减少）Line组件属性中的数值，改变直线的长度、宽度、颜色等等。

 

 ​ （图7）

​ （图8）

四、用LayaAirIDE拖动控件绘制折线

步骤一：打开我们的LayaAirIDE，点击设计模式，新建一个View页面

 

（图9）

步骤二：将组件中的曲线组件拖动到View页面上，就会自动生成默认的折线

 

​ （图10）

步骤三：修改（添加/减少）Lines组件属性中的数值，改变折线的角度、颜色、宽度，或者添加新的折现。

 

（图11） 

 

​ （图12）

到此我们通过LayaAirIDE的组件绘制直线和折线就完成了。

绘制曲线

相对于直线而言，曲线的绘制与坐标关系更难理解一些。由于LayaAir引擎绘制的是贝塞尔曲线，所以本文中先针对贝塞尔曲线的基础进行说明，然后再结合引擎的API进行讲解。

一、贝塞尔曲线的基础

​ 贝塞尔曲线在港澳台等地称为貝茲曲線，新加坡马来西亚等地称为贝济埃曲线。一般的矢量图形软件通过它来精确画出曲线，贝塞尔曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

​ 贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。滑动两个中间点，贝塞尔曲线的形状会发生变化。

​ 基于线性、二次方、三次方等公式的不同，贝塞尔曲线也被称为一次、二次……五次贝塞尔曲线，有些文章也称为一阶、二阶……说的是一回事。下面通过动图让大家直观的理解一下：

1.1 一次贝塞尔曲线

 （图1）

​ 说明：上图是由 P0 至 P1 的连续点， 描述的是一条线性的贝赛尔曲线。线性贝塞尔曲线函数中的 t 会经过由 P0 至 P1 的 B(t) 所描述的曲线。例如当 t=0.25 时，B(t) 即一条由点 P0 至 P1 路径的四分之一处。就像由 0 至 1 的连续 t，B(t) 描述一条由 P0 至 P1 的直线。

1.2 二次贝塞尔曲线

（图2）

 （图3）

​ 说明：为建构二次贝塞尔曲线，上图由 P0 至 P1 的连续点 Q0，描述一条线性贝塞尔曲线。由 P1 至 P2 的连续点 Q1，描述一条线性贝塞尔曲线。由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。

1.3 三次贝塞尔曲线

（图4）

（图5）

 说明：对于三次曲线，可由线性贝塞尔曲线描述的中介点 Q0、Q1、Q2，和由二次曲线描述的点 R0、R1 所建构。

1.4 高阶贝塞尔曲线

​ 由于高阶贝塞尔曲线并不常见，本文将不再详细说明，想对贝塞尔曲线原理了解更多的可以查看其它相关文章。

 （图6） 四次贝塞尔曲线

（图7） 五次贝塞尔曲线

二、用LayaAir引擎API绘制二次贝塞尔曲线

​ LayaAir引擎的曲线绘制采用的是二次贝塞尔曲线，开发者可以在API文档中搜索laya.display.Graphics类可以查看到“drawCurves();”曲线绘制方法。该方法的详细说明如下图所示：

 （图8）

下面我们用LayaAir引擎绘制矢量曲线，示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  4.     import WebGL = Laya.WebGL;
  6.     export class Sprite_DrawShapes {
  7.         private sp: Sprite;
  9.         constructor()
  10.         {
  11.             Laya.init(500, 300, WebGL);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.             //画折线
  19.             this.sp.graphics.drawCurves(10, 58, [0, 0, 19, -100, 39, 0], "#ff0000", 3);
  20.       }
  21.     }
  22. }
  23. new laya.Sprite_DrawShapes();

发布后如下图所示，我们成功的绘制了一条简单的曲线。

 （图9）

通过增加drawCurves的第三位points点集合的参数，我们可以让曲线更复杂一些，修改的示例代码如下：

  1. //增加58, 100与78, 0坐标让曲线更复杂一些
  3. this.sp.graphics.drawCurves(10, 58, [0, 0, 19, -100, 39, 0, 58, 100, 78, 0], "#ff0000", 3) ;

发布后如下图所示，

​ （图10）
如果想绘制更复杂的曲线，可自行调整drawCurves中的参数，再结合二次贝赛尔曲线原理进行理解。

最后提醒一下，与绘制折线一样，第三位参数中所有的坐标都是相对坐标，都会受到第一位和第二位参数的“10，58”而影响。一旦“10，58”产生改变，整体曲线都会受到影响。

三、用LayaAirIDE拖动控件绘制二次贝塞尔曲线

​ 步骤一：打开我们的LayaAirIDE，点击设计模式，新建一个View页面

​ （图11）

步骤二：将组件中的曲线组件拖动到View页面上，就会自动生成默认的曲线

 （图12）

步骤三：修改（添加/减少）组件属性中的point的数值，改变曲线的位置或弯曲程度

 （图13）

 （图14）

到此我们通过LayaAirIDE的组件绘制曲线就完成了

绘制三角形、多边形及根据数据绘制图案

​ 在绘制三角形、多边形以及根据指定的路径数据绘制出图案均可使用LayaAir引擎中laya.display.Graphics类的“drawpoly();”方法实现。该方法的详细说明如下图所示：

（图1）

一、绘制三角形

下面我们用LayaAir引擎先绘制一个三角形，示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  5.     export class Sprite_DrawShapes {
  6.         private sp: Sprite;
  8.         constructor()
  9.         {
  10.             Laya.init(500, 300);
  11.             this.drawSomething();
  12.         }
  14.         private drawSomething(): void {
  15.             this.sp = new Sprite();
  16.             Laya.stage.addChild(this.sp);
  17.             //画三角形
  18.             this.sp.graphics.drawPoly(30, 28, [0, 100, 50, 0, 100, 100], "#ffff00");
  20.         }
  21.     }
  22. }
  23. new laya.Sprite_DrawShapes();

代码运行效果如下图所示：

 （图2）

​ 通过代码，我们可以看出，drawPoly第三位参数的“0，100”是A点坐标。“50，0”是B点坐标。“100, 100”是C点坐标，将三个坐标点连接后填充第四位参数的颜色值，即绘制出上图的黄色三角形。但是这里需要大家理解和注意的是，第三位参数中所有的坐标都是相对坐标，都会受到第一位和第二位坐标参数“30，28”的影响。一旦“30，28”产生改变，整体形状位置都会受到影响。

二、绘制多边形

​ 我们继续用上面的代码示例，通过增加drawPoly第三位参数的坐标，来实现多边形的绘制，修改的代码如下：

  1. //画多边形
  2. this.sp.graphics.drawPoly(30, 28, [0, 100, 50, 0, 100, 100, 75, 150, 25, 150], "#ffff00");

代码运行效果如下图所示：

​ （图3）

​ 在修改的代码中，新增了D点坐标”75，150“与E点坐标”25，150“。通过将各个坐标点连接填充颜色后，即绘制出我们想要的多边形。要绘制更多边的多边形，按上述方式增加坐标点即可。

三、根据指定的路径数据绘制出图案

​ 通过上面的三角形和多边形，我们已经掌握了drawPoly的绘图用法，下面再通过示例深入介绍一下，如何指定路径绘制一个五角星。示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  5.     export class Sprite_DrawShapes {
  6.         private sp: Sprite;
  8.         constructor()
  9.         {
  10.             Laya.init(500, 300);
  11.             this.drawSomething();
  12.         }
  14.         private drawSomething(): void {
  15.             var canvas: Sprite = new Sprite();
  16.             Laya.stage.addChild(canvas);
  18.             var path: Array<number> = [];
  19.             path.push(0, -130);//五角星A点坐标
  20.             path.push(33, -33);//五角星B点坐标
  21.             path.push(137, -30);//五角星C点坐标
  22.             path.push(55, 32);//五角星D点坐标
  23.             path.push(85, 130);//五角星E点坐标
  24.             path.push(0, 73);//五角星F点坐标
  25.             path.push(-85, 130);//五角星G点坐标
  26.             path.push(-55, 32);//五角星H点坐标
  27.             path.push(-137, -30);//五角星I点坐标
  28.             path.push(-33, -33);//五角星J点坐标
  30.             canvas.graphics.drawPoly(Laya.stage.width / 2, Laya.stage.height / 2, path, "#FF7F50");
  31.       }
  32.     }
  33. }
  34. new laya.Sprite_DrawShapes();

代码运行效果如下图所示：

（图4）

​ 通过上面的示例代码的写法，是不是感觉代码的可读性得到了增强，大家也可以将之前的三角形或多边形改成这种方式去体验一下，掌握了这些基础，可以衍生出很多灵活的用法，比如数据来自服务端等。

四、用LayaAirIDE通过控件绘制不规则图形（包括三角形，多边形）

步骤一：打开我们的LayaAirIDE，点击设计模式，新建一个View页面

​ （图5）

步骤二：将组件中的曲线组件拖动到View页面上，就会自动生成默认的多边形

 （图6）

步骤三：修改（添加/减少）Poly组件属性中的数值，改变多边形的大小、颜色等等。


​ （图7）

​ （图8） 三角形

 （图9） 不规则多边形

到此我们通过LayaAirIDE的组件绘制多边形就完成了。

绘制圆形与扇形

一、绘制圆形

圆形的绘制理解起来比较简单，通过圆形的中心点坐标与半径，即可方便的通过LayaAir引擎laya.display.Graphics这个API的“drawCircle();”方法实现。该方法的详细说明如下图所示：


​ （图1）

下面我们用LayaAir引擎绘制一个圆形，示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  4.     import WebGL = Laya.WebGL;
  6.     export class Sprite_DrawShapes {
  7.         private sp: Sprite;
  9.         constructor()
  10.         {
  11.             Laya.init(500, 300, WebGL);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.             //画圆
  19.             this.sp.graphics.drawCircle(80,80,50,"#ff0000");
  21.         }
  22.     }
  23. }
  24. new laya.Sprite_DrawShapes();

代码运行效果如下图所示：

​ （图2）

​ 圆形绘制比较简单，“80，80”是圆形中心点坐标。50是半径，”#ff0000”是圆形填充颜色值。

二、绘制扇形

​ 下面继续延伸，介绍一下比圆形稍复杂一点的扇形绘制方法“drawPie();”该方法的详细说明如下图所示：

​ （图3）

下面我们用LayaAir引擎绘制一个扇形，示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  4.     import WebGL = Laya.WebGL;
  6.     export class Sprite_DrawShapes {
  7.         private sp: Sprite;
  9.         constructor()
  10.         {
  11.             Laya.init(500, 300, WebGL);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.             //画圆
  19.             this.sp.graphics.drawPie(80,80,50,90,180,"#ff0000");
  21.         }
  22.     }
  23. }
  24. new laya.Sprite_DrawShapes();

代码运行效果如下图所示：

 （图4）
绘制扇形与圆形类似，前三个参数的用法也是一样的，只是增加了绘制开始与结束的角度。为了让大家更好的理解，扇形的绘制代码与参数沿用圆形代码示例，除了方法名的改变，只增加了90与180两个角度参数。大家可在编码过程中通过调整参数，再深入理解。

三、通过LayaAirIDE拖动控件绘制圆形

步骤一：打开我们的LayaAirIDE，点击设计模式，新建一个View页面

​ （图5）

步骤二：将组件中的曲线组件拖动到View页面上，就会自动生成默认的圆形


​ （图6）

步骤三：修改（添加/减少）Circle组件属性中的数值，改变圆形的大小、颜色、外框等等。

 （图7）

​ （图8）

四、通过LayaAirIDE拖动控件绘制扇形

步骤一：打开我们的LayaAirIDE，点击设计模式，新建一个View页面

​ （图9）

步骤二：将组件中的曲线组件拖动到View页面上，就会自动生成默认的扇形

（图10）

步骤三：修改（添加/减少）Pie组件属性中的数值，改变扇形的角度、大小、颜色等等。

 （图11）

（图12）

到此我们通过LayaAirIDE的组件绘制圆形和扇形就完成了。

绘制矩形与圆角矩形

一、用drawRect方法绘制矩形

 在API中搜索laya.display.Graphics类可以查看到该API的各种矢量绘图方法。其中”drawRect();”方法用于绘制矢量矩形。该方法的详细说明如下图所示：在API中搜索laya.display.Graphics类可以查看到该API的各种矢量绘图方法。其中”drawRect();”方法用于绘制矢量矩形。该方法的详细说明如下图所示：

 （图1）

下面我们用LayaAir引擎绘制矢量矩形，示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  5.     export class Sprite_DrawShapes {
  6.         private sp: Sprite;
  8.         constructor()
  9.         {
  10.             //初始化舞台
  11.             Laya.init(500, 300);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.            //画矩形
  19.             this.sp.graphics.drawRect(20, 20, 100, 50, "#ffff00");
  20.         }
  21.     }
  22. }
  23. new laya.Sprite_DrawShapes();

代码运行效果：

​ （图2）

示例中的“20，20”是矩形起始点坐标，100是向右的宽度，如果是负数则是向左的宽度。50是向下的高度，如果是负数则是向上的高度。大家可以在编写代码中，自行调整参数进行体验。

二、用drawPath绘制矩形

LayaAir引擎laya.display.Graphics类的绘制路径的方法”drawPath()”可以根据路径绘制矢量图形，当然也包括了矩形和圆角矩形，该方法的详细说明如下图所示：
​ 

​ （图3）

drawPath方法的参数相对复杂一些。为了方便大家理解，我们先用”drawPath()”绘制一个矩形，理解路径中的部分参数。

drawPath绘制矩形的示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  5.     export class Sprite_DrawShapes {
  6.         private sp: Sprite;
  8.         constructor()
  9.         {
  10.             //初始化舞台
  11.             Laya.init(500, 300);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.            //自定义路径
  19.             var path:Array<any> =  [
  20.                 ["moveTo", 0, 0], //画笔移到A点
  21.                 ["lineTo", 100, 0],//画到B点
  22.                 ["lineTo", 100, 50],//再画到C点
  23.                 ["lineTo", 0, 50], //继续画到D点
  24.                 ["closePath"] //闭合路径
  25.             ];
  26.              //绘制矩形
  27.             this.sp.graphics.drawPath(20, 20, path, {fillStyle: "#ff0000"});
  28.         }
  29.     }
  30. }
  31. new laya.Sprite_DrawShapes();

代码运行效果：

（图4）

drawPath第一和第二位的坐标点“20,20”是控制整体位置的起始位置，第三位是路径参数。描述信息“MoveTo”是将画笔移动初始位置，此时并没有开始画。”0,0”是相对于”20,20”这个起始位置的，所以A点还是在起始位置原点。描述信息“lineto”是绘制到路径点坐标，“100，0”这个就是绘制到B点位置的坐标。C点和D点以此类推，最后通过描述信息“closePath”与MoveTo的起点位置闭合，否则是不会被闭合的。

从绘制矩形来看，drawPath方法肯定没有drawRect方法更加方便。但是大家可以通过这个示例理解相关的参数用法。至于其它非圆角的图形，大家可自行编码，通过调整参数体验。

三、用drawPath绘制圆角矩形

3.1 用法说明

LayaAir引擎中可以使用graphics的drwaPath方法绘制圆角或弧线，具体的操作需要三步，指定绘制路径的起始点["moveTo", x, y]、绘制一条水平直线["lineTo", x, y]、绘制弧线["arcTo", p1.x, p1.y, p2.x, p2.y, r]。

参数示例：

  1. ["moveTo", 50, 50],
  2. ["lineTo", 150, 50],
  3. ["arcTo", 200, 50, 200, 100, 50],

上述参数运行效果图如5-1所示：

（图5-1）

通过图5-1我们可以看出，["moveTo", 50, 50]将画笔的起始点定位于"50,50"这个位置。["lineTo", 150, 50]绘制了一条由于起始点到当前端点（”150, 50“）的直线。["arcTo", 200, 50, 200, 100, 50]绘制了一段r（半径）为50弧线。

弧线绘制原理：

在制作这段弧线时，这个弧其实是利用当前端点"150, 50"、端点1"200, 50"、端点2"200, 100"，这三个端点所形成的夹角，制作一条半径为50px并且与两边相切的圆上的一段弧线。

如果我们已经理解了弧线的绘制原理，我们还会发现，构成弧线的核心要素为两条边和与两边形成夹角的顶点（上例中的端点1），图5-1中的端点2与端点1形成的x轴边比较好理解，那当前端点与端点1已经构成了y轴边，那与当前端点在同一个y轴的起始点是不是可以去掉呢，事实并不可以，画笔的起始点必须存在，但是绘制直线的lineTo可以去掉，如果["lineTo", 150, 50],被注释掉，那么arcTo绘制弧线的时候，会视起始点为当前端点，arcTo找不到lineTo绘制的直线时，会自动添加一条由起始点到弧线起点的直线，因此，绘制圆角矩形时，lineTo可以省略。

3.2 绘制圆角矩形示例

下面我们绘制一个圆角弧线半径为30的圆角矩形，示例代码如下：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  5.     export class Sprite_DrawShapes {
  6.         private sp: Sprite;
  8.         constructor()
  9.         {
  10.             //初始化舞台
  11.             Laya.init(1136, 640);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.             //自定义路径
  19.             var path:any[] =  [
  20.                 ["moveTo", 0, 0], //画笔的起始点，
  21.                 ["lineTo",400,0],
  22.                 ["arcTo", 500, 0, 500, 30, 30], //p1（500,0）为夹角B，（500,30）为端点p2
  23.                 ["lineTo",500,200],
  24.                 ["arcTo", 500, 300, 470, 300, 30],//p1（500,300）为夹角C，（470,300）为端点p2
  25.                 ["lineTo",30,300],
  26.                 ["arcTo", 0, 300, 0, 270, 30], //p1(0,300)为夹角D，（0,270）为端点p2
  27.                 ["lineTo",0,100],
  28.                 ["arcTo", 0, 0, 30, 0, 30],//p1(0,0)为夹角A，（30,0）为端点p2
  29.             ];
  30.         //绘制圆角矩形
  31.         this.sp.graphics.drawPath(100, 100, path, {fillStyle: "#00ffff"});
  32.         }
  33.     }
  34. }
  35. new laya.Sprite_DrawShapes();

代码运行效果：

​ （图5-2）

在上面的代码里，看起来没有任何问题，其实moveTo的起始点，需要在圆弧之间的直线上，下面我们只需要在drawPath绘制时，增加一个边框线，就可以清楚的看出错误。绘制方法graphics.drawPath修改为：

  1. //绘制圆角矩形
  2. this.sp.graphics.drawPath(100, 100, path, {fillStyle: "#ff0000"},{"strokeStyle":"#ffffff","lineWidth":"10"});

修改后运行效果如图5-3所示，由于画线的时候，从画笔的起始点0,0开始的，所以并不是我们想要的结果。

(图5-3)

下面我们将示例修改为正确的代码：

  1. module laya {
  2.     import Sprite = Laya.Sprite;
  3.     import Stage = Laya.Stage;
  5.     export class Sprite_DrawShapes {
  6.         private sp: Sprite;
  8.         constructor()
  9.         {
  10.             //初始化舞台
  11.             Laya.init(1136, 640);
  12.             this.drawSomething();
  13.         }
  15.         private drawSomething(): void {
  16.             this.sp = new Sprite();
  17.             Laya.stage.addChild(this.sp);
  18.             //自定义路径
  19.             var path:any[] =  [
  20.                 ["moveTo", 30, 0], //画笔的起始点，
  21.                 ["lineTo",400,0],
  22.                 ["arcTo", 500, 0, 500, 30, 30], //p1（500,0）为夹角B，（500,30）为端点p2
  23.                 ["lineTo",500,200],
  24.                 ["arcTo", 500, 300, 470, 300, 30],//p1（500,300）为夹角C，（470,300）为端点p2
  25.                 ["lineTo",30,300],
  26.                 ["arcTo", 0, 300, 0, 270, 30], //p1(0,300)为夹角D，（0,270）为端点p2
  27.                 ["lineTo",0,100],
  28.                 ["arcTo", 0, 0, 30, 0, 30],//p1(0,0)为夹角A，（30,0）为端点p2
  29.             ];
  30.         //绘制圆角矩形
  31.         this.sp.graphics.drawPath(100, 100, path, {fillStyle: "#ff0000"},{"strokeStyle":"#ffffff","lineWidth":"10"});
  32.         }
  33.     }
  34. }
  35. new laya.Sprite_DrawShapes();

运行效果如图5-4所示：

 （图5-4）

四、用LayaAirIDE拖动控件绘制矩形

​ 步骤一：打开我们的LayaAirIDE，点击设计模式，新建一个View页面

 

 

​ （图6）

步骤二：将组件中的曲线组件拖动到View页面上，就会自动生成默认的曲线

​ （图7）

步骤三：修改（添加/减少）Rect组件属性中的数值，改变矩形的大小、颜色、旋转角度等等。

 （图8）

（图14）

到此我们通过LayaAirIDE中的组件来绘制矩形就完成了。

其他更多内容请前往laya 官网查看，这里的案例主要是在laya2.0的引擎上使用，至此我们的基础篇已经掌握足够多的内容了，快去尝试一下吧

Vince_13
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Layabox3D游戏开发入门-微信3D小游戏案例
06-15
利用Layabox1.0 开发的3D微信小游戏案例，从Unity导出场景到在Layabox里应用，再到开发，本课程适合想入门微信3d小游戏的开发者。 注：只提供美术资源，不提供源代码，源代码需另购买。 源代码地址：https://edu.csdn.net/course/detail/25835
基于laya Air引擎的游戏开发之简介篇
Vince_13的博客
07-18 3021
LayaAir引擎集成了项目创建、可视化编辑（UI、场景、动画、材质、粒子、物理、蓝图等）、资源管理、组件管理、插件扩展、项目发布等全工作流高效工具，支持一次开发全平台发布，包括：Web平台（浏览器、WebView）、小游戏平台（字节跳动小游戏、微信小游戏、OPPO小游戏、vivo小游戏、小米快游戏、支付宝小游戏）、Native APP平台（安卓、iOS）。整个H5融合了私人订制、产品展示、拜年广告等元素，将精美的画质、流畅的体验、出色的视频播放性能融为一体，展现出了Burberry的英式优雅。
LayaAir3.2来了：性能大幅提升、一键发布安装包、支持WebGPU、3D导航寻路、升级为真正的全平台引擎...
最新发布
Layabox
05-27 893
LayaAir3的每一个分支版本都是一次较大的提升，在3.1彻底完善了引擎生态结构之后，本次的3.2会重点完善全平台发布相关的种种能力，例如，除原有的安卓与iOS系统外，还支持Windows系统、Linux系统、鸿蒙Next系统，以及主流的国产芯片适配等。另外就是性能的大幅提升以及一键发布安装包等易用性的大幅提升。当然，主旋律之外，3D的更新也是不可或缺的，下面将分别详细介绍。01升级为真正的全平...
吐槽laya：H5小游戏开发应该用什么引擎好？laya、cocos还是unity？
u014240783的专栏
02-01 3658
生命有限，远离laya
laya中的贝塞尔曲线
qq_40529176的博客
07-24 981
class BezierPath{ public static CreateBezierPoints(anchorpoints, pointsAmount):Array { var points = []; for (var i = 0; i < pointsAmount; i++) { var point = this.MultiPointBezier(anchorpoints, i / pointsAmount); points.push(point); } return points; } pr
Laya air 3.0 初试
夏天的树人的专栏
01-11 1923
3.0的引擎发布标志了国产引擎的进步，生态相互抗衡也是体验对图形学发展。
laya draw 扇形 并设置透明度
frankxixu的专栏
09-05 431
this.tmask = new Laya.Sprite() this.tmask.graphics.drawPie(80,80,50,90,120,"#000000"); this.tmask.graphics.alpha(0.8); this.tmask.pos(20,20) this.bombBtn.mask = this.tmask
使用laya游戏引擎学习开发打仓鼠游戏.zip
04-19
Laya是一款基于HTML5的2D/3D游戏开发引擎，支持JavaScript、TypeScript以及LayaAir的编写方式。它提供了丰富的图形渲染能力，包括2D图形、3D模型、粒子效果等，同时兼容各种浏览器和移动设备，使得开发者可以轻松...
使用layabox引擎开发的H5游戏.zip
04-19
《使用Layabox引擎开发H5游戏》 Layabox引擎是一款专为HTML5游戏开发者设计的高效、易用的游戏开发工具，它以其强大的性能、丰富的功能和友好的社区支持，成为了H5游戏开发领域的一股重要力量。下面，我们将详细...
Laya2.2.0版本2D游戏开发
06-16
在本文中，我们将深入探讨使用Laya2.2.0版本进行2D游戏开发的知识点。Laya是一个强大的跨平台游戏引擎，它支持HTML5、Android以及iOS等多个平台，为开发者提供了一套高效且易用的工具链，使得2D游戏开发变得简单。 ...
Laya落笔乾坤游戏开发教程.rar
06-30
《Laya落笔乾坤游戏开发教程》是一套专注于使用Laya引擎进行游戏开发的详细教程。Laya是一款高效、开源的2D/3D游戏开发框架，它支持HTML5、Android和iOS多平台运行，为开发者提供了丰富的功能和便捷的开发体验。本...
Layaair 3D场景使用
11-29
介绍 Layaair 3D场景使用，包含unity3D 和 Layaair 工程 使用介绍 https://blog.csdn.net/nicepainkiller/article/details/84636112 https://blog.csdn.net/nicepainkiller/article/details/84636112
layabox飞机大战源码
02-05
基于layabox官方教程的飞机大战源码, 包含游戏素材
LayaAir打地鼠示例源码(可运行版本)
10-13
这个是LayaAir打地鼠的官方示例,不过修改了一些不能运行的代码,以及在lib中添加了需要引用的swc包.请导入项目后,引用lib中的swc,即可运行.
Laya追踪效果源码
10-23
里面有两个类，一个调用类，一个实体类，实体类实现了追踪效果的具体实现，注释齐全
Laya仿贪吃蛇大战源码
09-02
仿照 贪吃蛇大作战 的练手项目，前端时间接触了一下layabox，发现其性能表现确实很强劲，就做了这个贪吃蛇小作战学习使用一下。 layabox性能还不错，示例在手机上通过运行器或打包之后，基本维持在59~60帧（Nexus5, Android 4.4.2）
Laya头顶足球游戏开发教程.rar
06-30
《Laya头顶足球游戏开发教程》是一份专为游戏开发者准备的详细教程，主要围绕Laya引擎进行讲解，旨在帮助开发者掌握使用Laya创建头顶足球游戏的技术和流程。Laya是一个强大的2D和3D游戏开发框架，它支持HTML5、...
LayaAir IDE 项目发布3.0 详解（含命令行发布）
Layabox
01-17 2408
本篇文档基于 LayaAir IDE 2.0正式版，2.0正式版将于本周末官网更新提供开放下载，敬请开发者关注。LayaAir IDE的项目发布是开发者常用的功能，集成了...
LayaAir3最稳定的版本来了，3.0.11或将成为3.0分支的终结版
Layabox
01-05 577
在LayaAir1与LayaAir2的发版策略中，存在一个BUG，就是永远都在新的版本上修复上一个版本的问题。这就导致了在高速迭代的过程中，很难有一个持续维护的小版本分支。也就是说直到引擎停止了功能更新的最后几个版本，才能真正步入稳定版。从LayaAir3开始，我们彻底修复了这个策略上的BUG，分支版本会持续维护几个月甚至更长，直到真正的稳定后，甚至是下一个版本的稳定版推出后，才会终结上一个分支版...
用laya引擎开发一款类似开心消消乐的游戏
05-19
开心消消乐是一款比较经典的消除类游戏，使用Laya引擎开发类似的游戏也是可行的。以下是一些实现该游戏的基本思路： 1. 创建游戏场景 使用Laya引擎的Scene场景类，创建游戏场景。场景中包含背景、游戏区域、分数显示区域等。 2. 创建游戏元素 根据游戏规则，创建可消除的元素，比如不同颜色的方块、圆形等。使用Laya引擎的Sprite类或其子类，如Animation或Image等，来创建游戏元素。 3. 实现游戏逻辑 比如元素的移动、消除、分数计算等逻辑。可以使用Laya引擎提供的Tween类来实现元素的移动动画效果。使用数组或矩阵来存储游戏元素的状态和位置信息，进行元素的消除和分数计算。 4. 实现用户交互 用户可以通过鼠标或触摸屏幕来选择需要消除的元素。使用Laya引擎提供的Event类来处理用户交互事件，比如鼠标点击、触摸事件等。 5. 实现音效和特效 使用Laya引擎提供的SoundManager类来加载和播放音效文件。可以使用Tween类来实现元素消除时的特效效果。 以上是开发类似开心消消乐游戏的基本思路，当然还有很多细节需要考虑，比如用户界面、关卡设计等。但是使用Laya引擎开发，可以大大减少开发成本和时间，同时得到高性能和优秀的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值