PowerApps のペン入力コントロールPen input control in PowerApps

ユーザーが画像の領域を描画、削除、強調表示できるコントロールです。A control in which the user can draw, erase, and highlight areas of an image.


ユーザーはこのコントロールをホワイトボードのように使用して、図を描いたり、入力テキストに変換可能な文字を書いたりすることができます。The user can use this control like a whiteboard, drawing diagrams and writing words that can be converted to typed text.

主要なプロパティKey properties

Color – 入力ストロークの色です。Color – The color of input strokes.

Mode – このコントロールのモードは Draw (描画) または Erase (削除) です。Mode – The control is in Draw or Erase mode. Select (選択) モードは廃止されました。Select mode has been deprecated.

その他のプロパティAdditional properties

BorderColor – コントロールの境界線の色です。BorderColor – The color of a control's border.

BorderStyle – コントロールの境界線を Solid (実線)、Dashed (破線)、Dotted (点線)、None (なし) のいずれに指定します。BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – コントロールの境界線の太さです。BorderThickness – The thickness of a control's border.

DisplayMode – コントロールで、ユーザー入力を許可するか (Edit)、データの表示のみを許可するか (View)、許可しないか (Disabled) を設定します。DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

Fill – コントロールの背景色です。Fill – The background color of a control.

Height – コントロールの上端と下端の距離です。Height – The distance between a control's top and bottom edges.

Input – 入力です。Input – Input.

OnSelect – ユーザーがコントロールをタップまたはクリックした場合のアプリの反応を指定します。OnSelect – How the app responds when the user taps or clicks a control.

SelectionColor – リスト内で選択された項目のテキストの色、またはペン コントロールの選択ツールの色です。SelectionColor – The text color of a selected item or items in a list or the color of the selection tool in a pen control.

SelectionThickness – ペン入力コントロールの選択ツールの太さです。SelectionThickness – The thickness of the selection tool for a pen-input control.

ShowControls – オーディオ プレイヤーまたはビデオ プレイヤーに再生ボタンと音量スライダーなどを表示するかどうか、およびペン コントロールに描画、削除、クリアなどのアイコンを表示するかどうかを指定します。ShowControls – Whether an audio or video player shows, for example, a play button and a volume slider, and a pen control shows, for example, icons for drawing, erasing, and clearing.

Size – コントロールに表示されるテキストのフォント サイズです。Size – The font size of the text that appears on a control.

Tooltip – ポインターをコントロールに合わせたときに表示される説明テキストです。Tooltip – Explanatory text that appears when the user hovers over a control.

Visible – コントロールを表示するか非表示にするかを指定します。Visible – Whether a control appears or is hidden.

Width – コントロールの左端と右端の間の距離です。Width – The distance between a control's left and right edges.

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離です。X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離です。Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Collect( CollectionName, DatatoCollect )Collect( CollectionName, DatatoCollect )


画像セットの作成Create a set of images

  1. ペン入力コントロールを追加して MyDoodles という名前を付け、ShowControls プロパティを true に設定します。Add a Pen input control, name it MyDoodles, and set its ShowControls property to true.

    コントロールの追加、命名、構成についてはこちらをご覧くださいDon't know how to add, name, and configure a control?

  2. ボタン コントロールを追加して MyDoodles の下に移動し、ボタン コントロールの Text プロパティを、Add (追加) と表示するように設定します。Add a Button control, move it below MyDoodles, and set the Text property of the Button control to show Add.
  3. ボタン コントロールの OnSelect プロパティに次の式を設定します。Set the OnSelect property of the Button control to this formula:
    Collect(Doodles, {Sketch:MyDoodles.Image}) Collect(Doodles, {Sketch:MyDoodles.Image})
  4. イメージ ギャラリー コントロールを追加してボタン コントロールの下に移動させ、イメージ ギャラリーの幅を表示項目が 3 つになるまで縮小します。Add an Image gallery control, move it below the Button control, and shrink the width of the Image gallery control until it shows three items.
  5. イメージ ギャラリー コントロールの Items プロパティを [Doodles] に設定し、F5 キーを押します。Set the Items property of the Image gallery control to Doodles, and then press F5.
  6. MyDoodles に絵を描いてから、ボタン コントロールをクリックまたはタップします。Draw an image in MyDoodles, and then click or tap the Button control.

    描いた絵が、イメージ ギャラリー コントロールに表示されます。The image that you drew appears in the Image gallery control.

  7. (省略可能) ペン入力 コントロール内で描いた絵を消去するアイコンをクリックまたはタップし、別の絵を描いてから、ボタン コントロールをクリックまたはタップします。(optional) In the Pen input control, click or tap the icon to clear the image that you drew, draw another image, and then click or tap the Button control.
  8. イメージ ギャラリー コントロール内で、イメージ コントロールの OnSelect プロパティに次の式を設定します。In the Image gallery control, set the OnSelect property of the Image control to this formula:
    Remove(Doodles, ThisItem) Remove(Doodles, ThisItem)
  9. イメージ ギャラリー コントロール内の絵をクリックまたはタップすると、その絵を削除できます。Remove a drawing by clicking or tapping it in the Image gallery control.

SaveData 関数を使用して絵をローカルに保存するか、Patch 関数を使用してデータ ソースに保存します。Use the SaveData function to save your drawings locally or the Patch function to save them to a data source.