Power Apps でのペン入力コントロール

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

内容

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

主要なプロパティ

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

– 入力ストロークの色。

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

追加のプロパティ

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

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

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

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

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

塗りつぶし – コントロールの背景色。

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

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

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

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

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

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

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

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

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

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

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

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

Collect( CollectionName, DatatoCollect )

一連の画像を作成する

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

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

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

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

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

  5. 画像ギャラリー コントロールの 項目 プロパティを Doodles に設定してから、F5 キーを押します。

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

    描画した画像が、画像ギャラリー コントロールに表示されます。

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

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

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

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

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

色のコントラスト

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

  • BorderColor とコントロールの外側の色 (境界線がある場合)
  • 塗りつぶし とコントロールの外側の色 (境界線がある場合)

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

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

    重要

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

キーボードのサポート

重要

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