Udostępnij przez


Kontrolki pisma odręcznego

Istnieją dwie różne kontrolki, które ułatwiają pisanie odręczne w aplikacjach systemu Windows: InkCanvas i InkToolbar.

Kontrolka InkCanvas wyświetla dane wejściowe pióra jako ślad tuszu (korzystając z domyślnych ustawień koloru i grubości) lub ślad wymazywania. Ta kontrolka jest przezroczystą nakładką, która nie zawiera żadnego wbudowanego interfejsu użytkownika do zmiany domyślnych właściwości pociągnięć tuszem.

Uwaga / Notatka

InkCanvas można skonfigurować tak, aby obsługiwał podobne funkcje zarówno dla wprowadzania za pomocą myszy, jak i dotyku.

Ponieważ kontrolka InkCanvas nie obsługuje zmiany domyślnych ustawień pociągnięcia pisma odręcznego, można ją sparować z kontrolką InkToolbar. Narzędzie InkToolbar zawiera dostosowywalną i rozszerzalną kolekcję przycisków, które aktywują funkcje związane z atramentem w skojarzonym inkCanvas.

Domyślnie pasek InkToolbar zawiera przyciski do rysowania, wymazywania, wyróżniania i wyświetlania linijki. W zależności od funkcji, inne ustawienia i polecenia, takie jak kolor tuszu, grubość pociągnięcia i wymazywanie całego tuszu, są udostępniane w oknie wysuwanym.

Uwaga / Notatka

Narzędzie InkToolbar obsługuje wprowadzanie piórem i myszą i można je skonfigurować do rozpoznawania danych wejściowych dotykowych.

menu wysuwane palety InkToolbar

Czy jest to właściwa kontrola?

Użyj aplikacji InkCanvas, jeśli musisz włączyć podstawowe funkcje pisma odręcznego w aplikacji bez podawania żadnych ustawień pisma odręcznego dla użytkownika.

Domyślnie pociągnięcia są renderowane jako atrament podczas korzystania z końcówki pióra (czarnego pióra kulkowego o grubości 2 pikseli) i jako gumki podczas korzystania z końcówki gumki. Jeśli nie ma końcówki gumki, można skonfigurować InkCanvas do przetwarzania danych wejściowych z końcówki pióra jako czynności wymazywania.

Sparuj element InkCanvas z narzędziem InkToolbar, aby zapewnić interfejs użytkownika do aktywowania funkcji związanych z atramentem oraz ustawiania podstawowych właściwości atramentu, takich jak rozmiar kreski, kolor i kształt końcówki pióra.

Uwaga / Notatka

Aby uzyskać bardziej rozbudowane dostosowywanie renderowania pociągnięć atramentu na InkCanvas, użyj bazowego obiektu InkPresenter.

Omówienie paska narzędzi atramentu

Wbudowane przyciski

Pasek InkToolbar zawiera następujące wbudowane przyciski:

Długopisy

  • Długopis kulkowy - rysuje jednolitą, nieprzezroczystą kreskę za pomocą kulkowej końcówki. Rozmiar pociągnięcia zależy od wykrytego ciśnienia pióra.
  • Ołówek — rysuje miękką krawędź, teksturowane i półprzezroczyste pociągnięcie (przydatne do efektów cieniowania warstwowego) z końcówką w kształcie kółka. Kolor kreski (ciemność) zależy od wykrytego ciśnienia pióra.
  • Zakreślacz — rysuje półprzezroczystą linię za pomocą prostokątnej końcówki pióra.

Możesz dostosować zarówno paletę kolorów, jak i atrybuty rozmiaru (min, max, default) w wysuwanych polach dla każdego pióra.

Narzędzie

  • Gumka: usuwa każdą dotkniętą kreskę atramentu. Należy pamiętać, że cała kreska tuszu jest usuwana, a nie jedynie jego część znajdująca się pod kreską gumki.

Przełącz

  • Linijka — pokazuje lub ukrywa linijki. Rysowanie w pobliżu krawędzi linijki powoduje, że pociągnięcie tuszowe dopasowuje się do linijki.
    Wizualizacja Linijki związana z InkToolbar

Mimo że jest to konfiguracja domyślna, masz pełną kontrolę nad tym, które wbudowane przyciski są zawarte w narzędziu InkToolbar dla aplikacji.

Przyciski niestandardowe

Pasek narzędzi InkToolbar składa się z dwóch odrębnych grup przycisków:

  1. Grupa przycisków narzędzi zawierających wbudowane przyciski do rysowania, wymazywania i wyróżniania. W tym miejscu dodawane są spersonalizowane długopisy i narzędzia.

Uwaga / Notatka

Proces wyboru cech jest wzajemnie wykluczający się.

  1. Grupa przycisków typu "przełącznik" zawierająca wbudowany przycisk linijki. W tym miejscu są dodawane niestandardowe przełączniki.

Uwaga / Notatka

Funkcje nie wykluczają się wzajemnie i mogą być używane jednocześnie z innymi aktywnymi narzędziami.

W zależności od aplikacji i wymaganej funkcji pisma odręcznego można dodać dowolny z następujących przycisków (powiązanych z niestandardowymi funkcjami pisma odręcznego) do paska narzędzi InkToolbar:

  • Pióro niestandardowe — pióro, dla którego paleta kolorów atramentu i właściwości końcówki pióra, takie jak kształt, obrót i rozmiar, są definiowane przez aplikację hosta.
  • Narzędzie niestandardowe — narzędzie inne niż pióro zdefiniowane przez aplikację macierzystą.
  • Przełącznik niestandardowy — ustawia stan funkcji zdefiniowanej przez aplikację na włączony lub wyłączony. Po włączeniu funkcja działa w połączeniu z aktywnym narzędziem.

