Xaml Path объяснение

Question

Я пытаюсь немного лучше понять язык XAML Path на Canvas.

В документации мало что вводится, по крайней мере, я не могу напрямую понять следующее Path для знака плюс + .

Path Data="M19,13H 13V 19H 11V 13H 5V 11H 11V 5H 13V 11H 19V 13Z" 

Может ли кто-нибудь объяснить, как на этом примере нарисован контур знака плюс?

Тогда я могу пойти дальше и, например, сделать его несколько больше.

Answer 1

Вы видели это? Объяснение команд этого мини-языка:

https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/path-markup-syntax

Ваш пример: Path Data = "M19,13H 13V 19H 11V 13H 5V 11H 11V 5H 13V 11H 19V 13Z".

В вашем примере M обозначает начальную точку 19,13. Затем H рисует горизонтальную линию с координатой 13 (таким образом, чтобы указать [13,13]), затем V рисует вертикальную линию с координатой 19 (до [13,19]) и так далее. Команда Z закрывает путь.

Answer 2

О, я понял. Сначала я должен прочитать это как

M19,13 H13 V19 H11 V13 H5 V11 H11 V5 H13 V11 H19 V13 Z

Прописные буквы означают абсолютное положение относительно центра 0, который является верхним левым краем холста. В этом случае последующие позиции на холсте

    19,13 -> 13,13 -> 13,19 -> 11,19 -> 11,13 -> 5,13 ->   
    5,11 -> 11,11 -> 11,5 -> 13,5 -> 13,11 -> 19,11 -> 19,13

Ширина линии равна 2, вероятно, пикселям (13 - 11), а общая высота / ширина равна 14,
потому что 19 - 13 = 11 - 5 = 6, поэтому 2 x 6 + 2 = 14.

например. изменяя 19 на 22 и 5 на 2, знак плюс становится больше при той же толщине.