[cocos creator] - 绘制矩形

如何在二维直角坐标系得到一个矩形

矩形的定义:至少有三个内角都是直角的四边形是矩形。

要在二维的直角坐标系绘制矩形,需要的条件:

  • 矩形的任意三个坐标点
  • 这三个坐标点连成的线段可以形成一个直角

假设在直角坐标系中存在 A、B、C 三点,∠BAC=90°,如图所示:

image.png

两点即可确定一条线段,作一条 AB 的平行线段,令其经过点 C,且该线段的长度与 AB 相同:

image.png

同理,再做 AC 的平行线段,令其经过点 B,且该线段与 AC 长度相同,新作出的两条平行线段存在一个交点,设为点 D:

image.png

这样我们就在二维的直角坐标系得到一个矩形了。

cocos creator 中绘制矩形

官方 API 文档:cc.Rect

在 cocos creator 中,使用 cc.Rect 来绘制一个矩形,cc.Rect 的使用示例:

let rect = new cc.Rect(x , y, w, h);

其中,各个参数代表的含义:

  • x:矩形的 x 坐标
  • y:矩形的 y 坐标
  • w:矩形的宽度
  • h:矩形的高度

上面的例子,我们重温了在直角坐标系绘制矩形的方法,然而在 cocos creator 里,却不需要三个坐标点,这无疑是非常奇怪的事,为了探究 cocos creator 是如何绘制矩形的,我们只需要将 cocos creator 生成的矩形打印出来即可。

let rect = new cc.Rect(100 , 50, 50, 25);
cc.log(rect);

上面的代码中,我们通过 new 创建了一个矩形实例,令这个矩形的坐标为 (100,50),宽度为 50,高度为 25,输出结果:

image.png

分析结果,xMinxMaxyMinyMax 分别是矩形四个坐标点,即(100,75)、(100,50)、(150,75)、(150,50) 在坐标系中表示,则为:

image.png

现在我们知道 cocos creator 是如何绘制一个矩形了,我们的代码中:

new cc.Rect(100 , 50, 50, 25);

前两个参数 100、50 分别是矩形左下角的 x 坐标和 y 坐标,cocos creator 以这个点作为绘制矩形的依据,令 y 坐标加上矩形的高度,x 坐标不变,得到第二个点 (100,75);令 y 坐标不变,x 坐标加上矩形的宽度,得到第三个点 (150,50),如上图的箭头标示的方向,所以说,要确定一个矩形,果然还是需要三个点呀。

cocos creator 矩形的参数

通过打印出 cocos creator 绘制的矩形实例可以得到如下结果:

height: 25
width: 50
x: 100
y: 50
center: Vec2
    x: 125
    y: 62.5
origin: Vec2
    x: 100
    y: 50
size: Size
    height: 25
    width: 50
xMax: 150
xMin: 100
yMax: 75
yMin: 50

从上往下逐一介绍字段的含义。

height、width

矩形的高度和宽度,也就是我们实例化传入的后两个参数。

x、y

矩形矩形左下角的坐标,也就是我们实例化传入的前两个参数。

center

矩形的中心点坐标,也就是左下角的点的坐标分别加上宽度的一半和高度的一半。

简而言之就是矩形对角线的交点坐标。

origin

矩形原点的位置,也就是左下角的坐标。

xMax、xMin、yMax、yMin

  • xMax:矩形 x 轴坐标最大值
  • xMin:矩形 x 轴坐标最小值
  • yMax:矩形 y 轴坐标最大值
  • yMin:矩形 y 轴坐标最小值

讨论

还没有人评论~