ActionScript
TypeScript
JavaScript

绘制直线与折线

发布时间:2017-02-04

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

blob.png

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

(function()
{
	var Sprite = Laya.Sprite;
	var Stage  = Laya.Stage;
	var WebGL  = Laya.WebGL;
	var sp;

	(function()
	{
		//初始化舞台
		Laya.init(500, 300, WebGL);
		drawSomething();
	})();

	function drawSomething()
	{
		sp = new Sprite();
		Laya.stage.addChild(sp);
		//画直线
		sp.graphics.drawLine(10, 58, 167, 58, "#ff0000", 5);
	}
})();


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

blob.png


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

blob.png

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

(function()
{
	var Sprite = Laya.Sprite;
	var Stage  = Laya.Stage;
	var WebGL  = Laya.WebGL;
	var sp;

	(function()
	{
		//初始化舞台
		Laya.init(500, 300, WebGL);
		drawSomething();
	})();

	function drawSomething()
	{
		sp = new Sprite();
		Laya.stage.addChild(sp);
		//画折线
		sp.graphics.drawLines(20, 88, [0, 0, 39, -50, 78, 0, 120, -50],  "#ff0000", 5);
	}
})();


代码运行效果:

blob.png

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

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