簡(jiǎn)介

前幾版How-Old發(fā)布后，不少用戶反饋，在顯示結(jié)果的頁面中，用于標(biāo)注前面人年齡的標(biāo)簽，會(huì)遮擋住后面的人的臉。這是因?yàn)槲覀冏畛醪捎霉潭ㄆ频姆绞絹矸胖媚挲g標(biāo)簽。

而怎么樣讓標(biāo)簽不遮擋住其他人的臉，則成為一個(gè)有趣的問題。最近我們發(fā)布了一次How-Old更新，正好用這篇文章，來記錄一下我們對(duì)這一問題的實(shí)現(xiàn)。

先直觀的看一下新版本的改變（左舊 右新）：

問題

我們來抽象一下這個(gè)問題。

在服務(wù)器端識(shí)別出了照片中的臉后，會(huì)將識(shí)別數(shù)據(jù)傳回客戶端，其中包含了每個(gè)臉的邊緣矩形的位置和大小信息（FaceRect）。

然后我們要為每個(gè)臉添加對(duì)應(yīng)的標(biāo)簽（LabelRect）。LabelRect和FaceRect兩兩不重合，LaebelRect自身兩兩不重合。（FaceRect本身是有可能重合的）

并且我們希望每個(gè)標(biāo)簽都盡量離對(duì)應(yīng)的臉比較近。

以上就是比較核心的問題描述。此外我們?cè)趯?shí)現(xiàn)中還加入了一些小小的增強(qiáng)體驗(yàn)的條件，在正文中會(huì)為大家敘述。

算法

準(zhǔn)備

我們采用了平面分割標(biāo)記的算法來布置LabelRect。

對(duì)于每個(gè)Rect（包括LabelRect，F(xiàn)aceRect），我們需要它的中心點(diǎn)RectCenter(x, y)，我們需要確定的也正是每個(gè)LabelRect的中心點(diǎn)。

簡(jiǎn)單的分析一下，我們發(fā)現(xiàn)在每個(gè)Rect周圍一定的區(qū)域內(nèi)，是不能布置LabelCenter的，否則就會(huì)導(dǎo)致重合。

如下圖所示：

亮藍(lán)色是FaceRect，墨綠色是LabelRect，中間的綠點(diǎn)是LabelRect的中心。

粉紅色的半透明區(qū)域就是那些不能放置LabelCenter的。這個(gè)區(qū)域的大小也由LabelRect的大小確定（此例中LabelRect的大小是我們?cè)O(shè)定好的，每個(gè)都一樣）。

粉紅區(qū)域是有FaceRect分別向左右各擴(kuò)展LabelRect.Width/2，向上下各擴(kuò)展LabelRect.Height/2確定的。可以看出只要在粉紅區(qū)域以外放置LabelRect，就必然不會(huì)導(dǎo)致LabelRect和FaceRect相交。

我們簡(jiǎn)單的把每個(gè)粉紅區(qū)域叫做一個(gè)ForbidRect。

這樣我們就只需要在ForbidRect的邊界上選出最合適的點(diǎn)作為L(zhǎng)abelCenter就行了（比如離FaceRect最近的點(diǎn)）。

但實(shí)際上上圖還有問題。還要保證LabelRect彼此不相交呢？

上圖應(yīng)該是這樣：

為了方便，我們采用依次布置LabelRect的方式，先布置的一旦布置好就不再移動(dòng)了，后布置的受限于前面布置的。（即不采用“在一個(gè)漏斗里倒入小球，小球會(huì)彼此擠開”這種方式）

現(xiàn)在我們提供一種逐步布置的過程，直觀的理解一下：

最初從服務(wù)器傳回的FaceRect。

============================

得出最初的ForbidRect集。

============================

布置第一個(gè)LabelRect。

============================

更新ForbidRect集。

============================

布置第2個(gè)LabelRect。

============================

再更新ForbidRect集就達(dá)到了我們之前那樣的結(jié)果。

（此過程舉例中先放哪個(gè)后放哪個(gè)，是隨便選的）。

那，我們?cè)趺创_定該把LabelCenter放在哪呢？換言之，我們?cè)趺闯鯢orbidRect的邊界上選出那個(gè)合適的點(diǎn)呢？

當(dāng)時(shí)我們就想，怎么在非離散的二維平面上做這個(gè)？

分割

然后我們采用了分割平面的方法，就像上圖那些重疊的半透明的粉紅色塊一樣，將平面分成一塊塊的來遍歷。

Like this：

（不重要的色塊被淡化了。）

每個(gè)forbidRect都會(huì)引入4個(gè)分割線，橫向倆，縱向倆。

同時(shí)每條分割線會(huì)包含引入這條線的ForbidRect編號(hào)，每條線都用一個(gè)二元組描述：

Tuple1= （offset, rect_id）。Offset是這條線在垂直方向上距原點(diǎn)的偏移量（就是“直線X=3”里面的那個(gè)“3”），rect_id就是引入它的ForbidRect編號(hào)。

橫線，縱向分開統(tǒng)計(jì)。

舉例：假設(shè)左上角那個(gè)forbidRect編號(hào)是0，右下角那個(gè)是1。當(dāng)前縱向的分割線二元組數(shù)組為：L1 = {(1, 0), (5, 0), (4, 1), (8, 1)}

