設定色彩、筆刷與遮罩
變更物件的視覺外觀是 Microsoft Expression Blend 的基本工作。您可使用 [屬性] 面板中 [外觀] 和 [筆刷] 下方的屬性,變更所選物件的筆觸色彩、填滿色彩、不透明度及可見度。[外觀] 及 [筆刷] 類別的屬性會根據您在 Expression Blend 專案中選取的物件類型動態調整為物件的內容,以反映適當的視覺屬性。
一般外觀屬性
若要變更物件的外觀,大多須將筆刷套用至特定屬性。下表描述這些屬性。
屬性 | 描述 |
---|---|
Fill |
設定套用至圖形或路徑內部的筆刷。 |
Stroke |
設定套用至圖形或路徑外框 (框線) 的筆刷。 |
Background |
設定套用至物件背景的筆刷。此屬性通常會套用至顯示文字之控制項 (例如 Button 或 TextBlock 控制項) 的背景。 |
Foreground |
設定套用至物件前景的筆刷。此屬性通常會套用至 Button 或 TextBlock 等控制項中所顯示的文字。 |
BorderBrush |
設定套用至特定控制項框線的筆刷。 |
Opacity |
設定整個物件的不透明度。 |
Visibility |
決定物件在執行階段是顯示還是隱藏狀態。子物件也可能受父物件的可見度影響。 |
OpacityMask |
設定要忽略物件色彩並將不透明度轉移至被遮罩物件的筆刷。只要不透明度遮罩是不透明的,被遮罩物件就會是不透明的;只要不透明度遮罩是透明的,遮罩物件就會是透明的。 |
筆刷
筆刷可用來設定物件在畫板上的視覺外觀。例如,您可使用實心藍色筆刷填滿矩形 (如下列第一個影像所示)。筆刷從簡單的單色或漸層筆刷到較複雜的拼貼筆刷,可分為幾種形式。下表說明 Expression Blend 提供的筆刷。此外,您也可以使用 [沒有筆刷] ,從選取的屬性中移除所有色彩。例如,若要建立矩形外框,您可以將矩形的 Fill 設為 [沒有筆刷],並將 Stroke 設為 [單色筆刷]。
筆刷 | 外觀 | 描述 | ||
---|---|---|---|---|
單色筆刷 |
由單色組成。 |
|||
線性漸層筆刷 |
由線性色彩漸層組成。 |
|||
放射漸層筆刷 |
由放射色彩漸層組成。 |
|||
影像筆刷 |
由影像建立。此處由左至右為:原始的影像筆刷、並排顯示後的影像筆刷,以及翻轉後的影像筆刷。 |
|||
繪圖筆刷 |
由向量繪圖建立。此處由左至右為:原始的繪圖筆刷、並排顯示後的繪圖筆刷,以及翻轉後的繪圖筆刷。 |
|||
視覺筆刷 |
由控制項 (例如按鈕) 建立。此處由左至右為:原始的按鈕,以及 [拼貼模式] 設為 [拼貼] 的筆刷。請注意,視覺筆刷可能會因用來建立視覺筆刷之控制項的複雜度,而降低執行中應用程式的效能。 |
筆刷資源
在物件上建立筆刷之後,您可將該筆刷轉換為資源,以套用到其他物件。
筆刷資源不受限於單一筆刷或色彩屬性。您可以使用畫板上的數個物件建立一個筆刷資源。您甚至可以建立名為 VisualBrush 的筆刷;這種筆刷會在執行階段中,隨著其建立來源物件的變更而更新本身的外觀。
您可為筆刷建立資源字典,以便在整個專案中 (甚至在其他專案中) 重複使用這些筆刷。
如需詳細資訊,請參閱建立筆刷資源或色彩資源與將物件轉換成可重複使用的 DrawingBrush 資源。
如需資源的詳細資訊,請參閱建立可重複使用的資源。
色彩和色彩空間
Expression Blend 在 [屬性] 面板中的 [筆刷] 下提供色彩編輯器。若您在 [資源] 面板中修改筆刷資源,也會顯示色彩編輯器。此色彩編輯器具有下列四個色彩空間,以及十六進位模式 (#AARRGGBB):
RGB 紅色 (0-255)、綠色 (0-255)、藍色 (0-255)。
HLS 色調 (360 度色輪)、亮度 (0 到 100%)、飽和度 (0 到 100%)。
HSB 色調 (360 度色輪)、飽和度 (0 到 100%)、亮度 (0 到 100%)。
CMYK 青色 (0 到 100 %)、洋紅色 (0 到 100 %)、黃色 (0 到 100 %)、黑色 (0 到 100 %)。
若要變換色彩空間,請按一下目前色彩空間內其中一個底線字母來顯示其他色彩空間的快顯功能表。
滴管和油漆桶工具
Expression Blend 提供兩項特別設計用以在物件間複製及套用屬性的工具。在 [滴管] 及 [油漆桶] 動作期間會複製或套用下列屬性:
筆刷 前景、背景、框線筆刷、填滿、筆觸及不透明度遮罩
外觀 不透明度、筆觸粗細、筆觸斜接角突出限度、筆觸開始線段端點、筆觸結束線段端點、筆觸合併線段及筆觸虛線端點
文字 字型家族、字型大小、字型寬度、字型樣式、文字裝飾、行高、文字縮排及文字對齊
滴管工具 |
將其他物件的外觀複製到目前選取的一或多個物件。 |
|
油漆桶工具 |
將目前選取的一或多個物件的外觀複製到其他物件。 |
如需有關 [滴管] 和 [油漆桶] 工具的詳細資訊,請參閱將屬性複製或套用至物件。
修改 [單色筆刷] 或 [漸層筆刷] 上的漸層停駐點時,[色彩滴管] 也會出現在色彩編輯器的右下方。選取滴管後,您可以從桌面上的任意處擷取色彩範例並套用至選取的筆刷。您可以隨時按下 ESC 鍵取消滴管。
漸層
漸層可讓您在物件上套用漸變的混合色彩,以建立平滑的色彩漸層以及增加物件的深度。您或許要以該物件作為背景,從物件的左邊到右邊,逐漸由單色淡化成白色。這便會在原本單調的物件上產生兩個感覺不同的區域。
在 [屬性] 面板中的 [筆刷] 下,按一下 [漸層筆刷] 以建立漸層效果。按一下色彩編輯器底下的 [線性漸層筆刷] 和 [放射漸層] ,即可在兩種漸層筆刷類型之間切換。您可以使用這兩種漸層筆刷建立漸層填滿、漸層筆觸、Foreground 屬性為漸層的文字,或漸層背景 (但物件需具有 Background 屬性)。
選取 [漸層筆刷] 後,色彩編輯器中的 [色彩滴管] 會變成 [漸層滴管] 。若您選取 [漸層滴管],並將游標停留在 Expression Blend 內或桌面上的色彩上方,該色彩將會顯示成所選色彩停駐點的預覽。當您使用 [漸層滴管] 按一下色彩時,該色彩便會套用到選取的漸層停駐點。此外,您也可以將 [漸層滴管] 拖曳到 Expression Blend 內或桌面上現有的漸層上,以便將漸層套用到現有的物件。
在現有的漸層效果上拖曳漸層滴管時,將會在 Expression Blend 中重製該漸層效果
當您將漸層效果套用到物件時,漸層停駐點圖示 便會出現。您可以變更每個漸層停駐點的色彩,也可以直接按一下漸層滑桿,在漸層滑桿上新增任意數目的停駐點。相反地,只要從漸層滑桿的底端拖出不再需要的停駐點,就可以輕易地移除這些停駐點 (從滑桿的兩側或頂端拖出並不會移除停駐點)。您也可以沿著漸層線條拖曳停駐點,或是修改 [選取漸層停駐點位移] 欄位中的值,以便修改所選漸層停駐點的位移值。
若要反轉漸層效果,請按一下 [反轉漸層停駐點] 。您可以使用 [選取上一個漸層停駐點] 和 [選取下一個漸層停駐點] 箭號 來移到上一個和下一漸層停駐點。
若要將漸層效果套用到多個物件,請選取您要套用漸層效果的所有物件,然後再套用漸層效果。
按一下 [顯示進階屬性] 即可檢視可直接在 [屬性] 面板中修改的其他屬性。
針對線性漸層筆刷屬性,您可以在 [屬性] 面板中修改下列屬性:
StartPoint 指定線性漸層起點的座標。
EndPoint 指定線性漸層終點的座標。
MappingMode 指定漸層筆刷是採用絕對位置還是與週框方塊相對的位置。
SpreadMethod 指定如何繪製起點或終點在週框方塊內的漸層效果。Pad 可將最外層的漸層停駐點延伸至物件的邊緣。Reflect 可建立漸層填滿的鏡像。Repeat 可重複漸層填滿。
Opacity 指定漸層筆刷的不透明度。
針對放射漸層筆刷屬性,您可以在 [屬性] 面板中修改下列屬性:
GradientOrigin 指定漸層起點的座標。
Center 指定最外層的放射漸層。
RadiusX 指定放射漸層最外圈的水平半徑。
RadiusY 指定放射漸層最外圈的垂直半徑。
MappingMode 指定漸層筆刷是採用絕對位置還是與週框方塊相對的位置。
SpreadMethod 指定如何繪製起點或終點在週框方塊內的漸層效果。Pad 可將最外層的漸層停駐點延伸至物件的邊緣。Reflect 可建立漸層填滿的鏡像。Repeat 可重複漸層填滿。
Opacity 指定漸層筆刷的不透明度。
對於這兩種類型的漸層筆刷,您還可以在 [屬性] 面板中修改 [RelativeTransform] 屬性,修改的方法是在 [RelativeTransform] 方塊中按一下下列索引標籤,然後再修改相關的值:
平移
旋轉
縮放
扭曲
翻轉
您也可以使用 [漸層] 工具 或 [筆刷轉換] 工具 來修改畫板上的線性和放射兩種漸層筆刷。如需詳細資訊,請參閱後面的<漸層工具>和<筆刷轉換工具>等章節。
漸層工具
若要直接在畫板上修改套用至物件之漸層筆刷的填滿、筆觸或不透明度遮罩,請在 [屬性] 面板中選取筆刷屬性,然後選取 [工具] 面板中的 [漸層] 工具 。
秘訣: |
---|
在畫板上選取物件後,按 G 即可選取 [漸層] 工具。 |
畫板上將會出現箭號,供您用來修改漸層效果。箭號的起點和終點對應至色軸任一端的漸層停駐點。漸層停駐點以藍色框線的圓圈以及與漸層相同的內部填滿效果來代表。
線性漸層箭號
放射漸層箭號
按一下可選取漸層停駐點,而選取的項目將以粗體的藍色框線來表示。按兩下漸層停駐點則可顯示色彩選擇器,供您用來修改所選漸層停駐點的色彩。
您可以按一下箭號上的任何一點,以新增漸層停駐點。您可以按一下代表漸層停駐點的圓圈並將它從拖出箭號,以便移除漸層停駐點。
您也可以透過下列方式來修改漸層屬性:
按住 SHIFT 鍵並拖曳起點或終點,將其移動限定為沿著起點和終點間的直線。
按住 SHIFT 鍵並移動整個箭號,將其移動限定為移往 X 或 Y 平面。
按住 SHIFT 鍵並旋轉起點或終點,可每隔 15 度貼齊一次。
按住 ALT 鍵並拖曳起點或終點,可同時移動兩個端點而維持中心點的位置。
筆刷轉換工具
[筆刷轉換] 工具 可修改筆刷資源的 RelativeTransform 屬性,包括線性及放射漸層的 RelativeTransform。[筆刷轉換] 工具會修改 [筆刷] 面板中選取的筆刷,並套用到畫板上所選取的物件。
若要直接在畫板上修改套用至物件的筆刷轉換,請選取 [屬性] 面板中的筆刷屬性,然後選取 [工具] 面板中的 [筆刷轉換] 工具 。
秘訣: |
---|
在畫板上選取物件後,按 B 即可選取 [筆刷轉換] 工具。 |
物件周圍會出現提示 (藍色框線)。使用 [筆刷轉換] 工具選取物件之後,您現在就可以利用下列方式修改選取的物件:
若要移動筆刷,請將它拖曳到物件內的任一處。這個動作對應於 [屬性] 面板中 [RelativeTransform] 方塊上的 [轉換] 索引標籤。
若要旋轉筆刷,請將指標移至物件周框任何一角的外面,並在指標變成旋轉控點 時進行拖曳。這個動作對應於 [屬性] 面板中 [RelativeTransform] 方塊上的 [旋轉] 索引標籤。
若要調整拼貼筆刷或放射漸層筆刷的縮放比例,請將指標移至物件邊線或角落的任何控點上,然後進行拖曳。這個動作對應於 [屬性] 面板中 [RelativeTransform] 方塊上的 [縮放] 索引標籤。
若要扭曲筆刷,請將指標移至邊線控點的外面,並在指標變成扭曲控點 時進行拖曳。這個動作對應於 [屬性] 面板中 [RelativeTransform] 方塊上的 [扭曲] 索引標籤。
您也可以翻轉轉換的方向。請在 [屬性] 面板的 [筆刷] 類別中,按一下 [顯示進階選項] 。在 [RelativeTransform] 方塊中,按一下 [翻轉] 索引標籤,然後按一下 [翻轉 X 軸] 或 [翻轉 Y 軸]。
裁剪
當您轉換筆刷時,有時可能會裁剪到物件的多個部分 (也就是說,這些部分會消失於週框方塊外)。您可以用下列方式修正裁剪問題:
在 [屬性] 面板中的 [外觀] 下,清除 ClipToBounds 屬性的核取方塊。
使用 LayoutTransform 類別中的屬性,而不要使用 [屬性] 面板中 [轉換] 下方的 RenderTransform 。這種方式尤其適用於轉換視覺筆刷時。
筆觸
筆觸是物件的框線。您可以變更物件筆觸套用的筆刷 (單色、漸層或拼貼)、不透明度、粗細和斜接角突出限度,以及邊角交接和結束端點樣式。物件的筆觸一律套用在填滿之上,即使該物件未套用填滿也一樣。若要變更物件的筆觸,您必須在 [屬性] 面板之 [筆刷] 下的清單中選取 [Stroke]。
筆觸粗細 物件的筆觸粗細以像素 (換算為與裝置無關的單位約為 1/96 英吋) 為測量單位,其值介於 0 到圖形寬度或高度的一半。一般而言,一旦筆觸粗細達圖形寬度及高度的一半,筆觸就會蓋滿整個填滿區域。您可以使用 [屬性] 面板之 [外觀] 下的 StrokeThickness 屬性來設定筆觸寬度值。
邊角交接 對於有銳角的物件 (例如矩形),有三種邊角交接樣式可供套用以變更每個角點的筆觸外觀:[斜邊角交接] 、[圓角聯結] 及 [斜切聯結] 。您可以使用 [屬性] 面板之 [外觀] 下的 StrokeLineJoin 屬性來設定邊角交接樣式。
斜接角突出限度 斜接角突出限度可控制斜邊角交接角點的長度上限,超過上限就會自動轉成斜切聯結。您可以使用 [屬性] 面板之 [外觀] 下的 StrokeMiterLimit 屬性來設定斜接角突出限度。下圖顯示 StrokeThickness 為 40,且 StrokeMiterLimit 為 1 、2.2 和 4 的三個角。角度大小和筆觸粗細將決定斜接角突出限度的視覺效果。
結束端點 對於末端未連結的路徑 (例如直線),有四種結束端點樣式可供套用以變更每個末端的筆觸外觀:[平端點]、[圓端點]、[方端點] 與 [三角頭]。您可以使用 [屬性] 面板之 [外觀] 下的 StrokeEndLineCap 或 StrokeStartLineCap 屬性來設定結束端點樣式。
StrokeDashArray StrokeDashArray 是包含虛線和空隙圖樣的筆觸。 StrokeDashCap 和 StrokeDashOffset 則是專門適用於 StrokeDashArray 的屬性。
下圖顯示的單一矩形具有值為 5 4 的 StrokeDashArray (第一個值指定虛線的長度,而第二個值則指定空隙的長度)、值為 Round 的 StrokeDashCap ,以及值為 2 的 StrokeDashOffset (虛線圖樣中虛線開頭的距離)。
不透明度和可見度
降低物件的不透明度就等於增加其透明度,使您可看到背後的其他物件。不透明度是由 Alpha 色板所控制,此色板儲存了物件、漸層或不透明度遮罩的所有透明度資訊。下表描述三種可供選取以變更物件不透明度的方法。
方法 | 搜尋結果 |
---|---|
Opacity 變更整個物件的透明度,包括物件的所有視覺屬性。右圖顯示設為 60% 的不透明度值。 |
|
Transparency 將物件某個筆刷屬性 (例如填滿或筆觸) 的 Alpha 值 (A) 設為稍微透明,而不必變更單一物件的所有屬性。右圖顯示只有橢圓形的填滿較透明,因為該填滿的 Alpha 值設為 50%。橢圓形的筆觸維持在 100%。 |
|
Visibility 可讓您在不同時候隱藏或顯示物件。在動畫中,當您不要從畫板中完全移除物件時會特別有用。在右圖中,左邊具藍色填滿與粗黑色筆觸的物件 (也是此表中前面兩個圖中的物件) 現已設為 Hidden 。 |
另請參閱
概念
Copyright © 2011 by Microsoft Corporation. All rights reserved.