Uwaga / Notatka

Nie można zmienić kolejności wyświetlania wbudowanych przycisków. Domyślna kolejność wyświetlania to: długopis kulkowy, ołówek, zakreślacz, gumka i linijka. Niestandardowe pióra są dołączane do ostatniego domyślnego pióra, niestandardowe przyciski narzędzi są dodawane między ostatnim przyciskiem pióra a przyciskiem gumki, a niestandardowe przyciski przełączania są dodawane po przycisku linijki. (Przyciski niestandardowe są dodawane w takiej kolejności, jak zostały określone).

Mimo że pasek InkToolbar może być elementem najwyższego poziomu, zazwyczaj jest udostępniany za pomocą przycisku lub polecenia "Inking". Zalecamy używanie glifu EE56 z czcionki Segoe MLD2 Assets jako ikony najwyższego poziomu.

Interakcja narzędzia InkToolbar

Wszystkie wbudowane przyciski pióra i narzędzia zawierają menu wysuwane, w którym można ustawić właściwości pisma odręcznego oraz kształt i rozmiar końcówki pióra. Na przycisku zostanie wyświetlony "glif rozszerzenia", aby pokazać istnienie wysuwanego elementu.

glyph paska narzędziowego

Menu rozwijane wyświetla się, gdy ponownie wybierzesz przycisk aktywnego narzędzia. Po zmianie koloru lub rozmiaru, wysuwane okno jest automatycznie zamykane i można wznowić pisanie odręczne. Niestandardowe pióra i narzędzia mogą używać domyślnego menu wysuwanego lub określić niestandardowe menu wysuwane.

Gumka ma również wysuwane menu, które zapewnia polecenie Usuń Cały Atrament.

InkToolbar z wysuwaną funkcją gumki wywoływaną

Aby uzyskać informacje na temat dostosowywania i rozszerzalności, zajrzyj do przykładu SimpleInk.

Rekomendacje

  • InkCanvas, a także pisma odręcznego w ogóle, najlepiej korzysta się z użyciem aktywnego pióra. Zalecamy jednak obsługę pisma odręcznego za pomocą myszy i dotyku (w tym pasywnego pióra), jeśli jest to wymagane przez aplikację.
  • Użyj kontrolki InkToolbar z elementem InkCanvas, aby zapewnić podstawowe funkcje i ustawienia pisma odręcznego. Zarówno InkCanvas, jak i InkToolbar można dostosować programowo.
  • InkToolbar, jak i proces pisania odręcznego w ogóle, najlepiej doświadcza się poprzez użycie aktywnego pióra. Jednak pisanie odręczne za pomocą myszy i dotyku może być obsługiwane, jeśli jest to wymagane przez aplikację.
  • Jeśli chcesz wspierać pisanie odręczne z wprowadzaniem dotykowym, zalecamy użycie ikony ED5F z czcionki Segoe MLD2 Assets dla przycisku przełącznika z podpowiedzią "Pisanie dotykowe".
  • Jeśli zapewniane jest zaznaczenie pociągnięcia, zalecamy użycie ikony EF20 z czcionki Segoe MLD2 Assets dla przycisku narzędzia z podpowiedzią "Narzędzie wyboru".
  • Jeśli używasz więcej niż jednego modułu InkCanvas, zalecamy używanie pojedynczego narzędzia InkToolbar do kontrolowania pisma odręcznego na kanwach.
  • Aby uzyskać najlepszą wydajność, zalecamy zmianę domyślnego okna wysuwanego zamiast tworzenia niestandardowego, co dotyczy zarówno narzędzi domyślnych, jak i niestandardowych.

Przykłady

Microsoft Edge

Przeglądarka Microsoft Edge używa narzędzi InkCanvas i InkToolbar dla notatek internetowych.
InkCanvas służy do rysowania odręcznego w przeglądarce Microsoft Edge

Obszar roboczy Windows Ink

Narzędzia InkCanvas i InkToolbar są również używane do Snip & Sketch w obszarze roboczym pisma odręcznego systemu Windows.
InkToolbar w obszarze roboczym pisma odręcznego systemu Windows

Utwórz InkCanvas i InkToolbar

Aby dodać InkCanvas do swojej aplikacji, wystarczy jedna linia znaczników:

<InkCanvas x:Name="myInkCanvas"/>

Uwaga / Notatka

Aby uzyskać szczegółowe informacje na temat dostosowywania InkCanvas za pomocą InkPresenter, zobacz artykuł "Interakcje piórem i Windows Ink w aplikacjach systemu Windows".

Element sterujący InkToolbar musi być używany w połączeniu z InkCanvas. Włączenie narzędzia InkToolbar (ze wszystkimi wbudowanymi narzędziami) do aplikacji wymaga jednej dodatkowej linii znaczników:

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

Spowoduje to wyświetlenie następującego narzędzia InkToolbar:

Podstawowe narzędzie InkToolbar

Pobieranie przykładowego kodu

  • Przykład SimpleInk — demonstruje 8 scenariuszy dotyczących możliwości dostosowywania i rozszerzalności kontrolek InkCanvas i InkToolbar. Każdy scenariusz zawiera podstawowe wskazówki dotyczące typowych sytuacji pisma odręcznego i implementacji kontroli.
  • Przykład ComplexInk — przedstawia bardziej zaawansowane scenariusze cyfrowego pisania.
  • Przykład Galerii WinUI 2 – zobacz wszystkie kontrolki XAML w formie interaktywnej.