巧用冗余圖層實(shí)現(xiàn)元件中心點(diǎn)與注冊(cè)點(diǎn)的合一

在Flash中，創(chuàng)建的每個(gè)元件都有一個(gè)注冊(cè)點(diǎn)和一個(gè)中心點(diǎn)。這兩個(gè)點(diǎn)都可以用于定位和作用參照點(diǎn)使用，其中，中心點(diǎn)還是元件旋轉(zhuǎn)的參照點(diǎn)。在元件進(jìn)行以自身中心點(diǎn)旋轉(zhuǎn)時(shí)，中心點(diǎn)的位置就決定了元件堂堂正正的旋轉(zhuǎn)，還是歪歪扭扭的旋轉(zhuǎn)。文字的描述不如直接使用實(shí)例來(lái)得詳細(xì)，下面就通過(guò)一個(gè)風(fēng)車(chē)自轉(zhuǎn)的實(shí)例，來(lái)描述當(dāng)中心點(diǎn)不在原來(lái)位置時(shí)導(dǎo)致風(fēng)車(chē)自轉(zhuǎn)時(shí)產(chǎn)生歪歪扭扭的旋轉(zhuǎn)現(xiàn)象。

在Flash中創(chuàng)建一個(gè)元件，畫(huà)一個(gè)不填充的環(huán)、三條直線（以對(duì)象方式繪制），如下圖：

使用變形面板將A、B兩條線分別旋轉(zhuǎn)60度和-60度，三條線與圓環(huán)以舞臺(tái)水平、垂直居中，結(jié)果如下圖：

全選后打散（ctrl+B），刪除一些線條成變成下圖：

這時(shí)元件的中心點(diǎn)已經(jīng)不在中間小圓的圓心上了，可以通過(guò)在舞臺(tái)上放置該元件得以驗(yàn)證，如下圖：

如果讓這個(gè)元件以自己的中心點(diǎn)進(jìn)行自轉(zhuǎn)，轉(zhuǎn)出來(lái)的就是歪歪扭扭的情景。

原因：在修剪外圓邊框時(shí)，已經(jīng)破壞了整個(gè)圖形的幾何中心，元件的長(zhǎng)、寬已經(jīng)不一致了，中心點(diǎn)也就不會(huì)在圓心了。

有人會(huì)想：中心點(diǎn)不在小圓圓心，我們?cè)谥谱饕灾行狞c(diǎn)自轉(zhuǎn)的動(dòng)畫(huà)時(shí)修改中心點(diǎn)的位置不就行了。好吧，你可以試試看，通過(guò)修改中心點(diǎn)再讓這個(gè)元件自轉(zhuǎn)下，你會(huì)發(fā)現(xiàn)旋轉(zhuǎn)起來(lái)還是有歪歪扭扭的感覺(jué)。為什么？問(wèn)題的關(guān)鍵在于你用手動(dòng)修改中心點(diǎn)也很難更改得剛好在小圓的圓心?。。?/span>

問(wèn)題來(lái)了，怎么樣才能在修剪成風(fēng)車(chē)形狀時(shí)又能保持其中心點(diǎn)還在圓心上呢？

解決的方法就是在繪制元件時(shí)添加上一個(gè)冗余圖層，在冗余圖層上再繪制比風(fēng)車(chē)大一些正圓或正方形并以舞臺(tái)水平垂直居中，繪制的正圓或正方形不要邊框并且把填充的alpha設(shè)置成0。

如下圖：

當(dāng)冗余層上×××圓的alpha值為0時(shí)，就是透明的。通過(guò)這種方式保證整個(gè)元件的中心還在小圓的圓心上，也保證了中心點(diǎn)與注冊(cè)點(diǎn)的合一。通過(guò)重新在舞臺(tái)上放置的元件就可知，如下圖：

這時(shí)再以中心點(diǎn)對(duì)這個(gè)元件進(jìn)行自轉(zhuǎn)就不需要調(diào)整中心點(diǎn)，也不會(huì)再出現(xiàn)歪歪扭扭的現(xiàn)象了。