Элемент управления "Ввод с помощью пера" в PowerAppsPen 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

Color — цвет штрихов.Color – The color of input strokes.

Mode — режим работы элемента управления: Рисование или Стирание.Mode – The control is in Draw or Erase mode. Этот режим является устаревшим.Select mode has been deprecated.

Дополнительные свойстваAdditional properties

BorderColor — цвет границы элемента управления.BorderColor – The color of a control's border.

BorderStyle — стиль границы элемента управления: Сплошная, Штриховая, Пунктирная или Отсутствует.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 — введенные данные.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 )

Пример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. Назначьте свойству 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.