Flash中的注册点和中心点

用一句话概括注册点和中心点的作用，那就是：注册点用来定位，中心点用来变形

当然，这句话不是非常准确，只是暂时先这么理解，下面会详细讲解。

认识注册点

每个元件都有一个注册点。在元件编辑窗口、或在舞台中选中一个元件实例时，可以看到元件上有一个“十”字型的标记，这就是注册点了，如图所示。其他类型的元素，例如形状、位图、文本等也有注册点，但不可见，并且始终位于这些元素的左上角。

              

    在舞台中选中一个元件实例                               元件编辑窗口

元素的定位

既然说注册点主要的作用是用来定位，那么我们就要首先了解Flash中的元素是如何定位的。

Flash Player要显示一个元素，首先要定位它，即计算它在舞台中的坐标。Flash Player按下面的方法来计算一个元素在舞台中的位置：

          X = x + Δx

          Y = y + Δy

其中，X、Y表示元素的绝对坐标（或称为舞台坐标、全局坐标）；x、y为元素相对于其父元素的坐标（或相对坐标、局部坐标）；Δx和Δy为其父元素在舞台中的坐标。

这类似于文件系统中的绝对路径和相对路径：一个文件的绝对路径是由它相对于它的父文件夹的相对路径与该父文件夹相对于根目录的绝对路径所组成的。（有点拗口^ ^）

当将一个元素直接添加到舞台上时，例如直接在舞台上绘制图形，它的相对坐标和绝对坐标是相同的。因为它的父元素就是舞台。而当元素位于元件内部时，在Flash属性面板中显示的元素坐标其实是它与元件的相对坐标。Flash Player在定位时，需要先计算它的绝对坐标，然后才能将其绘制到舞台的指定位置。

坐标的确定

我们知道，在普通的直角坐标系中，一个点的坐标用它与横轴和纵轴的距离来表示（这里我们仅将讨论范围限定在第一象限中，其他象限可由第一象限以某种方式对称得到），其中与纵轴的距离称为横坐标，与横轴的距离称为纵坐标。

例如点(x, y)表示该点距离横轴y个单位、距离纵轴x个单位。

在Flash中也是一样，元素的坐标是其与参照系的横、纵轴的距离。不同的是，在Flash中横轴仍然是自左向右方向，但纵 轴却是自上向下的方向，即坐标原点位于参照系的左上角。大部分计算机显示系统都采用这种方式，例如Windows的显示器屏幕、浏览器中的内容区域等。如 下图

注意：坐标系如何选取不是最重要的，只要选定了一种坐标系并确定坐标原点，就能据此确定其中任何一点的位置。

现在，我们有了坐标系，也为坐标指定了其数学意义，是否可以说现在就能够计算元素的坐标了呢？

但是，稍微等一下，这里还有一个问题。在普通坐标系中，我们讨论的是点，点是没有大小的，所以当说到一个点的坐标时，实际情 况与我们的直观感觉是一致的。但在Flash中，我们讨论的是几何图形，一个几何图形和一个点有本质差别，几何图形具有大小（或面积），如何能够确定一个 几何图形的坐标呢？

这就要靠注册点来完成了。注册点是一个元素的坐标“基准点”，或称为参照点。元素的坐标就是它的注册点在当前参照系中的坐标。

例如，将元件实例添加到舞台时，以元件注册点相对于舞台左上角的距离作为元件的坐标。当元件坐标为(0,0)时表示元件的注 册点位于舞台左上角，而坐标为(50, 50)时表示元件的注册点位于距离舞台左侧和顶部各50像素的位置，如下图所示。其中白色区域是舞台，灰色区域为剪贴板区域。

                 

                   当坐标分别为(0,0)和(50,50)时元件相对于舞台的位置

对于元件内部的元素来说，参照系发生了变化——坐标原点变成了元件的注册点，而不再是舞台的左上角。

元件所包含的每个子元素也有自己的注册点，它们在元件内的坐标就是它们的注册点相对于元件注册点的坐标，如下图所示。

      

                 元件中的每个元素都有自己的注册点和中心点

注意：图中矩形和圆形的注册点位于它们的左上角，且是隐藏的，图中显示的“十”字型图标是元件自身的注册点。

当Flash Player要定位元件中的元素时（例如这里的矩形和圆形），首先定位元件，获得元件的坐标，然后根据元件的子元素相对于元件的坐标来计算它们相对于舞台的坐标。

改变定位的基准点

默认是以元素的注册点作为基准点来计算元素的坐标的，但可以改变这种设置。

