Foobar 0.9.6.8音樂撥放器



贊助商連結


per1
2009-06-12, 12:42 AM
http://www.foobar2000.org/?page=Download
知道了人就會去下了..
不過這不是重點..

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

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

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

這東西要記的東西很多,所以要花點時間。但是只要肯學,一定不出半年,你照樣也可以自行編寫。
===========================================================
Schemes

對ELPlaylist的官方Layout分析 (學習時間: 您只有10分鐘)
$put/$puts和$get存取方法的使用 (學習時間: 您只有30分鐘)
類似全域欄位變數的使用 (學習時間: 您只有10分鐘)
如何使用條件方法
$imageabs函數的使用 (學習時間: 您只有120分鐘)
改良官方的Album Art設計,使他更精緻些 (學習時間: 您只有60分鐘)
$drawtextex方法的使用(學習時間: 您只有180分鐘)
改良官方的Track Info,使他更美觀

代碼的調整(refactoring)藝術(擺在最後講..!)

===========================================================
對ELPlaylist的官方Layout分析
我們應當先分析官方預設Layout的呈現外觀..
http://j122251751.myweb.hinet.net/foobar/elpaylist_layout.jpg
從圈選的幾個區域來對應:

藍色:Group header
黃色:Track Info
紅色:Album Art+Reflection
在這邊我們重點先擺在Track Info區域..
如何顯示清楚且美觀的專輯列表是首要的..
在此之前基礎不可少..
因此我們先來看變數的存取方式..

$put和$get/$gets存取方法的使用
$put/$puts和$get很像我們程式語言中的存取子結構..
$put/$puts其實就是宣告變數並且定義內容..
如果照這樣講..
我們以一般程式語言的表示法為:

text var_name=text_content;
前面的text可以說是他的形態(type),等號後面則是要賦予var_name的內容值..
和$put/$puts相對應為:

$puts(var_name,text_content)
不過如果做成以setter的表示方式對應會是比較容易了解...

text var_name;
void puts(text text_content){

var_name=text_content;
}
同樣的,如果我們要取用我們設定好的變數,可以使用$get方法..
$get(var_name)
這時透過$get方法便可以取用var_name變數的內容..
對應成一般程式語言的getter表示方式對應為:

text get(){

return var_name;
}
為了讓各位更清楚,我們透過一個範例來展示:
$puts(track.title,%title%)
$if($not(%el_isplaying%),$drawtextex($get(track.title),,,,,vcenter end_ellipsis),)
上面如果有些方法看不懂可以別理他..
先看重點的$put/$puts和$get存取方法..
%title%是foobar的title formatting的標準功能變數..
是用於取得每首歌曲的標題...
最後我們透過$get來取得track.title的內容(%title%)..
畫面會是如下:
http://j122251751.myweb.hinet.net/foobar/basic_put_get.jpg

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

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

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

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

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

改良官方的Album Art設計,使他更精緻些
我們這邊要展示所謂的雙層疊加法,來美化Album Art的效果。
來看看改良後的結果...
http://j122251751.myweb.hinet.net/foobar/double_imageabs_demo.jpg
我們來看看簡單的示意圖...
http://j122251751.myweb.hinet.net/foobar/imageabs_overlay.jpg
上圖表示著我們只要將非透明影像檔(ex: JPEG格式檔案)和透明影像檔(ex: PNG格式)進行疊加就可以了...
那疊加的方式是有順序的..
理應來說就是載入非透明影像檔,再來才載入透明影像檔..
如果順序相反,非透明影像檔就會將透明影像檔整個蓋住,這樣就不是我們所要的結果了..
首先我們要設定幾個變數..
關於相框(透明影像檔)的變數..
(相框檔案在附件有提供...!)

相框的大小(art.case.size)
相框的座標變數(x座標: art.case.left; y座標: art.case.top)
首先先進行相框的大小設定,如下:
$puts(art.case.size,$mul(7,%el_row_height%))..
我將列高乘上7倍尺寸..
相框的x座標和y座標:
$puts(art.case.top,0)
$put(art.case.left,0)
這些完成後,再來建立關於影像檔的變數:

影像檔的大小(art.size)
影像檔的座標變數(x座標: art.left; y座標: art.top)
art.size變數改良為:
$puts(art.size,$add($get(art.case.size),-44))
-44這個值是我經過計算過後的常數值了..
影像檔的座標變數為:
$puts(art.top,$add($get(art.case.top),22))
$puts(art.left,$add($get(art.case.left),25))
上述兩個都是經過計算過的尺寸...
最後開始疊加...
先載入非透明影像檔:
$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,,,)
%ART.CASE.PATH%全域欄位變數是我設定的相框檔案路徑(./images/case.png)
經過上述手續,如此這樣就大功告成了...
整個程式碼的內容如下:

$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,,,)

