內容 索引 搜尋
 

繪圖概觀

Microsoft® Expression Blend™ 提供標準的向量繪圖功能,能讓您繪製圖形、路徑及遮罩,就像在任何向量繪圖程式中一樣。如需更進階的繪圖和圖案,請考慮使用其他向量繪圖程式,例如 Microsoft® Expression® Design。Expression Design 甚至可以將繪圖匯出成 XAML,以便在 Expression Blend 中使用。

什麼是向量繪圖?

向量繪圖是以點、直線、曲線以及面所做的幾何定義,而非以點陣圖中的像素來定義。隨著電腦監視器的解析度愈來愈高,有必要放棄在高 dpi 檢視下會顯示大量像素的點陣圖。點陣圖的大小不易調整,通常會因此產生品質不良的圖形。向量繪圖在高 dpi 檢視下可保持平滑,且在放大時保持尖銳。基於這個原因,可以輕易地隨著內容而自訂向量繪圖,因為不需要建立多個不同大小的影像 (例如在使用者介面 (UI) 中以不同大小顯示的圖示檔)。向量繪圖的其他隱含效益包括下列幾項:

附註 當您在 Windows Presentation Foundation (WPF) 應用程式中設定與大小相關的屬性時 (如使用 Expression Blend 建立的應用程式),「像素」指的是和螢幕解析度設為 96 DPI 的螢幕像素大小相等之「與裝置無關的像素」或「與裝置無關的單位」。無論監視器大小或螢幕解析度為何,每個單位約為 1/96 英吋。

在 Expression Blend 中,向量物件可以是簡單的直線或圖形,也可以是複雜的路徑或控制項。物件有許多方面可以修改,包括使用物件控點來調整大小、移動、旋轉、翻轉或扭曲物件,或利用 [屬性] 面板來輸入大小、位置及旋轉的精確值。除了您在專案中新增之原本就是向量格式的項目 (例如影像和 3D 紋理) 以外,基本上,您在畫板上繪製的每個物件都是向量格式。Expression Blend 中的部分向量物件包括:

繪圖工具

在 [工具箱] 中,您會看到一些常用來建立圖形和路徑元素以及操作物件的向量工具。如需使用這些工具的範例,請參閱繪製圖形繪製直線繪製曲線繪製任何形狀的路徑變更曲線的形狀,以及重新定義節點的控點

工具 用途
矩形 繪製矩形和方形,這些形狀也可以修改為具有圓角。
橢圓形 繪製橢圓形和圓形。
線條 在兩個點之間繪製直線。
畫筆 繪製和修改供您定義每個節點的路徑。[畫筆] 工具可讓您新增、移除及修改路徑的節點。
鉛筆 繪製手繪路徑。
選取 在畫板上選取您要修改的圖形、路徑及物件。如需使用 [選取] 工具的詳細資訊,請參閱選取物件
直接選取 在繪製路徑的節點之後,選取個別節點。[直接選取] 工具也可讓您在畫板上直接選取父項物件 (例如版面配置面板) 內的巢狀子物件。如需使用 [直接選取] 工具的詳細資訊,請參閱選取物件

圖形或路徑?

矩形或橢圓形等圖形都是向量物件。您可以使用 [矩形] 或 [橢圓形] 工具來繪製圖形。

路徑也是向量物件—無疑地,是 Expression Blend 中最具有彈性的向量物件。路徑是一連串相連的直線和曲線。在畫板上繪製路徑之後,您可以經由調整形狀、合併及修改來建立任何向量圖形。您可以繪製多邊形 (由相連直線構成的封閉圖形) 及聚合線條 (由相連直線構成的非封閉路徑)。您可以使用 [畫筆] 、[鉛筆] 及 [線條] 工具來繪製路徑。然後,您可以使用 [選取] 及 [直接選取] 工具來修改路徑。如需修改路徑的詳細資訊,請參閱刪除路徑的一部分在路徑上新增或移除節點變更曲線的形狀重新定義節點的控點以及畫筆及選取快速鍵

將圖形轉換成路徑

圖形無法以路徑元素相同的方式編輯,除非您使用 [轉換為路徑] 命令 ([物件] | [路徑] | [轉換為路徑]) 將圖形元素轉換成路徑元素。如需範例,請參閱將圖形變更為路徑

附註 將圖形轉換為路徑之後,您將無法編輯圖形特有的屬性 (例如矩形的圓角半徑)。同時,如果在轉換之前套用樣式到圖形,則轉換的路徑之屬性將會重新設為路徑的預設值 (無填滿筆刷以及黑色筆觸)。

變更圓角半徑

您可以選取矩形,然後拖曳左上角的圓角半徑控點來編輯矩形的圓角半徑。當滑鼠指標移至矩形左上角外側虛線的任一端時,會出現圓角半徑控點

變更矩形圓角半徑

只要在拖曳圓角半徑控點時按住 SHIFT 鍵,就可以個別編輯 X 和 Y 圓角半徑。

如需範例,請參閱將矩形設為圓角

合併路徑

合併路徑 (或圖形) 的動作可以產生下列結果:

合併路徑的各種方式

1 合併前的兩個圖形   4 交集
2 聯集   5 排除重疊
3 分割   6 差集

可以將兩個或更多的物件 (路徑或圖形) 合併成一個路徑物件。結果路徑物件會取代在合併、採用該物件的屬性之前所選取的最後物件。通常,結果是一個複合路徑。如需範例,請參閱合併圖形或路徑。如需編輯路徑的詳細資訊,請參閱畫筆及選取快速鍵

附註 合併之後,您將無法編輯圖形特有的屬性 (例如矩形的圓角半徑)。同時,如果在轉換之前套用樣式到最後選取的物件,則合併路徑的屬性將會設為路徑的預設值 (無填滿筆刷以及黑色筆觸)。

複合路徑

當您建立複合路徑時,結果中會減去路徑的任何交集部分,而產生的路徑會採用最底層路徑的視覺屬性。

轉換為複合路徑的兩個路徑

要將圖形包括在複合路徑之前必須先將圖形轉換成路徑 (在 [物件] 功能表上 [路徑] 之下的 [轉換為路徑])。可以將兩個或更多的路徑組成一個複合路徑。結果路徑會取代在複合、採用該路徑的屬性之前所選取的最底層路徑 (按 Z 順序)。在您建立複合路徑之後,可以在任何時候將它打散,但是原始屬性將無法還原。如需範例,請參閱設定或釋放複合路徑

裁剪路徑

裁剪路徑是套用於其他物件的路徑或圖形,用來隱藏被遮罩的物件落在裁剪路徑之外的部分。

已套用裁剪路徑的影像物件

如需範例,請參閱套用或移除裁剪路徑

不透明度遮罩

不透明度遮罩是套用至其他物件的路徑或圖形。路徑的透明部分代表被遮罩的物件消失的區域,而遮罩不透明的部分表示允許被遮罩的物件穿透的區域。任何物件都可以在 [屬性] 面板的 [外觀] 區段中定義不透明度遮罩。

不透明度遮罩可以是簡單的漸層筆刷,根據透明度來顯示或隱藏物件的各部分。在上述範例中,左邊的影像沒有套用不透明度遮罩,而右邊的影像可用以下兩種方式來產生:

未套用遮罩的影像 (左) 與已套用不透明度遮罩的影像 (右)

如需範例,請參閱建立不透明度遮罩