Проблема с размером пути WPF

Question

Эй, ребята, я играл с формой пути WPF, но меня немного раздражает какое-то поведение. В частности, путь не соответствует самому размеру, как мне хотелось бы. Если вы посмотрите на изображение ниже, я хочу, чтобы весь путь находился внутри белого квадрата (который представляет границы элемента управления Path), но дуги немного выпадают. Я думаю, это потому, что размер пути сам по себе соответствует точкам, использованным для рисования фигуры, а не по той фигуре, которая фактически нарисована.

Мой вопрос: кто-нибудь знает, как это преодолеть? Я имею в виду, помимо явной настройки размеров пути. Есть ли какая-то опция, которую я упустил для того, чтобы получить путь к самому размеру в соответствии с формой, а не в соответствии с точками, использованными для создания формы? Спасибо за любые ответы.

---

Вот две версии (что должно быть) эквивалентного кода:

1) Во-первых, используя привязки данных (написанные очень многословно):

<UserControl x:Class="OrbitTrapWpf.LineSegmentTool"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:OrbitTrapWpf"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         x:Name="Root" Background="White">
<UserControl.Resources>
    <local:ArcSizeConverter x:Key="ArcSizeConverter"/>
    <local:ArcPointConverter x:Key="ArcPointConverter"/>
</UserControl.Resources>
<Path Name="path" Stroke="Black">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure IsClosed="True">
            <PathFigure.StartPoint>
              <Binding ElementName="Root" Path="point0"></Binding>
            </PathFigure.StartPoint>
            <PathFigure.Segments>
              <PathSegmentCollection>
                <ArcSegment SweepDirection="Counterclockwise" >
                  <ArcSegment.Size>
                    <Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/>
                  </ArcSegment.Size>
                  <ArcSegment.Point>
                    <Binding ElementName="Root" Path="point1" />
                  </ArcSegment.Point>
                </ArcSegment>
                <LineSegment>
                  <LineSegment.Point>
                    <Binding ElementName="Root" Path="point2" />
                  </LineSegment.Point>
                </LineSegment>
                <ArcSegment SweepDirection="Counterclockwise">
                  <ArcSegment.Size>
                    <Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/>
                  </ArcSegment.Size>
                  <ArcSegment.Point>
                    <Binding ElementName="Root" Path="point3" />
                  </ArcSegment.Point>
                </ArcSegment>
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

2) А этот, используя мини-язык:

<UserControl x:Class="OrbitTrapWpf.LineSegmentTool"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:OrbitTrapWpf"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         x:Name="Root" Background="White">
<UserControl.Resources>
    <local:ArcSizeConverter x:Key="ArcSizeConverter"/>
    <local:ArcPointConverter x:Key="ArcPointConverter"/>
</UserControl.Resources>
  <Grid Name="grid">
  <Path Name="path" Stroke="Black" Data="M 0.146446609406726,1.14644660940673 A 0.5,0.5 0 1 0 0.853553390593274,1.85355339059327 L 1.85355339059327,0.853553390593274 A 0.5,0.5 0 1 0 1.14644660940673,0.146446609406726 Z " />

Я подумал, что они должны быть примерно одинаковыми, но, видимо, версия на мини-языке имеет почти правильный размер, тогда как оригинал сильно отличается.

Answer 1

По сути, ваш путь говорит xaml:

1. Начните с точки 0, нарисуйте дугу к точке 1.
2. От точки 1 нарисуйте линию до точки 2.
3. Из точки 2 нарисуйте дугу в точку 3.
4. «IsClosed» рисует другую линию от точки 3 до точки 0.

То, что вы определили, это именно то, что производится - единственный способ изменить его - это изменить свои позиции - но дуга все равно будет расширяться за пределы точки 0 на оси X, потому что это то, что вы определили.

Если вам нужно, чтобы ваша фигура целиком вписывалась в какую-то границу, вы можете поместить рамку вокруг вашей фигуры с полем, скажем, радиуса 1/2 (я уверен, что есть формула для точного выступа) на снизу и справа.

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

Answer 2

Хорошо, я нашел проблему и решил ее. Я установил флаг IsLargeArc в мини-языковой версии, в то время как в чисто XAML-версии я оставил это как False. Поэтому я изменил его на True, и волшебным образом получил ожидаемые результаты.

Мне кажется, это ошибка, потому что в этом случае большие и маленькие дуги - это одно и то же, так как я рисую полдугу. Если кто-то знает причину такого поведения, было бы здорово услышать об этом!

Answer 3

Я наткнулся на это сообщение и подумал, что опубликую ответ на тот случай, если кто-нибудь ищет простой способ изменить размеры путей или значков.Самый простой способ, который я нашел, - это использовать Viewbox для всех моих дисплеев Path.Это потому, что путь будет хорошо масштабироваться внутри Viewbox.Я использую холст для хранения каждого пути, размер этого холста очень важен, если вы хотите использовать «красивые» числа.

Вот пример того, как это сделать:

Сначала (необязательно) Нарисуйте свою фигуру в программе Vector, например Inkscape или CorelDraw!Я использовал CorelDraw для создания файла .svg . Примечание: При использовании программы для создания вектора размер вашей страницы должен быть примерно 100 X 100 пикселей. Это то, что вы собираетесь установить для размера холста.Если вы пишете путь вручную, это также очень удобный подход, просто выберите размер, например, 100 X 100, и все ваши измерения пути будут <100, используйте его в качестве своей шкалы, другими словами. </p>

Далее используйтепрограмма-переводчик, такая как Vector to Xaml Converter и генерация пути.Сохраните это в Resource Dictionary или поместите в файл, где вам это нужно.Поместите путь внутрь холста следующим образом:

<Canvas x:Key="someName" Width="100" Height="100">
    <Path Fill="#FF000000" Stroke="#FF373435" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/>
</Canvas>

Снова обратите внимание на размер холста, он должен соответствовать размерам вашей "Доски для рисования".

Затем, чтобы использовать это, просто поместите ContentControl внутри ViewBox, который имеет ширину и высоту, для которых вы хотите, чтобы путь отображался следующим образом:

<Viewbox x:Name="btnClose" Width="30" Height="30">
    <ContentControl Content="{StaticResource someName}" />
</Viewbox>

Вот и все!Еще одна приятная вещь об использовании путей - вы можете связать цвет фона (заливка) или переднего плана (обводка).Возьмем наш пример, как управлять цветами:

<SolidColorBrush x:Key="stForeColor" Color="#FFD4D7EA" />

<Canvas x:Key="someName" Width="100" Height="100">
    <Path Fill="{StaticResource stForeColor}" Stroke="Transparent" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/>
</Canvas>

Есть также множество других вещей, которые вы можете сделать, все, что вы можете сделать с любой другой формой, эффектами, анимацией и т. Д.