$drawtextex方法的使用
五星級的用法,所以不管怎樣都要把他熟悉...
因為他非常重要,所以我們將$drawtextex標記起來...
$drawtextex是用來繪製文字輸出用的,例如列表上的每一首歌曲的文字資訊。...
他的兄弟版本是$drawtext,你可以從結尾ex字眼發現到,他是$drawtext的擴展版本..
來分析一下$drawtextex方法所傳入的參數好了..
$drawtextex(text,x,y,W,H,rgb,OPTIONS)
為了讓各位更能清楚,我將他以中文表示:
$drawtextex(文字資訊,x座標,y座標,寬度,高度,文字顏色,額外參數)
我們先理解他的額外參數,額外參數包含了兩種表示組合:

上與下的對齊
左與右的對齊
上與下對齊的參數集:
top: 表達靠上對齊
vcenter: 表達垂直靠中間對齊
bottom: 表達靠下對齊
左與右對齊的參數集:
left: 靠左對齊
vcenter: 水平置中
right: 靠右對齊
end_ellipsis: 略縮靠左對齊
關於對齊的部分不是很難懂,算簡單了!!所以不每個在提....
不過end_ellipsis參數就要提一下了,他是非常好用的參數,要將它標記起來..
end_ellipsis可以實現略縮字效果,也就是它會使用所謂的小點點高科技技術,而且還是三點全露喔!!..
如果有玩過CSS設計的人,可能會看過這種字眼,我們先以一個靠左對齊的展示來示意:
http://j122251751.myweb.hinet.net/foobar/drawtextex_align_left_demo.jpg
可以發現由於靠左對齊的關係,時間(%length%)和標題(%title%)整個擠在一塊..
這樣總覺得不是很好看,也不是我們想要的...
因此透過小點點技術來達到我們想要的略縮效果,如下示意:
http://j122251751.myweb.hinet.net/foobar/drawtextex_align_end_ellipsis_demo.jpg
應用小點點科技(end_ellipsis)已經達到我們想要的三點全露喔...
時間(%length%)與標題(%title%)是分明的,不會擠在一塊...
關於對齊的部分,推薦參數使用vcenter和end_ellipsis的組合..
,vcenter end_ellipsis
rgb參數指的就是字體顏色了..
分別要輸入三組數字,Red-Green-Blue。例如我輸入128-128-128代表就是灰色了...
最下面有附RGB色表的網頁,可以去參考...
不過網頁的色碼是16進位表示,所以各位要另行轉成10進位算了...
關於$drawtextex的座標與大小,我們如下所示意,不再去做描述:
http://j122251751.myweb.hinet.net/foobar/foobar_drawtextex_x_y_w_h_demo.jpg

我們在這邊將展示官方Layout的Track Info範例,並作為一個介紹。我們先看程式碼,如下:
$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)
先看看$setcoordinate的方法,他是非常用重要的方法...
用於座標轉換的,不過轉換的對象是大小(size),不是座標軸..
由於他的重要性,所以將他標記起來..
他的參數表示如下:
0:代表設定為$setcoordinate(0,X,Y,W,H)
1:代表設定為$setcoordinate(1,X,Y,R,B)
純粹的差異就是大小上的不同,我們用一張圖來示意他的差別:
http://j122251751.myweb.hinet.net/foobar/setcoordinate_demo.jpg
這個方法用文字描述並不好懂,所以必須要看圖形來理解..
當設成1的時候,可以發現他的區域大小會從座標原點開始算起...
不過這個方法是有無效的情形,他對於某些方法是完全沒效果的..

參數為1的時候:$imageab, $imageabs_rc和$drawtriangle等等是無效果的...
你在繪圖函數中省略指定,會以$setcoordinate方法為主,但是對$imageab, $imageabs_rc和$drawtriangle等等是無效果的..

上述兩點比較不好清楚的就是第二點。它的概念其實很簡單,我舉例在elplaylist利用$fillrect方法畫出一個矩形...
$fillrect(x,y,w,h,rgb,RESERVED)
RESERVED是缺省值,完全沒有任何用處,不必填也不能填..
假設我是這樣寫:$fillrect(0,30,100,200,128-128-128,)
為了避免他卡在Track Info裡面,我們加上$setworldtransform方法進行座標轉換..
$setworldtransform(1)
$fillrect(10,30,100,200,128-128-128,)
在這兩段語法下,我們發現結果會是這樣:
http://j122251751.myweb.hinet.net/foobar/fillrect_demo.jpg
那假設我改變寫法,如下:
$setworldtransform(1)
$fillrect(,,,,128-128-128,)
為了維持之前相同的結果,我們可以加上$setcoordinate方法,以按照該方法的默認值:
$setcoordinate(0,10,30,100,200)
$setworldtransform(1)
$fillrect(,,,,128-128-128,)
透過$setcoordinate方法的做法,得到的結果是一樣的,不過當你改成為1的時候,情況便會不同,因此要注意一下,0和1的情況是不同的...
$not方法的概念是最簡單的,他是一個邏輯運算表示,如果您是IT出身的,根本連想都不想都知道這個就是true轉false或false轉true的操作而已...
可以知道$not就是真變假或假變真的轉換而已,這方法由於基礎上來說非常重要,因此要標記一下..
%el_isplaying%這個功能變數其實就是判斷,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)),這邊就重要了,因此要稍微解釋一下..
在此,我們先一個示意圖來表示:
http://j122251751.myweb.hinet.net/foobar/text_left_demo.jpg
可以發現,其實text.left就是離邊界距離+專輯圖片寬度+離專輯圖片距離的總和..
解釋裡面參數內容的話...
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的文字長度,然後在加上偏移值為4的數值..
他這個作法有甚麼意義呢?..這個和高科技小點點技術有點關係..
當你沒有把時間文字的長度給扣除,會發生的情況如下:
http://j122251751.myweb.hinet.net/foobar/no_sub_length.jpg
你可以發現小點點高科技技術完全沒效果了,這是因為他在算長度的時候連帶把%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整個看一遍..

