Power Apps での Pen input コントロール

ユーザーが画像の領域を描画、削除、強調表示できるコントロール。

内容

ユーザーはこのコントロールをホワイトボードのように使用して、図を描いたり、入力したテキストに変換可能な文字を書いたりできます。

主要なプロパティ

Image – エンド ユーザーによって描画された画像を表す出力プロパティ。

Color – 入力ストロークの色。

Mode – このコントロールは 描画 または 削除 モードです。 選択モードは非推奨になりました。

追加のプロパティ

AccessibleLabel – スクリーン リーダー用のラベル。 コントロールの目的だけでなく、代替の入力方法についての説明にも使用できます。

BorderColor – コントロールの境界線の色。

BorderStyle – コントロールの境界線が 実線破線点線、または なし かどうか。

BorderThickness – コントロールの境界線の太さ。

DisplayMode – コントロールがユーザー入力を許可するか (編集)、データのみを表示するか (表示)、または無効にするか (無効) どうか。

Fill – コントロールの背景色。

Height – コントロールの上端と下端間の距離。

Input非推奨。 入力で、マウス、ペンまたはタッチ入力がサポートされるかどうか。 既定値 (7) では、3 つすべてがサポートされます。

OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。

SelectionColor – リスト内で選択された項目のテキストの色、またはペン コントロールの選択ツールの色。

SelectionThickness – ペン入力コントロールの選択ツールの太さ。

ShowControls – オーディオ プレイヤーまたはビデオ プレイヤーに再生ボタンと音量スライダーなどが表示されるかどうか、およびペン コントロールに描画、削除、クリアなどのアイコンが表示されるかどうか。

Size – コントロールに表示されるテキストのフォント サイズ。

Tooltip – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

Visible – コントロールが表示されるか非表示になるか。

Width – コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離。

Collect( CollectionName, DatatoCollect )

一連の画像を作成する

  1. Pen input コントロールを追加し、MyDoodles という名前を付け、ShowControls プロパティを true に設定します。

    コントロールの追加、名前付け、構成 についてはこちらをご覧ください。

  2. Button コントロールを追加し、MyDoodles の下に移動し、Button コントロールの Text プロパティを 追加 と表示するように設定します。

  3. Button コントロールの OnSelect プロパティを次の数式に設定します:
    Collect(Doodles, {Sketch:MyDoodles.Image})

  4. Image gallery コントロールを追加し、Button コントロールの下に移動し、画像ギャラリー の幅を表示項目が 3 つになるまで縮小します。

  5. Image gallery コントロールの Items プロパティを Doodles に設定してから、F5 キーを押します。

  6. MyDoodles で画像を描画してから、Button コントロールをクリックまたはタップします。

    描画した画像が、Image gallery コントロールに表示されます。

  7. (オプション) Pen input コントロール内で描画した画像を消去するアイコンをクリックまたはタップし、別の画像を描画してから、Button コントロールをクリックまたはタップします。

  8. Image gallery コントロールで、Image コントロールの OnSelect プロパティを次の数式に設定します:
    Remove(Doodles, ThisItem)

  9. Image gallery コントロール内の画像をクリックまたはタップすることにより、その画像を削除します。

SaveData 関数を使用して画像をローカルに保存するか、Patch 関数を使用してデータ ソースに保存します。

アクセシビリティ ガイドライン

色のコントラスト

次の間には適切な色のコントラストが必要です:

  • BorderColor とコントロールの外側の色 (境界線がある場合)
  • Fill とコントロールの外側の色 (境界線がある場合)

スクリーン リーダー サポート

  • AccessibleLabel が存在する必要があります。

    重要

    スクリーン リーダー ユーザーは Pen input にアクセスできません。 常に入力の代替形式を提供してください。 たとえば、スケッチが必要な場合は、ユーザーが画像をアップロードできるように、Add picture コントロールの追加を検討してください。 両方の方法を提供すると、ユーザーがより快適な方法を選択できるようになります。

キーボードのサポート

重要

キーボード ユーザーは Pen input にアクセスできません。 常に入力の代替形式を提供してください。 たとえば、署名が必要な場合は、ユーザーが名前を入力できるように Text input を追加することを検討してください。 両方の方法を提供すると、ユーザーがより快適な方法を選択できるようになります。

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。