Foobar 0.9.6.8音樂撥放器

[url]http://www.foobar2000.org/?page=Download[/url]
知道了人就會去下了..
不過這不是重點..

----------------------------------------------------------------------------------------------

因為我想講ELPlaylist插件的一些東西..
Columns UI能玩的東西實在太少了...
PUI也死寂了一陣子了...
本來想在PCDVD寫的..
但是PCDVD有時候很慢..
而且他有10分鐘限制..
我沒辦法自行編修..
所以...

由於我實在沒有看到有甚麼關於她的教學..
只能憑小弟的[COLOR="DarkRed"]爛爛編程功力[/COLOR]來看待了:(
ELPlaylist是SCPL的替代品..
廢話不多說，來看看吧!!..

這東西要記的東西很多，所以要花點時間。但是只要肯學，一定不出半年，你照樣也可以自行編寫。
===========================================================
[B][COLOR="Blue"]Schemes[/COLOR][/B]
[LIST][*]對ELPlaylist的官方Layout分析 [SIZE="2"](學習時間: 您只有10分鐘)[/SIZE][*]$put/$puts和$get存取方法的使用 [SIZE="2"](學習時間: 您只有30分鐘)[/SIZE][*]類似全域欄位變數的使用 [SIZE="2"](學習時間: 您只有10分鐘)[/SIZE][*]如何使用條件方法[*]$imageabs函數的使用 [SIZE="2"](學習時間: 您只有120分鐘)[/SIZE][*]改良官方的Album Art設計，使他更精緻些 [SIZE="2"](學習時間: 您只有60分鐘)[/SIZE][*]$drawtextex方法的使用[SIZE="2"](學習時間: 您只有180分鐘)[/SIZE][*]改良官方的Track Info，使他更美觀
[*]代碼的調整(refactoring)藝術[SIZE="2"](擺在最後講..!)[/SIZE][/LIST]
===========================================================
[COLOR="Blue"]對ELPlaylist的官方Layout分析[/COLOR]
我們應當先分析官方預設Layout的呈現外觀..
[img]http://j122251751.myweb.hinet.net/foobar/elpaylist_layout.jpg[/img]
從圈選的幾個區域來對應：
[INDENT]藍色：Group header
黃色：Track Info
紅色：Album Art+Reflection[/INDENT]
在這邊我們重點先擺在Track Info區域..
如何顯示清楚且美觀的專輯列表是首要的..
在此之前基礎不可少..
因此我們先來看變數的存取方式..

[COLOR="Blue"]$put和$get/$gets存取方法的使用[/COLOR]
$put/$puts和$get很像我們程式語言中的存取子結構..
$put/$puts其實就是宣告變數並且定義內容..
如果照這樣講..
我們以一般程式語言的表示法為：
[INDENT][SIZE="2"]text var_name=text_content;[/SIZE][/INDENT]
前面的text可以說是他的形態(type)，等號後面則是要賦予var_name的內容值..
和$put/$puts相對應為：
[INDENT][SIZE="2"]$puts(var_name,text_content)[/SIZE][/INDENT]
不過如果做成以setter的表示方式對應會是比較容易了解...
[INDENT][SIZE="2"]text var_name;
void puts(text text_content){
[INDENT]var_name=text_content;[/INDENT]
}[/SIZE][/INDENT]
同樣的，如果我們要取用我們設定好的變數，可以使用$get方法..
$get(var_name)
這時透過$get方法便可以取用var_name變數的內容..
對應成一般程式語言的getter表示方式對應為：
[INDENT][SIZE="2"]text get(){
[INDENT]return var_name;[/INDENT]
}[/SIZE][/INDENT]
為了讓各位更清楚，我們透過一個範例來展示：
[SIZE="2"]$puts(track.title,%title%)
$if($not(%el_isplaying%),$drawtextex($get(track.title),,,,,vcenter end_ellipsis),)[/SIZE]
上面如果有些方法看不懂可以別理他..
先看重點的$put/$puts和$get存取方法..
%title%是foobar的title formatting的標準功能變數..
是用於取得每首歌曲的標題...
最後我們透過$get來取得track.title的內容(%title%)..
畫面會是如下：
[img]http://j122251751.myweb.hinet.net/foobar/basic_put_get.jpg[/img]

[table=head]$put和$puts的差異
$put和$puts的差異是很明確的
$put在設定變數內容同時會返回變數內容值..
這意味著我們可以如下這樣做：
[SIZE="2"]$if($not(%el_isplaying%),$drawtextex($put(track.title,%title%),,,,,vcenter end_ellipsis),)[/SIZE]
結果會與前面的範例是一模一樣的..
但是$puts方法在設定完後只會返回一個空字串(empty string)...
因此要搭配$get方法來取出變數內容..
正常來說，為了維持良好的程式結構..
我們應該要善用$puts/$get方式..
而$put方式要盡量避免..
----------------------------------------------------------------------------------------------------[/table]

[COLOR="Blue"]類似全域欄位變數的使用[/COLOR]
ELPlaylist允許您自訂全域層級的欄位變數(姑且我就這樣叫..)..
它們這個功能稱為前置處理器(Preprocessor)
這意味著不同的功能腳本皆可以直接呼叫(ex: Track list, Group header, Per second, etc..)
[img]http://j122251751.myweb.hinet.net/foobar/elplaylist_field_definition.jpg[/img]

使用方式很簡單..
新增的內容是Field name對應變數名稱、Definition對應變數內容..
然會就會產生自定義的全域欄位變數了..
[img]http://j122251751.myweb.hinet.net/foobar/elplaylist_field_definition_stats.jpg[/img]
如果想要直接呼叫使用的話..
以%[COLOR="Red"]Field_name[/COLOR]%這樣的語法去呼叫...
這樣便可以取得您定義的全域欄位變數內容..

[COLOR="Blue"]$imageabs函數的使用[/COLOR]
這可是五星級的方法，想學的打死都要把他記起來...
他用於載入影像檔案之用的，通常是jpeg格式，不然就是png格式了...
最常之用就在於專輯圖片的載入了(如果你收集的音樂專輯包含該專輯影像檔的話)..
我們來看看他所載入的參數..
[COLOR="DarkGreen"][SIZE="2"]$imageabs(x,y,w,h,path,OPTIONS,n,alpha,OPTIONS2)[/SIZE][/COLOR]
為了能讓各位更能清楚，我們將參數換成中文表示..
[COLOR="darkgreen"][SIZE="2"]$imageabs(x座標,y座標,影像寬度,影像高度,預載入的影像檔路徑,額外參數1,旋轉角度,阿爾法值(透明值; RGB-A),額外參數2)[/SIZE][/COLOR]
關於他的[U]座標[/U]和[U]大小[/U]這都簡單，問題就是他的[U]載入路徑[/U]了。如果你設成絕對路徑，這又怪怪的，因為如果專輯在不同的目錄下，絕對路徑也會跟著不同，所以在這樣的情況下會有問題。一些解決方式或技巧可以提供給我們使用，我們先利用一種技巧，如下表示：
[B]C:\%album%\*.jpg[/B]
透過title formatting提供的標準功能變數%album%可以取得專輯名稱，不過這個前提就是你的目錄名稱必須為該專輯檔案的名稱。*的符號代表任一長度的字串囉，這意味著不管何種名稱的jpeg格式檔案都會被載入進去，但是只會載入一次。
事實上，在0.6.5.3b版之後提供一種更好的方式，我們可以利用[COLOR="Indigo"]%el_group_first_path%[/COLOR]功能參數，這個功能參數用以載入影像檔案路徑用的，是很棒的功能參數，因此我們先標記[B]個別顏色[/B]起來。
n參數這個很好用，用於將原始影像檔作角度旋轉，例如我可以180度旋轉、270旋轉。n參數的表示法如下：
[SIZE="2"][COLOR="DarkRed"]2:180
3:270
4:Flipped horizontally
6:flip up and down [/COLOR][/SIZE]
這個其實我們是很少用，所以可以將它[I][B]缺空不填[/B][/I]。
[U]額外參數1[/U]表示著載入影像的形式..
這是很重要的一個參數..
他表示的形式有很多..
應當來說不用把它全記起來..
我們應該養成良好的習慣，把這些參數[B][I]筆記[/I][/B]起來..
第一種表示集：
[COLOR="DarkRed"][SIZE="2"]nokeepaspect: 不依照比例，而是左右一起放大填滿
nodisplay: 乾脆不載入到主記憶體，也就是不會有影像顯示
noexpansion: 不左右擴展，依照線性比例放大(預設值)...[/SIZE][/COLOR]
第二種表示集:
[COLOR="darkred"][SIZE="2"]artreader: 依照你指定的影像檔案路徑讀取實體影像檔[/SIZE][/COLOR]
以下這四個全用於你的專輯音樂檔有內嵌影像的情況
[COLOR="darkred"][SIZE="2"]artreader_front: 指定讀取你的專輯封面
artreader_back: 指定讀取你的專輯尾面
artreader_disc: 指定讀取你的光碟封面
artreader_icon: 我不大清楚這個..=_=""[/SIZE][/COLOR]
那這兩個要如何併用呢?很簡單..
[B],noexpansion artreader,[/B]
這樣的形式，中間一個空白就可以了..!
表示為讀取影像檔依照你提供的路徑載入，並且以線性方式放大..
[COLOR="Indigo"]noexpansion artreader[/COLOR]是最常用的方式，所以我們把它標記起來...
[U]阿爾法值[/U]就是透明值了。這個非常簡單，表示的值域也只有在0~255之間，愈接近0表示越透明，0的話就代表看不到了，而愈接近255則是越不透明，255的話就表示完全不透明了..
依照個人喜好可以自行填入任一數值...
通常我們應當是[B][I]缺空不填[/I][/B]...
最後的[U]額外參數2[/U]，作為陰影效果的實現，這個是非常好用的。他需要兩種參數表達，如下所示：
[COLOR="DarkRed"][SIZE="2"]glow:expand:color表達光暈效果..
offset:x:y表達偏移值..[/SIZE][/COLOR]
例如:
glow:2:128-128-128表達2單位範圍的光暈效果，並且產生的光暈顏色為灰色..
offset:2:2將光暈效果往x座標和y座標偏移2個單位..
我們將這兩個合併使用為：
[COLOR="Purple"],glow:2:128:128:128 offset:2:2[/COLOR]
由於這是非常實用的效果，所以我們將他標記起來..

我們這邊將展示官方Layout的Album Art實作設計..
這個範例有些地方值得我們去效法..
因此一定要熟悉..
剛開始看到的人..
可能會覺得理解上有些困難(如果你是幹編程的，我相信對您來說一點都不困難..)..
沒關係!就讓[B]愚昧無知[/B]的小弟來帶各位了解..
[COLOR="DarkGreen"][SIZE="2"]$enabledraw(1)
$puts(art.top,$add($select(%ON.ART.IN.GROUP%,%el_row_height%),%ART.MARGIN%))
$puts(art.left,%ART.MARGIN%)
$setworldtransform($add(2,-%ON.ART.IN.GROUP%))
$imageabs($get(art.left),$get(art.top),$get(art.size),$get(art.size),%el_group_first_path%,artreader,,,)[/SIZE][/COLOR]
我們先從第一行開始逐步解析...
[U]$enabledraw(1)[/U]代表是否要啟用$imageabs或著$draw****的方法，他的參數值為：[SIZE="2"][COLOR="DarkRed"]1->true；0->false[/COLOR][/SIZE]。當您設為0的時候，$imageabs方法就會失效了，也就是不會顯示您載入的影像了。所以，一般我們要設成[B]1[/B]
[B]$puts(art.top,$add($select(%ON.ART.IN.GROUP%,%el_row_height%),%ART.MARGIN%))[/B]
在這邊要先講講$select和$add方法了..
這兩個方法都極為簡單..
[U]$select[/U]方法就是選擇裡面的參數值作為返回..
$select(n,A,B,C,...)
就$select(2,9,8,7,6,5,4,3,2,1)的例子來說..
當n=2的時候，代表選擇第二個參數作為返回，也就是說n=2，你會選擇8作為返回值。這個方法很簡單，不困難..
[U]$add[/U]這個方法又更簡單了，他作為一個加法的計算方法..
$add(X,Y)
例如$add(10,9)就是10+9的計算，返回值會是19...
看，夠簡單了吧..!
再來，我們還要提出一個ELPlaylist提供且實用的功能變數..
那就是[COLOR="Purple"]%el_row_height%[/COLOR]。由於這個功能變數實在好用且重要，因此我們將他標記起來..
[U]%el_row_height%[/U]做為一個列高的計算，他等效於%el_height%這個功能變數..
[img]http://j122251751.myweb.hinet.net/foobar/row_height_demo.jpg[/img]
從上圖很清楚的看到，%el_row_height%計算所謂的列高值，他返回的高度其實為20..
你可以發現他是$select裡面的其中一個參數，不過也只有一個參數...
另外$select定義的選擇值為%ON.ART.IN.GROUP%..
這代表他是自訂的全域欄位變數，他的內容被設為0..
整個$select(%ON.ART.IN.GROUP%,%el_row_height%)來看，其實就是$select(0,20)，意味著她根本甚麼都不選..
那他為什麼要這樣做呢??我們稍後解釋...
我們把$add一起併進去來看:
$add($select(%ON.ART.IN.GROUP%,%el_row_height%),%ART.MARGIN%)
$select出來的結果會和%ART.MARGIN%，而%ART.MARGIN%正式我們可以設定的偏移值，他是自訂的全域欄位變數，官方給定值為4..
其實全部來看就是，我們將這些內容被賦予在art.top變數..
意思就是這個art.top變數用於設定專輯圖片離邊界的距離..
[img]http://j122251751.myweb.hinet.net/foobar/art_margin_demo.jpg[/img]
從上圖清楚的看到Group header和Album Art之間有個空隙..
那就是%ART.MARGIN%全域欄位變數所設定的偏移植空隙..
如果您將%ON.ART.IN.GROUP%設為1，就是會變成$select(1,20)，其實也不過就是在下移20 pixels，最後加起來(20+4)，你讓Album Art總共下移24 pixels..
我們已經解釋完[B]art.top[/B]變數的內容，在逐步下一行就是[B]art.left[/B]變數的設定..
這個實在太簡單了，他單純只放入%ART.MARGIN%，不過就是Album Art離左邊界有4 pixels的距離，這個變數由於太簡單，所以不再貼圖提示...
[B]$setworldtransform($add(2,-%ON.ART.IN.GROUP%))[/B]
這個是超級重點...
[U][COLOR="Purple"]$setworldtransform[/COLOR][/U]用於座標轉換..
由於這個方法會有用處，因此我們要將它標記起來..
他表達的參數值只有三種：
[SIZE="2"][COLOR="DarkRed"]0: 轉換到每一列(Row)
1: 轉換到Group header
2: 轉換到整個Track List[/COLOR][/SIZE]
如果說你選成0，那Album Art影像將會併入每一列(Row)，就是說你列高只有20 pixels，他會卡在那裡面...
[img]http://j122251751.myweb.hinet.net/foobar/setworldtransform_0_demo.jpg[/img]
從上圖可以看到，設為0的時候他確確實實的卡在裡面...
如果說設為1的話，他會卡在Group header裡面...
正常我們應當要設為2...
你可以發現$setworldtransform($add(2,-%ON.ART.IN.GROUP%))透過裡面的-%ON.ART.IN.GROUP%併入計算，因為預設為0，所以是2..
但是我個人建議這個應該拆開來算..
不要和相關性過高的變數一起用，有時候會引來麻煩..
例如我可以自訂一個全域欄位變數叫作ART.TRANSFORM用於做Album Art的座標轉換...
剩下最後的主角，$imageabs...
[B]$imageabs($get(art.left),$get(art.top),$get(art.size),$get(art.size),%el_group_first_path%,artreader,,,)[/B]
首先他裏面又多出一個我們沒看過的變數，art.size..
這個變數的計算非常簡單..
他的內容為：
[B]$puts(art.size,$mul(%ART.ROW%,%el_row_height%))[/B]
$mul的運算方法做為一個乘法的計算。
$mul(8,9)的意思就是我將8x9得到的返回值會是72..
在這邊可以看到一個新的全域欄位變數，就是%ART.ROW%..
他用於作為列數(Row Count)的計算...
他和%el_row_height%一起做乘法計算是甚麼意思呢..
我們透過下圖來表達：
[img]http://j122251751.myweb.hinet.net/foobar/row_count_1_demo.jpg[/img]
從上圖可以看到，每一首歌曲都是一個列(Row)，那麼他將列數(%ART.ROW%)設為5，乘上列高(%el_row_height%)，就是我要的影像尺寸了，他會占用5個Rows的長度。
從$imageabs可以看到影像的尺寸，長度跟高度都是一樣的，也就是等量計算。例如100x100或著150x150...
預載入的影像路徑透過實用的%el_group_first_path%功能變數取得
剩下缺空的是[B]額外參數1, 旋轉角度, 阿爾法值(透明值; RGB-A)和額外參數2[/B]
你可以自行隨意放入...
以上就是一個官方的Album Art載入設計..
我們在下個範例會將官方的Album Art設計得更美觀，你可以複製整個拿去用...

[COLOR="Blue"]改良官方的Album Art設計，使他更精緻些[/COLOR]
我們這邊要展示所謂的[B][I]雙層疊加法[/I][/B]，來美化Album Art的效果。
來看看改良後的結果...
[img]http://j122251751.myweb.hinet.net/foobar/double_imageabs_demo.jpg[/img]
我們來看看簡單的示意圖...
[img]http://j122251751.myweb.hinet.net/foobar/imageabs_overlay.jpg[/img]
上圖表示著我們只要將非透明影像檔(ex: JPEG格式檔案)和透明影像檔(ex: PNG格式)進行疊加就可以了...
那疊加的方式是有順序的..
理應來說就是載入非透明影像檔，再來才載入透明影像檔..
如果順序相反，非透明影像檔就會將透明影像檔整個蓋住，這樣就不是我們所要的結果了..
首先我們要設定幾個變數..
關於相框(透明影像檔)的變數..
([COLOR="Red"]相框檔案在[B]附件[/B]有提供...![/COLOR])
[INDENT]相框的大小(art.case.size)
相框的座標變數(x座標: art.case.left; y座標: art.case.top)[/INDENT]
首先先進行相框的大小設定，如下：
[B]$puts(art.case.size,$mul(7,%el_row_height%))..[/B]
我將列高乘上7倍尺寸..
相框的x座標和y座標：
[B]$puts(art.case.top,0)
$put(art.case.left,0)[/B]
這些完成後，再來建立關於影像檔的變數：
[INDENT]影像檔的大小(art.size)
影像檔的座標變數(x座標: art.left; y座標: art.top)[/INDENT]
art.size變數改良為：
[B]$puts(art.size,$add($get(art.case.size),-44))[/B]
-44這個值是我經過計算過後的常數值了..
影像檔的座標變數為：
[B]$puts(art.top,$add($get(art.case.top),22))
$puts(art.left,$add($get(art.case.left),25))[/B]
上述兩個都是經過計算過的尺寸...
最後開始疊加...
先載入非透明影像檔：
[B]$imageabs($get(art.left),$get(art.top),$get(art.size),$get(art.size),%el_group_first_path%,artreader,,,)[/B]
在來載入透明影像檔：
[B]$imageabs($get(art.case.left),$get(art.case.top),$get(art.case.size),$get(art.case.size),%ART.CASE.PATH%,artreader,,,)[/B]
%ART.CASE.PATH%全域欄位變數是我設定的相框檔案路徑(./images/case.png)
經過上述手續，如此這樣就大功告成了...
整個程式碼的內容如下：
[INDENT][COLOR="DarkGreen"][SIZE="2"]$puts(art.case.size,$mul(7,%el_row_height%))
$puts(art.size,$add($get(art.case.size),-44))
$puts(art.case.top,0)
$put(art.case.left,0)
$puts(art.top,$add($get(art.case.top),22))
$puts(art.left,$add($get(art.case.left),25))

$enabledraw(1)
$setworldtransform(2)

$imageabs($get(art.left),$get(art.top),$get(art.size),$get(art.size),%el_group_first_path%,artreader,,,)
$imageabs($get(art.case.left),$get(art.case.top),$get(art.case.size),$get(art.case.size),%ART.CASE.PATH%,artreader,,,)[/SIZE][/COLOR][/INDENT]

[COLOR="Blue"]$drawtextex方法的使用[/COLOR]
五星級的用法，所以不管怎樣都要把他熟悉...
因為他非常重要，所以我們將[COLOR="Purple"]$drawtextex[/COLOR]標記起來...
$drawtextex是用來繪製文字輸出用的，例如列表上的每一首歌曲的文字資訊。...
他的兄弟版本是$drawtext，你可以從結尾ex字眼發現到，他是$drawtext的擴展版本..
來分析一下$drawtextex方法所傳入的參數好了..
$drawtextex(text,x,y,W,H,rgb,OPTIONS)
為了讓各位更能清楚，我將他以中文表示：
$drawtextex(文字資訊,x座標,y座標,寬度,高度,文字顏色,額外參數)
我們先理解他的額外參數，額外參數包含了兩種表示組合：
[INDENT]上與下的對齊
左與右的對齊[/INDENT]
上與下對齊的參數集：
[SIZE="2"][COLOR="DarkRed"]top: 表達靠上對齊
vcenter: 表達垂直靠中間對齊
bottom: 表達靠下對齊[/COLOR][/SIZE]
左與右對齊的參數集：
[COLOR="darkred"][SIZE="2"]left: 靠左對齊
vcenter: 水平置中
right: 靠右對齊
end_ellipsis: 略縮靠左對齊[/SIZE][/COLOR]
關於對齊的部分不是很難懂，算簡單了!!所以不每個在提....
不過[COLOR="Purple"]end_ellipsis[/COLOR]參數就要提一下了，他是非常好用的參數，要將它標記起來..
[U]end_ellipsis[/U]可以實現略縮字效果，也就是它會使用所謂的[B]小點點[/B]高科技技術，而且還是[COLOR="Red"][B]三點全露[/B][/COLOR]喔!!..
如果有玩過CSS設計的人，可能會看過這種字眼，我們先以一個靠左對齊的展示來示意：
[img]http://j122251751.myweb.hinet.net/foobar/drawtextex_align_left_demo.jpg[/img]
可以發現由於靠左對齊的關係，時間(%length%)和標題(%title%)整個擠在一塊..
這樣總覺得不是很好看，也不是我們想要的...
因此透過小點點技術來達到我們想要的略縮效果，如下示意：
[img]http://j122251751.myweb.hinet.net/foobar/drawtextex_align_end_ellipsis_demo.jpg[/img]
應用小點點科技(end_ellipsis)已經達到我們想要的[COLOR="Red"]三點全露[/COLOR]喔...
時間(%length%)與標題(%title%)是分明的，不會擠在一塊...
關於對齊的部分，推薦參數使用vcenter和end_ellipsis的組合..
[B],vcenter end_ellipsis[/B]
[U]rgb參數[/U]指的就是字體顏色了..
分別要輸入三組數字，Red-Green-Blue。例如我輸入128-128-128代表就是灰色了...
最下面有附RGB色表的網頁，可以去參考...
不過網頁的色碼是16進位表示，所以各位要另行轉成10進位算了...
關於$drawtextex的座標與大小，我們如下所示意，不再去做描述：
[img]http://j122251751.myweb.hinet.net/foobar/foobar_drawtextex_x_y_w_h_demo.jpg[/img]

我們在這邊將展示官方Layout的Track Info範例，並作為一個介紹。我們先看程式碼，如下：
[COLOR="DarkGreen"][SIZE="2"]$setcoordinate(1) //x,y,r,b mode
$if($not(%el_isplaying%),
$drawtextex($get(track.text),
$get(text.left),0,$get(text.right),%el_height%,$get(text.color),vcenter end_ellipsis)
$drawtext(%length%,0,0,$sub(%el_width%,4),%el_height%,$get(text.color),vcenter right),)
$setcoordinate(0)[/SIZE][/COLOR]
先看看[COLOR="Purple"][U]$setcoordinate[/U][/COLOR]的方法，他是非常用重要的方法...
用於座標轉換的，不過轉換的對象是大小(size)，不是座標軸..
由於他的重要性，所以將他標記起來..
他的參數表示如下：
[COLOR="DarkRed"][SIZE="2"]0:代表設定為$setcoordinate(0,X,Y,W,H)
1:代表設定為$setcoordinate(1,X,Y,R,B) [/SIZE][/COLOR]
純粹的差異就是大小上的不同，我們用一張圖來示意他的差別：
[img]http://j122251751.myweb.hinet.net/foobar/setcoordinate_demo.jpg[/img]
這個方法用文字描述並不好懂，所以必須要看圖形來理解..
當設成1的時候，可以發現他的區域大小會從座標原點開始算起...
不過這個方法是有無效的情形，他對於某些方法是完全沒效果的..
[LIST=1][*][B]參數為1的時候：$imageab, $imageabs_rc和$drawtriangle等等是無效果的...[/B][*][B]你在繪圖函數中省略指定，會以$setcoordinate方法為主，但是對$imageab, $imageabs_rc和$drawtriangle等等是無效果的..[/B][/LIST]
上述兩點比較不好清楚的就是第二點。它的概念其實很簡單，我舉例在elplaylist利用$fillrect方法畫出一個矩形...
[B]$fillrect(x,y,w,h,rgb,RESERVED)[/B]
RESERVED是缺省值，完全沒有任何用處，不必填也不能填..
假設我是這樣寫：$fillrect(0,30,100,200,128-128-128,)
為了避免他卡在Track Info裡面，我們加上$setworldtransform方法進行座標轉換..
$setworldtransform(1)
$fillrect(10,30,100,200,128-128-128,)
在這兩段語法下，我們發現結果會是這樣：
[img]http://j122251751.myweb.hinet.net/foobar/fillrect_demo.jpg[/img]
那假設我改變寫法，如下：
$setworldtransform(1)
$fillrect(,,,,128-128-128,)
為了維持之前相同的結果，我們可以加上$setcoordinate方法，以按照該方法的默認值：
$setcoordinate(0,10,30,100,200)
$setworldtransform(1)
$fillrect(,,,,128-128-128,)
透過$setcoordinate方法的做法，得到的結果是一樣的，不過當你改成為1的時候，情況便會不同，因此要注意一下，0和1的情況是不同的...
[U]$not[/U]方法的概念是最簡單的，他是一個邏輯運算表示，如果您是IT出身的，根本連想都不想都知道這個就是true轉false或false轉true的操作而已...
可以知道[COLOR="Purple"]$not[/COLOR]就是真變假或假變真的轉換而已，這方法由於基礎上來說非常重要，因此要標記一下..
[COLOR="purple"][U]%el_isplaying%[/U][/COLOR]這個功能變數其實就是判斷，foobar的運作狀態是否是播放(playback)的狀態，是就返回真，不是就返回假..
這個功能變數很簡單也很重要，要標記起來..
我們來瞧瞧最重要的一段..
$drawtextex($get(track.text),
$get(text.left),0,$get(text.right),%el_height%,$get(text.color),vcenter end_ellipsis)
首先知道幾個地方，track.text取得內容為%tracknumber% %title%..
%tracknumber%會返回每首曲子的音軌編號...
text.color返回%TEXT.COLOUR%的自訂全域欄位變數，內容為92-92-92
text.left返回$add(10,$mul(%ART.MARGIN%,2),$get(art.size))，這邊就重要了，因此要稍微解釋一下..
在此，我們先一個示意圖來表示：
[img]http://j122251751.myweb.hinet.net/foobar/text_left_demo.jpg[/img]
可以發現，其實text.left就是[B]離邊界距離+專輯圖片寬度+離專輯圖片距離[/B]的總和..
解釋裡面參數內容的話...
10這個值就是離專輯圖片距離，$mul(%ART.MARGIN%,2)表示離邊界距離，不過重點是他有在乘上2變成兩倍，再來$get(art.size)就是專輯圖片的寬度了..
其實一點都不難懂..
最後透過$add連續把這三個值相加得到一個總距離，那就是text.left，也就是Track Info的x座標的距離值..
y座標的值為0，這是因為在Track Info的位址是剛好不需要移動...
text.right這個也有必要稍微講一下了，他的內容為：
$add(%el_width%,-$get(len.width))
%el_width%這個功能變數很重要，要標記一下，很好用..
對Track Info而言，%el_width%返回的內容便是Track Info的全部最長寬度了，很簡單並不難懂..
len.width前面有負號(-)，就是要做相減的意思(a+(-b))，其中len.width的內容為：
$add(4,$gettextwidth(%length%))
這個用法其實很有技巧，他取得時間文字的長度，例如05:23的[B]文字[/B]長度，然後在加上偏移值為4的數值..
他這個作法有甚麼意義呢?..這個和高科技小點點技術有點關係..
當你沒有把時間文字的長度給扣除，會發生的情況如下：
[img]http://j122251751.myweb.hinet.net/foobar/no_sub_length.jpg[/img]
你可以發現小點點高科技技術完全沒效果了，這是因為他在算長度的時候連帶把%length%的文字長度也算進去了，導致失效，所以我們才要把%length%的文字長度一併給扣掉..
%el_height%表示取得列高，由於先前已經提過了，不再詳述..
額外參數使用vcenter為垂直置中、end_ellipsis表是靠左並進行略縮..
接下來，看看 $drawtext(%length%,0,0,$sub(%el_width%,4),%el_height%,$get(text.color),vcenter right)...
這個便是取得時間長度文字，為什麼x和y座標會是0呢?..
這和額外參數的設定有關
$sub(%el_width%,4)，$sub方法表示減法，為什麼取得Track Info全部最長寬度還要減掉4呢?
這是因為不減掉4的話，會讓%length%文字內容完全貼齊右邊邊界，所以扣掉往前推..
%el_height和text.color不再提..
額外參數表示為vcenter right，垂直置中和強制靠右，前面為什麼x座標為0的關係就是因為額外參數設為right的關係，被強制靠右，另外要再扣掉4才會不完全貼齊右邊邊界..
這兩個$drawtext($drawtextex)有很重要的地方就是，他們前面有設定$setcoordinate(1)..
因為預設為0，這很重要，如果不更改，就會出問題..
這邊很難解釋為什麼，要靠各位去理解(和%el_width%計算有關聯..)..
最後來看$if方法，這是一個典型的條件方法..
$if(X,Y,Z)表示如果X成立就執行Y，否則執行Z，很簡單，不難懂..
我們整體把Track Info整個看一遍..
[LIST=1][*]先設定$setcoordinate轉換參數..[*]如果($if)沒有($not)正在播放(%el_isplaying%)，就印出($drawtext/$drawtextex)關於沒有正在播放的每首歌曲資訊(%tracknumber %title%)和時間文字(%length%)內容..[*]將$setcoordinate還原成預設值(0)，一定要還原，否則會出問題..[/LIST]
以上大概就這樣了，我們將會在下一部分改良官方Track Info畫面，因為官方呈現出來的效果在Vista以前的作業系統真是醜到爆..

[SIZE="2"][COLOR="Red"]**計算題練習**[/COLOR]
不要懷疑。是有練習的，主要是$setcoordinate這個方法，一定要懂得使用..
好了!廢話不多說，我們來看看幾個練習題..
[I]1.[/I]$setdrawtextex(text,100,200,300,400,)，設$setcoordinate(1)，請問繪製出來的實際長寬(w和h)為多少?
[I][B]Ans:[/B][/I]
[COLOR="dimgray"]當$setcoordinate(1),
w和h會被轉為r和b,x=100,y=200,w=300,y=400
w=r-x=300-100=200 and h=b-y=400-200=200
so,w=200,h=200[/COLOR]
[I]2.[/I]$setdrawtextex(text,50,0,%el_width%,%el_hieght%,)，設$setcoordinate(0)，請問繪製出來的實際長寬(w和h)為多少?
[I][B]Ans:[/B][/I]
[COLOR="dimgray"]當$setcoordinate(0),
w和h不會被轉換,w=%el_width%,h=%el_height%
so,w=%el_width%,h=%el_height%[/COLOR]
[I]3.[/I]繼上題，繪製出來的矩形區域，右下角的頂點座標為何?
[I][B]Ans:[/B][/I]
[COLOR="DimGray"]w=%el_width%,h=%el_height%,設右下角頂點座標為v,v的x座標為x'、y座標為y',
x'=x+%el_width%,
y'=y+%el_height%,
so,v(x',y')=v(x+%el_width%,y+%el_height%)[/COLOR]
[I]4.[/I]art.size=150,art.margin.left=4,art.margin.right=art.margin.left,
track.margin.left=art.margin.left+art.size+art.margin.right,
$setdrawtextex(
text,track.margin.left,0,%el_width%-$gettextwidth(%length%),%el_height%,),
$setcoordinate(1)，請問繪製出來的實際長寬(w和h)為多少?
[I][B]Ans:[/B][/I]
[COLOR="dimgray"]當$setcoordinate(1),
w和h會被轉換為r和b,
r=%el_width%-$gettextwidth(%length%),b=%el_height%,
w=r-x=%el_width%-$gettextwidth(%length%)-track.margin.left
h=b-y=%el_height%-0
so,w=%el_width%-$gettextwidth(%length%)-track.margin.left,h=%el_height%-0[/COLOR][/SIZE]

[COLOR="Blue"]改良官方的Track Info，使他更美觀[/COLOR]
繼上次的$drawtextex，我們來介紹如何改良官方的Track Info Layout。...
再改良之前，我們要做基本的分析...
我本來是要用UML展示的，但是有鑑於可能有人會看不懂，所以我利用一種策略方格(Strategic Grid; 管理出身的可能知道這是什麼鬼..)的變化型，來展示基本的分析...
[img]http://j122251751.myweb.hinet.net/foobar/strategic_grid.jpg[/img]
(有些編程人員或著分析師很偏好這種作法，因為他在複雜的決策下，可以表示一種簡化...)
由上面可以看到非常清楚的表示，在策略方格的展示下，我們得到四種情況會發生...
本人不再使用基本流程圖(這和UML無關)展示，因為要應付這四種情況有點費時，各位就免為奇強把這個策略方格理解一下....
在此，我們還是把之前講的快速複習一下。$imageabs和$drawtextex...
為了快速記憶，個人建議要做分類群，哪些引數(參數)可以做成一個分類...
我舉個例:
座標群: x和y
大小群: w和h或著r和b
像這樣，我們就可以開始簡化...
$imageabs(座標群,大小群,路徑,額外參數1,旋轉角度,透明值,額外參數2)
座標群一定比大小群還前面..
再來我們可以做一個基本的猜測，有關繪製文字的，開頭第一個引數(參數)一定是文字內容(text)...
所以這樣表示，$drawtextex(文字內容,座標群,大小群,文字顏色,額外參數)..
$select方法表示選擇某個集合的變數，$select(索引值,集合)
返回列(Row)高使用%el_height%或著%el_row_height%...
返回Track Info的寬度使用%el_width%...
返回目前的播放狀態使用%el_isplaying%...
返回是某首歌曲否被選取使用%el_selected%
返回與播放檔案名稱對應的影像路徑使用%el_group_first_path%...

先貼一下改良後的結果(明天再複習基礎，很重要!否則會很難寫..)...
[img]http://j122251751.myweb.hinet.net/foobar/custom_track_info_demo.jpg[/img]

繼續談一下如何改良官方的Track Info(以後在找時間複習一下..)..
首先，我作了一個先前的分析，我們必須先衡量出Track Info離[B]左邊界[/B]的距離..
在此，我搞了一張分析圖，裡面包含了換算公式，這個公式是很[B]動態[/B]的..
[img]http://j122251751.myweb.hinet.net/foobar/track_margin_left_guide.jpg[/img]
ART.ENABLED變數可以決定是否對Album Art作開關...
再來我們必須還要知道ART.SIZE的實際大小..
[img]http://j122251751.myweb.hinet.net/foobar/art_size_guide.jpg[/img]
這些都知道後，分析Album Art離上邊界的距離...
[img]http://j122251751.myweb.hinet.net/foobar/margin_top_guide.jpg[/img]
好了..我們先對上述三張示意圖實現設計..
首先先設定Album Art的大小..
ART.SIZE=$mul(%el_row_height%,m) ; m為列數量
TRACK.MARGIN.LEFT=$add(%ART.MARGIN.LEFT%,$mul($add(%ART.SIZE%,%ART.MARGIN.RIGHT%),%ART.ENABLED%))
ART.MARGIN.TOP=$add($mul(%el_row_height%,n),%TRACK.MARGIN.TOP%) ; n為列數量
待續了..=_="

RGB色碼表
[iframe]http://sbsd.psjh.cy.edu.tw/~su/RGB.htm[/iframe]