先設定$setcoordinate轉換參數..
如果($if)沒有($not)正在播放(%el_isplaying%),就印出($drawtext/$drawtextex)關於沒有正在播放的每首歌曲資訊(%tracknumber %title%)和時間文字(%length%)內容..
將$setcoordinate還原成預設值(0),一定要還原,否則會出問題..

以上大概就這樣了,我們將會在下一部分改良官方Track Info畫面,因為官方呈現出來的效果在Vista以前的作業系統真是醜到爆..

**計算題練習**
不要懷疑。是有練習的,主要是$setcoordinate這個方法,一定要懂得使用..
好了!廢話不多說,我們來看看幾個練習題..
1.$setdrawtextex(text,100,200,300,400,),設$setcoordinate(1),請問繪製出來的實際長寬(w和h)為多少?
Ans:
當$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
2.$setdrawtextex(text,50,0,%el_width%,%el_hieght%,),設$setcoordinate(0),請問繪製出來的實際長寬(w和h)為多少?
Ans:
當$setcoordinate(0),
w和h不會被轉換,w=%el_width%,h=%el_height%
so,w=%el_width%,h=%el_height%
3.繼上題,繪製出來的矩形區域,右下角的頂點座標為何?
Ans:
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%)
4.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)為多少?
Ans:
當$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

改良官方的Track Info,使他更美觀
繼上次的$drawtextex,我們來介紹如何改良官方的Track Info Layout。...
再改良之前,我們要做基本的分析...
我本來是要用UML展示的,但是有鑑於可能有人會看不懂,所以我利用一種策略方格(Strategic Grid; 管理出身的可能知道這是什麼鬼..)的變化型,來展示基本的分析...
http://j122251751.myweb.hinet.net/foobar/strategic_grid.jpg
(有些編程人員或著分析師很偏好這種作法,因為他在複雜的決策下,可以表示一種簡化...)
由上面可以看到非常清楚的表示,在策略方格的展示下,我們得到四種情況會發生...
本人不再使用基本流程圖(這和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%...



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

繼續談一下如何改良官方的Track Info(以後在找時間複習一下..)..
首先,我作了一個先前的分析,我們必須先衡量出Track Info離左邊界的距離..
在此,我搞了一張分析圖,裡面包含了換算公式,這個公式是很動態的..
http://j122251751.myweb.hinet.net/foobar/track_margin_left_guide.jpg
ART.ENABLED變數可以決定是否對Album Art作開關...
再來我們必須還要知道ART.SIZE的實際大小..
http://j122251751.myweb.hinet.net/foobar/art_size_guide.jpg
這些都知道後,分析Album Art離上邊界的距離...
http://j122251751.myweb.hinet.net/foobar/margin_top_guide.jpg
好了..我們先對上述三張示意圖實現設計..
首先先設定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色碼表
http://sbsd.psjh.cy.edu.tw/~su/RGB.htm

贊助商連結


per1
2009-06-17, 11:28 AM
ELPlaylist的教學內容不定期更新...
不敢說做到最好..
但是起碼要使各位最後能夠做到這種效果...:|||:
http://j122251751.myweb.hinet.net/foobar/el_ui_demo1.jpg

per1
2009-06-17, 11:30 AM
不小心重複貼到..
刪!!

tvirus
2009-06-17, 12:30 PM
哇咧...這些高級技巧...還不是普通麻煩啊 :Q
還好我平常都是拿來放歌,透過藍芽耳機在聽...所以畫面我是比較不Care的 XD

sliver
2009-06-17, 01:06 PM
還在用0.943,換過新版的舊版本設定好像不能套用,不想再花人生在改面板這種東西
那天看到現成喜歡的再換

aksvg
2009-06-18, 07:45 AM
多謝教學!這幾天還在摸這套軟體的設定,還不大會,這篇應該可以學到更多東西才對

topmayue
2010-02-10, 09:38 AM
多謝教學!在摸這套軟體的設定