クリッピングパスの作成

UIElementクラスにはClipプロパティが用意されており、このプロパティにGeometryオブジェクトを設定することでその形にUIElementを切り抜くことができます。これは、WindowsフォームでいうとControlクラスのBoundsプロパティに該当します。


今回は、ImageオブジェクトのClipプロパティをExpression Blendを使って設定する方法をご紹介したいと思います。


１．Rectangleオブジェクトの配置。
ツールボックスから、Rectangleオブジェクトを配置します。


２．パスへの変換
配置したRectangleオブジェクトを選択した状態で、メニュー・バーの［オブジェクト］−［パス］−［パスに変換］を選択し、Pathオブジェクトに変換します。


３．Pathを好きな形に変形
ツールボックスの［直接選択］（白い矢印の方）を使い、四角形の形をしたPathオブジェクトを好きな形に変形させます（ここでAltキーを押しながらドラッグするとおもしろい変形を行うことができます）。





４．画像ファイルをプロジェクトへ追加
メニュー・バーの［プロジェクト］−［既存のアイテムの追加］から、画像ファイルをプロジェクトに追加します。


５．Imageオブジェクトを配置する。
ツールボックスから［アセットツール］を開き、［メディア］タブからプロジェクトに追加した画像を選択します。その後、ツールボックスからその画像選択し、Imageオブジェクトを任意の大きさで配置します。その後、先ほど作成したPathオブジェクトをImageオブジェクトの上の好きな位置に配置してください。





６．Pathオブジェクトの適用
Imageオブジェクトを選択した状態で、［Ctrl］キーを押しながらPathオブジェクトを選択します（［アートボード］上のオブジェクトではなく、［オブジェクトとタイムライン］パネルを使うと便利です）。その状態でメニュー・バーの［オブジェクト］−［パス］−［クリッピングパスの作成］をクリックします。