然后我們?yōu)榱艘苑廊f一要處理一下，就是把偏移量相同的線歸組（雖然不太可能有線重合，但這也是優(yōu)化點(diǎn)之一，我們可以將forbidRect對(duì)齊到一些偏移量為某整數(shù)倍的位置）。

歸組后的新二元組如下：

Tuple2=（offset，set<rect_id>）。二元組的第二個(gè)元素變成了forbidRect 編號(hào)的集合了。

此時(shí)我們有兩個(gè)Tuple2數(shù)組了（橫向的，縱向的），我們按照offset字段將它們排序（兩個(gè)方向的分開進(jìn)行）。

舉例，排序后的縱向線的數(shù)組為：L2 = {(1, {0}), (4, {1}), (5, {0}), (8, {1})}

這時(shí)我們要遍歷一下排序后的數(shù)組，收集一些信息，通過類似棧的方式獲取每個(gè)forbidRect覆蓋的分割線在分割線數(shù)組中的索引（從0開始）。因?yàn)榉指罹€排好序了，我們就記一個(gè)區(qū)間好了。

舉例：forbidRect 0 的“覆蓋線”的索引區(qū)間為： [0, 2]。

但是我們是為了分割平面才引入的分割線，因?yàn)樗椒较蛏纤饕秊?的線（第三條線）之后已經(jīng)不是forbidRect 0 的范圍了，所以這個(gè)索引區(qū)間的意義實(shí)際上是[0, 2)——不再是分割線的索引，而是橫向上的小平面區(qū)域的索引。

同時(shí)，我們還有一個(gè)映射M1：(index1, index2) -> isDirty。映射源是一個(gè)被橫縱線分割出的小矩形（Cell）的橫縱向索引，映射目標(biāo)是一個(gè)boolean量，用來表示這個(gè)Cell是否屬于一個(gè)ForbidRect。

舉例：(0,0)->true, (1,0)->true, (2,0)->false. (2,2)->true.

做好這些準(zhǔn)備后，就是我們最后的布局階段了。

放置

在How-Old實(shí)際使用的算法中，

我們依照距離所有faceRect重心（是“重心”）最小的順序?yàn)镕aceRect排序，也就是越靠近中心的越先處理。

對(duì)每個(gè)faceRect，找到它的ForbidRect。通過ForbidRect在X Y方向上的“覆蓋Cell”索引區(qū)間，找出位于該Forbidrect邊界上的Cell。

舉例：ForbidRect 0 邊界上的Cell有：(0, -1) (1, -1) (-1, 0) (-1, 1) (2, 0) (2, 1) (0, 2) (1, 2)

就是圖中這四個(gè)黃色塊標(biāo)示的8個(gè)Cell（最左邊和最上邊的就為它們編號(hào)-1）。

===================================

其中有幾個(gè)Cell是Dirty的：

===================================

也就是說，我們只要在這6條線段（藍(lán)色標(biāo)出）上找LabelCenter就可以了

===================================

我們當(dāng)前的策略是：先上，再左，再右，最后下方。

對(duì)每個(gè)線段，判斷它的兩個(gè)頂點(diǎn)，是在FaceRect與線段垂直的軸線的一左一右？一上一下？還是在同一側(cè)？——這樣就能判斷最優(yōu)的點(diǎn)（距離最近）。每個(gè)線段有一個(gè)最優(yōu)解，再從中得出全局最優(yōu)解。

（如果在上方就能得出這樣的解，直接就用它做全局解。不然依次繼續(xù)左、右、下方中找。下方的點(diǎn)，我們不喜歡，設(shè)置一個(gè)值去抑制它成為全局最優(yōu)解）。

但，如果一個(gè)forbidRect四面受敵，一條這樣的邊界線段也沒有怎么辦呢？

此時(shí)我們通過一個(gè)forbidRect相交矩陣，廣度優(yōu)先，遍歷每個(gè)和它直接或間接相接的forbidRect，從這些ForbidRect的邊界線段上，找出最優(yōu)的那個(gè)點(diǎn)，作為L(zhǎng)abelCenter。

之后我們將這個(gè)LabelRect對(duì)應(yīng)的ForbidRect加入ForbidRect集，并對(duì)下一個(gè)Face（按距重心排序地）進(jìn)行同樣的過程。直到所有Face都處理完成。

總結(jié)

這個(gè)算法的大致流程就是這樣，其中也還有一些地方值得繼續(xù)優(yōu)化。當(dāng)然我們還對(duì)標(biāo)簽大小，標(biāo)簽偏移等屬性進(jìn)行了微調(diào)。

希望這篇文章能拋磚引玉，如果大家有更好的算法或者想法，歡迎和我們交流。也歡迎下載最新版的How-Old進(jìn)行各種各樣圖片的測(cè)試。

最后 向量子力學(xué)致敬:)

并附上我們的微軟顏齡的 應(yīng)用下載地址：https://www.windowsphone.com/zh-cn/store/app/%E5%BE%AE%E8%BD%AF%E9%A2%9C%E9%BE%84/8f4e7547-7ecb-4736-8306-11b97ba293e1

總結(jié)

以上是生活随笔為你收集整理的微软颜龄 维护小记——布局的小智慧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。