プロジェクトでの図形またはパスの描画

アプリケーションのユーザー インターフェイスをデザインするときに、図形やパス、コントロールを描画できます。描画した項目はアプリケーションのオブジェクトになります。

四角形、星形、円形、矢印などさまざまな汎用図形を [アセット] パネルから直接追加するには、[図形] をクリックして、目的の図形をクリックします。その後、オブジェクトの青色の境界ボックスの頂点にマウス ポインターを置くと表示されるオブジェクトのハンドルを使用して、図形のサイズを変更できます。

アセット パネルの [図形] カテゴリ

アートボード上で図形を追加または変更する方法については、「オブジェクトの追加または変更」を参照してください。

図形を描画するには

  1. [ツール] パネルで、[四角形] Dd185502.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(ja-jp,Expression.40).png または [楕円] Dd185502.8938cfdf-9b75-4a33-bc88-b0636e114a0d(ja-jp,Expression.40).png を選択します。

    tip noteヒント :

    すべての描画ツールを表示するには、[ツール] パネルに表示されているツールの 1 つを右クリックします。[線] ツールではパス オブジェクトが作成されます。このオブジェクトについてはこのトピックで後述します。

    Dd185502.8fbbbb21-be83-4cf6-903b-3a49f00c9860(ja-jp,Expression.40).png

  2. アートボードでマウスをドラッグして図形を描きます。

    図形を描くときに、幅と高さが次のように示されます。

    Dd185502.b9dabf44-71aa-43cb-b4eb-f020a21b8756(ja-jp,Expression.40).png

    tip noteヒント :

    Shift キーを押しながらドラッグすると、幅が高さが同じ図形を描けます。つまり、[四角形] を選択した場合は正方形に、[楕円] を選択した場合は真円になります。
    tip noteヒント :

    Alt キーを押しながらドラッグすると、クリックした最初の点が中心点になります。つまり、図形の左上隅からではなく、中心点から描くことになります。

    マウスのボタンを放すと、図形オブジェクトに対して拡大縮小、回転、移動、傾斜などの操作を行うための移動ハンドルが表示されます。ポインターが次の図のようになり、行うことができる操作が示されます。

    Dd185502.84261e83-3091-4490-ab58-4218b188439e(ja-jp,Expression.40).png

  3. Ctrl キーを押しながら S キーを押して、変更を保存します。

次のステップ

パスを描画するには

  1. [ツール] パネルで、[ペン] Dd185502.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.40).png または [鉛筆] Dd185502.509dc167-734f-46c9-b012-987ee63450cd(ja-jp,Expression.40).png を選択します。

    tip noteヒント :

    すべてのパス ツールを表示するには、[ツール] パネルに表示されているツールの 1 つを右クリックします。

    Dd185502.717956a8-b6a5-4e37-8af3-70bcfc78c82a(ja-jp,Expression.40).png

  2. アートボード上で、次のいずれかの方法でパスを描画します。

    • アートボード上で [鉛筆] ツールをドラッグします。ポインターを動かした軌跡にピクセルが生成されます。

    • [ペン] ツールを使用してアートボードをクリックし、パス オブジェクトを構成する点 (頂点) を生成します。必要に応じて、それぞれの点で曲線を描くようにドラッグします。パスを閉じるには、最初の点をクリックします。パスを閉じずに [ペン] ツールを終了するには、他のツールを選択するか、[オブジェクトとタイムライン] パネルでオブジェクトを選択します。

    パスの描画が完了すると、パス オブジェクトに対して拡大縮小、回転、移動、傾斜などの操作を行うための移動ハンドルが表示されます。ポインターの形が変わり、[選択内容] ツール Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.40).png を使用して行える操作が示されます。

    Dd185502.69c37d95-ec79-4885-9a63-9d26a596d31c(ja-jp,Expression.40).png

    パス上の個々の点を変更するには、[個別選択] Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.40).png をクリックします。パス オブジェクトに、クリックして移動できる個別の点および線分が表示されます。

    パスを変更する方法の一覧については、「ペン ツールの修飾キー」および「個別選択ツールの修飾キー」を参照してください。

    Dd185502.1cb49b7a-7490-49af-b966-a719e48d8815(ja-jp,Expression.40).png

  3. Ctrl キーを押しながら S キーを押して、変更を保存します。

次のステップ

線を描画するには

  1. [ツール] パネルの [線] Dd185502.eb618397-5283-48be-8396-3449be7b6fbf(ja-jp,Expression.40).png を選択します。

    tip noteヒント :

    [ツール] パネルに [線] ツールが表示されていない場合は、ツールのコンテナーを右クリックしてから [線] ツールを選択します。

    Dd185502.7431f56c-f3fe-4825-b6fb-6dac229422fd(ja-jp,Expression.40).png

  2. アートボードでマウスをドラッグして線を描画します。

    tip noteヒント :

    Shift キーを押しながらドラッグすると、直線の角度が 15°の倍数になります。
    tip noteヒント :

    Alt キーを押しながらドラッグすると、最初にクリックした点が線の始点ではなく中心点になります。

    マウス ボタンを放すと、拡大縮小、回転、移動、傾斜などの操作を行うための移動ハンドルが表示されます。ポインターの形が変わり、[選択内容] ツール Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.40).png を使用して行える操作が示されます。

    線の始点または終点を変更するには、[個別選択] Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.40).png をクリックします。パス オブジェクトである線に、クリックして移動できる個別の点が表示されます。

    パスを変更する方法の一覧については、「ペン ツールの修飾キー」および「個別選択ツールの修飾キー」を参照してください。

  3. Ctrl キーを押しながら S キーを押して、変更を保存します。

次のステップ

関連項目

タスク

プロジェクトにおけるコントロールの描画

Copyright ©2011 by Microsoft Corporation. All rights reserved.

  • Last updated on