2016-10-13 4 views
1

Я создаю свой собственный стиль флажка. Я нашел код в Интернете, который мне нравится, и я не уверен в рисовании WPF. Мне нужно сделать эти углы округлыми. Как сделать эти углы мягкими?Закругленные углы для пути

<Path Name="InnerPath" 
     Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75" 
     Stretch="Fill" 
     Stroke="#808080" /> 

enter image description here

+0

Используйте Rectangle вместо Path, или RectangleGeometry для данных РАТНЫ. – Clemens

+0

Кроме того, установка Stretch to Fill с этими координатами выглядит странно. – Clemens

+0

Данные пути - это единственное, что может это сделать. он не смотрит так, как вы хотите, потому что данные не инструктируют его. – Logan

ответ

0

Сначала путь наценка может показаться довольно запутанной. Основные отличия, которые необходимо учитывать в отношении вашего вопроса: M, Q, L и Z.

M - отправная точка для нового пути. Поскольку ваше изображение содержит 2 элемента (пути), вы будете использовать 2 M разметки - один для галочки, другой для поля.

Q обозначает квадратичную кривую Безье. Ему нужны две точки. Первый определяет, где тянуть линию, а вторая - это конечная точка. Важно отметить, что предыдущее заданное значение обозначает начало кривой.

L предназначен для прямой линии. Это критическое значение после кривой Безье в противном случае вызывает ошибку. Очевидно, парсер видит Q, обрабатывает первые два набора чисел, а затем видит третью, которая не привязана к разметке и BOOM. В вашем случае L используется, так как мы делаем линию. Однако мы могли бы использовать другой Q, чтобы сделать волнистую линию.

Z закроет путь и подключит его к отправной точке.

Глядя на исходное изображение, Единственные наценки Необходимые M и Z. Ваш путь значение свойства данных будет:

M 263,99 263.115 87.115 87.340 311.340 311.221 327.221 327.355 73.355 73,99 Z M 186.323 105.238 143.195 186,240,351,68 391.112 Z

Надеюсь, этот образ поможет объяснить вышеуказанные цифры: Outline Image

Единственное дополнение можно было бы добавить свойство заливку Пути и использовать ту же величину, ваш ход (# 808080). Это дает вам то же изображение, что и ваш оригинал. Не беспокойтесь, что это большие числа. Как векторная графика, они будут уменьшаться, чтобы соответствовать их контейнеру!

(Для тех, кто интересуется тем, как я придумал эти цифры, я взял изображение в Photoshop, развернул холст, чтобы сделать квадрат, а затем просто отметил все точки X, Y в фотошопе и использовал эти цифры.)

что касается кривых ...

Это где Q разметки приходит, а также L. Надеюсь, следующие иллюстрации помогут. Здесь мы имеем простой угол 90 градусов:

RightAngle

Чтобы бросить кривую на это, мы должны использовать Q-разметку. Если вы хотите сделать идеальную кривую, вы должны использовать точку, в которой пересекаются две линии. Поскольку это угол 90 градусов, это довольно легко понять. Это будет точка, к которой тянется кривая. В нашем примере выше это будет точка 0,0. Далее нам нужно знать, где мы хотим, чтобы кривая начиналась и заканчивалась. Чем дальше от точки привязки, тем больше кривая.В приведенной ниже иллюстрации я использовал 50:

CurvedAngle

На простом языке M 100,0 50,0 В 0,0 0,50 л 0100 переводит к: Глядя на точке 100,0, привлечь к точке 50,0, оттуда начнется вытягивание кривой до точки 0,0 и завершение в точке 0,50. Теперь нарисуем линию до 0,100.

Надеюсь, это объясняет, как сделать кривые в пути. На самом деле это довольно легко, как только вы получите это. С небольшим творчеством вы действительно можете многое сделать с помощью путей.

С учетом вышесказанного, разметка я думаю вы ищете это (НЕ ЗАБУДЬТЕ ДОБАВИТЬ заливку СОБСТВЕННОСТЬ!):

Data = "M 263,99 263115 113,115 Q 87,115 87,139 L 87315 Q 87340 113340 L 287340 311340 311315 Q L 311221 327221 327315 Q 327355 287355 113355 л Q 73355 73315 л 73139 В 73,99 113,99
ZM 186323 105238 143195 391112 186,240,351,68 Z»

Вышеуказанная наценка дает вам: CurvedCheckBox

Вот ссылка на команды разметки: MarkupCommands

Вот несколько примеров создания форм: MakingShapes

Смежные вопросы