PowerApps의 펜 입력 컨트롤Pen input control in PowerApps

사용자가 그리고 삭제하고 이미지의 영역을 강조 표시할 수 있는 컨트롤입니다.A control in which the user can draw, erase, and highlight areas of an image.

설명Description

사용자는 이 컨트롤을 화이트보드처럼 사용하여 입력된 텍스트로 변환할 수 있는 다이어그램을 그리고 단어를 쓸 수 있습니다.The user can use this control like a whiteboard, drawing diagrams and writing words that can be converted to typed text.

주요 속성Key properties

Image – 최종 사용자가 그린 이미지를 나타내는 출력 속성입니다.Image – Output property that represents the image drawn by the end user.

Color – 입력 스트로크의 색입니다.Color – The color of input strokes.

Mode – 컨트롤이 그리기 또는 삭제 모드 상태입니다.Mode – The control is in Draw or Erase mode. 선택 모드는 사용되지 않습니다.Select mode has been deprecated.

추가 속성Additional properties

AccessibleLabel – 화면 읽기 프로그램의 레이블입니다.AccessibleLabel – Label for screen readers. 컨트롤의 목적과 대체 입력 방법을 설명하는 데 사용할 수 있습니다.Can be used to describe the purpose of the control as well as alternative methods of input.

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 – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.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 - 사용되지 않음.InputDeprecated. 입력 기능이 마우스, 펜 또는 터치 입력을 지원하는지 여부입니다.Whether the input supports mouse, pen, or touch inputs. 기본값(7)은 세 가지를 모두 지원합니다.Defalut value (7) supports all three.

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 )

Example

이미지 집합 만들기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 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. 이미지 갤러리 컨트롤을 추가하고 단추 컨트롤 아래로 이동한 다음, 세 개 항목이 표시될 때까지 이미지 갤러리 컨트롤의 너비를 축소합니다.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. 이미지 갤러리 컨트롤의 항목 속성을 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.

접근성 지침Accessibility guidelines

색 대비Color contrast

다음 사이에 적절한 색 대비가 있어야 합니다.There must be adequate color contrast between:

  • BorderColor 및 컨트롤 외부 색(테두리가 있는 경우)BorderColor and the color outside the control (if there is a border)
  • Fill 및 컨트롤 외부 색(테두리가 없는 경우)Fill and the color outside the control (if there is no border)

화면 판독기 지원Screen reader support

  • AccessibleLabel 이 있어야 합니다.AccessibleLabel should be present.

    중요

    화면 읽기 프로그램 사용자는 펜 입력에 액세스할 수 없습니다.Pen input is not accessible to screen reader users. 항상 대체 입력 양식을 제공하세요.Always provide an alternative form of input. 예를 들어 스케치가 필요한 경우 사용자가 이미지를 업로드할 수 있는 그림 추가 컨트롤을 추가하는 것이 좋습니다.For example, if a sketch is required, consider adding an Add picture control for users to upload an image. 두 가지 방법을 모두 제공할 수 있고 사용자가 더 익숙한 방법을 선택할 수 있습니다.Both methods can be offered and the user can choose the one they are more comfortable with.

키보드 지원Keyboard support

중요

키보드 사용자는 펜 입력에 액세스할 수 없습니다.Pen input is not accessible to keyboard users. 항상 대체 입력 양식을 제공하세요.Always provide an alternative form of input. 예를 들어 서명이 필요한 경우 사용자가 이름을 입력할 수 있는 텍스트 입력 을 추가하는 것이 좋습니다.For example, if a signature is required, consider adding a Text input for users to enter their name. 두 가지 방법을 모두 제공할 수 있고 사용자가 더 익숙한 방법을 선택할 수 있습니다.Both methods can be offered and the user can choose the one they are more comfortable with.