ActionScript
TypeScript
JavaScript

绘制矩形与圆角矩形

发布时间:2017-02-10

一、用drawRect方法绘制矩形

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

blob.png

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

(function()
{
    var Sprite = Laya.Sprite;
    var Stage  = Laya.Stage;
 
    (function()
    {
        //初始化舞台
        Laya.init(500, 300);
        drawSomething();
    })();
 
    function drawSomething()
    {
        var sp = new Sprite();
        Laya.stage.addChild(sp);
        //画矩形
        sp.graphics.drawRect(20, 20, 100, 50, "#ffff00");
		
     }
})();

代码运行效果:

blob.png

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



二、用drawPath绘制矩形

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

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

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

(function()
{
    var Sprite = Laya.Sprite;
    var Stage  = Laya.Stage;
 
    (function()
    {
        //初始化舞台
        Laya.init(500, 300);
        drawSomething();
    })();
 
    function drawSomething()
    {
        var sp = new Sprite();
        Laya.stage.addChild(sp);
        //自定义路径
        var path =  [
            ["moveTo", 0, 0], //画笔移到A点
            ["lineTo", 100, 0],//画到B点
            ["lineTo", 100, 50],//再画到C点
            ["lineTo", 0, 50], //继续画到D点
            ["closePath"] //闭合路径
        ];
            //绘制矩形
        sp.graphics.drawPath(20, 20, path, {fillStyle: "#ff0000"});
		
     }
})();

代码运行效果:

blob.png

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

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


下面开始介绍带圆角的矩形如何绘制。示例代码如下

(function()
{
    var Sprite = Laya.Sprite;
    var Stage  = Laya.Stage;
 
    (function()
    {
        //初始化舞台
        Laya.init(500, 300);
        drawSomething();
    })();
 
    function drawSomething()
    {
        var sp = new Sprite();
        Laya.stage.addChild(sp);
        //自定义路径
        var path =  [
            ["moveTo", 0, 0], 
            ["arcTo", 100, 0, 100, 1, 10], 
            ["arcTo", 100, 50, 99, 50, 10], 
            ["arcTo", 0, 50, 0, 49, 10], 
            ["arcTo", 0, 0, 1, 0, 10],             
        ];
            //绘制圆角矩形
        sp.graphics.drawPath(20, 20, path, {fillStyle: "#ff0000"});
     }
})();

代码运行效果:

blob.png

在绘制圆角的时候,仍然需要先将画笔初始位置移到A点坐标的"0,0"位置。那圆角怎么形成的呢,我们先从B开始分析,首先我们要理解“100,0”是夹角B的顶点坐标,而。“100,1”可以是B到C中的任意一个坐标,因为他的目的是构建一条直线,与顶点B到A的直线,形成一个两边相切的圆弧。而最后的参数10是圆弧所在圆的半径。以此类推,“100,50”是夹角C的顶点坐标,“99,50”而是C到D中的任意一个坐标。后面就不逐一介绍了,大家可以通过实际的编码再深入理解一下。