コンテナーを使用して要素をクリップ

UI 要素の使用

プレビュー

このトピックでは、以下の画像のようにクリップした画像を含むコンテナースクリーンをデザインします。

概要

以下は主な手順です。

  1. コンテナーの追加
  2. コンテナーに要素を追加
  3. コンテナー内の要素をクリップ

詳細手順

1.コンテナーの追加

  1. Alt キーを押しながらドラッグし、container と入力するとコンテナーがスクリーンに追加されます。

    コンテナーの追加のオプションについては、コンテナーの使用を参照してください。

  2. コンテナーのプロパティを編集します。

    例のように、太さを 0 および丸めを 16 に設定します。

2.コンテナーに要素を追加

  1. コンテナーをダブルクリックして編集モードに入ります。

  2. 画像を追加します。

    例の画像は複数のアバターがあります。プロトタイプにアバターをカスタマイズできます。

3.コンテナー内の要素をクリップ

編集モードで、表示領域以外にあっても、コンテナーに追加する要素を表示できます。

  1. Esc キーを押して編集モードを終了します。

    画像はクリップされます。プロトタイプを実行するとき、このように表示されます。

  2. スペース を押してクリックすると、画像を選択します。

  3. 1 つのアバターがコンテナーの表示領域に合わせるために画像を移動します。

プロトタイプ

以下のサンプル プロトタイプを参照してください。

関連トピック