highlight.js

星期四, 10月 18, 2007

Photoshop問答:筆刷的opacity(不透明)與flow(流量)的差別?

我並不是Photoshop的使用者,不過因為剛好同仁有發生這樣的疑問,所以就想找找看有沒有答案。如果您在Photoshop中單獨設定筆刷的opacity(不透明)與flow(流量),也就是譬如說保持不透明為100%,變動流量的值;或是保持流量為100%,然後變動不透明的值,就會發現好像兩者的效果是一樣的,那麼為什麼要有不透明與流量兩種值呢?

為了解答這個問題,所以我查閱了相關的說明,終於瞭解了這兩個值的差別。這兩個值其實是以不透明為主,設定的是筆刷繪製結果的不透明度。不透明值越小,筆刷繪製的結果就越透明。那麼流量是甚麼意思呢?根據Adobe官方網站上Photoshop CS3的說明文件,流量的意義如下:

流量
設定您在某個區域上移動指標時套用顏色的速率。 當您在某個區域上繪畫時,如果按住滑鼠按鍵不放,色彩量就會依據流量速率而逐漸增加,直到達到不透明設定為止。 例如,假設您將不透明度設定為 33%,流量也設定為 33%,那麼您每移到某個區域上一次,上面的顏色就會以 33% 的比例趨近於筆刷顏色。 除非您放開滑鼠並且再次在該區域上運用筆觸,否則總和將不會超過 33% 不透明度。

講明白一點,就是在不放開滑鼠按鈕的前提下,筆刷每次經過同一區域時,該區域往不透明值前進的速度,而這個速度是以剩餘距離的百分比來表示。也就是每多經過同一區域一次,就會以該區域目前的不透明度與不透明值的差距,乘上流量所設定的比例增加不透明度重新繪製(注意,是重新繪製,也就是當成該區域之前沒有用筆刷繪製過,然後以筆刷顏色套用計算出來的不透明度繪製)。所以如果按住滑鼠來回移動筆刷,重複經過的區域就會越來越接近不透明值而顯得越來不透明,最終趨近於不透明值。

舉個例子來說,如果不透明設定為50%,流量設定為20%,那麼不放開滑鼠按鈕用筆刷經過某一個區域第一次時,該區域的不透明度(一開始就是0%)距離50%為50%,所以不透明度會增加50%*20%,也就是10%。如果再經過一次,因為現在不透明度是10%,所以距離50%為40%,所以不透明度就會再增加40%*20%,也就是8%,變成以18%的不透明度重新繪製該區域。依此類推,如果再經過一次,目前的不透明度18%與50%的差距為32%,所以不透明度就會再增加32%*20%,也就是6.4%,變成24.4%。依據這樣的推演,每次經過同一區域,不透明度就會距離50%越來越近,最終趨近於50%。也正因為流量所描述的是接近不透明值的增量,所以稱為流量。示意圖如下:


以下的圖就示範了上述的過程(請觀察多個圓交疊的部分):


多次的變化圖如下,你可以看到不透明度逐漸增加,最終趨近50%的效果:


要注意的是,滑鼠按住不放來回經過同一個區域,和在原地點點按滑鼠的效果是不同的。以下的圖仍然以不透明度50%,流量20%為例。若是在原地點按滑鼠,第一次點按時不透明度一樣為差距50%*20%,就是10%繪製。但第二次點按時,仍然是以10%的不透明度繪製,但是因為該區域的顏色已經因為上一次點按用筆刷繪製了10%不透明度的顏色,所以已經比尚未繪製前更接近筆刷的顏色,第二次繪製後,就會又更接近筆刷的顏色。依此類推,如果多次點按,最終就會趨近筆刷的顏色:


以下是多次點按的變化,你可以看到大概5次點按後就是50%的不透明度,一直點按下去,就會變成筆刷的顏色:


所以如果只是繪製一次,就完全看不出來不透明與流量的意義,甚至因為互換兩個設定值的結果看起來都一樣,使得許多人以為不透明與流量的作用相同了。

延伸閱讀:

星期三, 10月 03, 2007

GET、POST與cache的關係

在大部分的AJAX書籍裡頭,只要解說到XMLHttpRequest的open方法時,一定都會提到GET與POST的差異,不過大抵上講的都是GET會把參數直接加在URL上,使得一方面會在瀏覽器的網址列上洩漏傳遞的資料,另一方面則是會受限於URL長度的限制,而無法傳遞較大量的資料。但是GET與POST還有一個很關鍵的差異,在大部分的書上都沒有提到,就是GET的response會被cache下來,但是POST不會。

由於cache的基準是以URL為對象,如果傳遞的參數不同時,很難發現cache的存在。但如果URL相同時,就可能造成程式出現靈異現象。舉例來說,我的同事剛好在撰寫一個AJAX版本的聊天室範例,由於純屬示範性質,所以採取很簡單的作法(事實上有許多上線運作的聊天室也用同樣的方法),將參與聊天的發言不斷增補到一個文字檔尾端,而用戶端就透過AJAX機制,定時向伺服端取回儲存發言的文字檔,顯示在瀏覽器上的聊天區域。

假設這個文字檔就叫做chat.txt,你可以想像會發生甚麼事。由於我的同事使用GET方式叫用XMLHttpRequest的open方法,並且URL參數都指定為"chat.txt",所以每次取回的都是cache中的chat.txt,造成不論如何發言,瀏覽器上顯示的結果都沒有變化,好像剛剛的發言石沈大海一樣。

有些人為了解決這個問題,採用了一些小伎倆,例如將URL參數改為傳入"chat.txt?"再加上日期時間,強迫URL每次都不一樣,而使得瀏覽器不會傳回cache中的檔案。這樣的作法固然有效,不過最簡單的方法,就是將GET改成POST,就一切正常了。

GET與POST的這點差異,主要是因為GET原始設計的語意,就是單純的查詢,只要是相同的查詢條件(傳遞的參數內容),不論查詢幾次都應該傳回相同的結果。由於這樣的原因,瀏覽器端的實作就會把GET的response給cache下來。反觀POST,原本的語意就是將資料遞送回伺服端處理,所以瀏覽器就不應該自作聰明,不將資料傳回給伺服端而逕行取用cache。

GET與POST的這點差異雖然很不容易發現,但在除錯環境困難的AJAX程式開發中,卻很可能讓程式員耗費時間精力,找不出問題在哪裡。

延伸閱讀