在信息面板中，可以选择是以注册点还是中心点来作为元素的基准点。在下面左图中，信息面板中X、Y坐标的左侧小图标显示为，表示此时以注册点为基准点。点击此小图标，信息面板变为右图的样式，小图标变为了，同时X和Y坐标的值也发生了变化，表明此时是以中心点为基准点。

               

   以注册点为基准点时的坐标                   以中心点为基准点时的坐标

改变元素的基准点时，元素在舞台上的实际位置不会改变，改变的只是元素的坐标。Flash不会移动元素来适应新的基准点，而是以新的基准点来重新计算元素的坐标。

除元件外，在形状、位图、文本等元素的信息面板中，都有这里介绍的2种坐标参考方式。对于这些类型的元素来说，它们的注册点总是在左上角，中心点总是在其几何中心（例如圆形的几何中心是圆心、矩形的几何中心则是其对角线的交点，等等）。

提示：尝试改变元素的基准点，并在舞台中来回移动元素，或者在信息面板中指定坐标值来观察效果，可以更好地理解本文的内容。

中心点

任何可以通过变形工具进行变形的元素，都有一个中心点。用变形工具选中元素时，在元素中以一个小圆圈的图标表示它的中心点。

当创建一个元素时（图形、位图、文本等），中心点默认在其几何中心。可以使用变形工具选中该元素，然后拖动它的中心点图标，以改变中心点位置。

        

     默认的中心点位置          使用变形工具改变中心点位置

虽然像前面所说的那样，可以在信息面板中将元素的中心点指定为坐标参照点，但中心点的主要作用仍然是作为元素变形时的参照 点。在对元素进行拉伸、旋转等变形操作时，元素的各个部分以中心点为基准进行变化。以旋转为例，对上图中的2种不同的情况按顺时针旋转一定角度后，分别得 到下面两种结果：

   

                    中心点位置不同时旋转的效果也不同

为了看得更清楚，我特意在正在旋转时进行截图，这样就能同时看到旋转前（以浅色显示）和旋转后（以正常颜色显示）的状态了。

可以将元素想象成在中心点钉了一根钉子，元素旋转时将绕着钉子旋转。

注意：利用变形工具改变“形状”元素的中心点，其效果总是暂时的，一旦取消选择，中心点又会回到其几何中心的位置。相比之下，改变元件的中心点的效果则是永久的。

AS3中的参照点

在AS3中为影片剪辑或按钮元件设置坐标时（图形元件无法通过AS3访问），总是以元件的注册点为参照点来放置元件，而不管在信息面板中为该元件指定了哪种参考方式。通过代码创建的实例也是一样。

一个例子

说了这么多，我们以一个简单例子来作为总结。假设在一个射击游戏中，玩家位于屏幕左侧，敌人在右侧，从玩家发出的子弹沿着一 条水平线从左至右移动。程序会在每次移动后对子弹进行检测，如果子弹已经到达了敌人的位置，则表示敌人被击中了，如图所示。这里假设子弹和敌人两个元件的 注册点都位于左上角，在图中以“十”字型标识。

在每次移动子弹后，检查其x坐标是否大于等于敌人的x坐标，结果为true表示子弹“击中”了敌人（当然，可以使用AS3的hitTestObject()或hitTestPoint()来检测，但为了说明问题，这里使用“手动”的方式）：

if (bullet.x >= enemy.x) {

    // hit the enemy

}

这种检测方法并不严谨，会导致与玩家实际观测到的结果不一致，考虑下面这种临界情况：

显然，此时子弹已经击中了敌人，但因为子弹的坐标仍然小于敌人的坐标，所以上面的检测代码返回false。（图中的子弹距离敌人的头部还有少许的距离，但我们在这里规定子弹到达敌人的左边缘时即表示击中，而不考虑此处是否具有有效的像素）

为了修正检测方法，我们必须考虑注册点的影响，由于子弹的注册点在左侧，而我们想要实现的效果是当子弹右侧接触敌人时就表示命中，而子弹右侧边缘的坐标等于其实际坐标加上子弹的宽度，即：

bullet.x + widthOfBullet

通常，元素的宽度可以用其width属性来获得，因此修正后的检测方法为：

if (bullet.x + bullet.width >= enemy.x) {

    // hit the enemy

}

这样就能始终返回正确的结果了。

思考题：如果子弹和敌人的注册点都位于元件的几何中心，此时的检测方法应该是怎样的？

很简单，不是吗？如果你理解了注册点的含义的话。^ ^