Хобрук: Ваш путь к мастерству в программировании

Заполненные дуги в WPF

Я пытаюсь нарисовать фигуру примерно так: Концентрические дуги

Мне нужен уникальный элемент для каждого сегмента дуги, на котором я могу обрабатывать события и перекрашивать по мере необходимости. Я немного не уверен, как создать правильную геометрию в WPF. Я могу легко вычислить четыре точки для каждого сегмента дуги, исходя из радиуса кругов и угла от центра. Используя радиус 100 для внешнего круга и 50 для внутреннего, четыре точки красного цвета (по часовой стрелке от верхнего левого угла с началом координат вверху круга):

0,0
70,30
35,65
0,50

Используя эти точки, я создаю простой путь для рисования сегмента:

<Path Stroke="Black" Fill="Black" StrokeThickness="1" >
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigure StartPoint="0,0">
          <PathFigure.Segments>
            <ArcSegment Point="70,30" />
            <LineSegment Point="35,65" />
            <ArcSegment Point="0,50" />
          </PathFigure.Segments>
        </PathFigure>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

Но это просто рисует трапецию с прямыми линиями. Я знаю, что могу изменить размер ArcSegments, но не могу понять, как это влияет на кривизну. Я хочу, чтобы дуги следовали за основным кругом, но я не знаю, как это выразить. Как сделать дуги правильной кривизны?

Кроме того, как выразить и добавить пути в коде C # позади, а не в xaml?

23.05.2011

  • Это для настольной игры, над которой я работаю. 23.05.2011
  • Size используется как Size="XX,YY", где XX - радиус x, а YY - радиус y вашей дуги. Для идеальной дуги окружности они должны быть одинаковыми. Исходя из указанных вами размеров, это должно быть 50,50 для вашей внутренней дуги и 100,100 для внешней. 23.05.2011

Ответы:


1

Я нарисовал именно такую ​​форму (две соосные дуги и два соединяющих их радиала) вот так:

new LineSegment(new Point(x2, y2), true),
new ArcSegment(new Point(x3,y3),new Size(100*outerRadius,100*outerRadius), 0,largeAngle, SweepDirection.Clockwise, true),
new LineSegment(new Point(x4, y4), true),
new ArcSegment(new Point(x1, y1),new Size(100*innerRadius,100*innerRadius), 0,largeAngle, SweepDirection.Counterclockwise, true),

Очевидно, это код, а не XAML, но он может дать вам толчок.

23.05.2011
  • Идеально, размер просто должен быть размером с круг. Их документация по этому поводу не так проста, как могла бы быть на самом деле. Мне просто нужно быть осторожным, чтобы получить правильный SweepDirection, и он отлично работает. 23.05.2011
  • @captncraig, можете ли вы опубликовать обновленный XAML, чтобы другие могли увидеть ваше принятое решение? 16.10.2013
  • @Pete, на самом деле я закодировал это в коде позади, если я правильно помню. Это имело больше смысла для моего конкретного случая использования. 23.10.2013
  • Это отлично сработало для меня, но мне пришлось переместить первый сегмент линии вниз, чтобы он был добавлен последним к PathSegmentCollection, чтобы он отображался с обводкой, чтобы я мог иметь свою форму с контуром. Не знаю почему, но это сработало, так что я в порядке. 17.05.2017

  • 2

    Код XAML

    <Window x:Class="PopupTargetElement.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"         
            mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">        
        <Grid>
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="360" Fill="#FFF4F4F5" HorizontalAlignment="Center" Height="300"
                    Stretch="None" Stroke="Black" StartAngle="0" VerticalAlignment="Center" Width="300"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="360" Fill="#FFF4F4F5" HorizontalAlignment="Center" Height="220"
                Stretch="None" Stroke="Black" StartAngle="0" VerticalAlignment="Center" Width="220"/>
            
            <Ellipse   Width="140"  Height="140" Fill="Black" Stroke="Black" StrokeThickness="1" />
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="45" Fill="Black" HorizontalAlignment="Center" Height="300" 
                Stretch="None" Stroke="Black" StartAngle="0" VerticalAlignment="Center" Width="300"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="135" Fill="Black" HorizontalAlignment="Center" Height="300"
                Stretch="None" Stroke="Black" StartAngle="90" VerticalAlignment="Center" Width="300"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel"  EndAngle="225" Fill="Black" HorizontalAlignment="Center" Height="300" 
                Stretch="None" Stroke="Black" StartAngle="180" VerticalAlignment="Center" Width="300"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel"  EndAngle="315" Fill="Black" HorizontalAlignment="Center" Height="300"
                Stretch="None" Stroke="Black" StartAngle="270" VerticalAlignment="Center" Width="300"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="90" Fill="Black" HorizontalAlignment="Center" Height="220" 
                Stretch="None" Stroke="Black" StartAngle="45" VerticalAlignment="Center" Width="220"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="180" Fill="Black" HorizontalAlignment="Center" Height="220" 
                    Stretch="None" Stroke="Black" StartAngle="135" VerticalAlignment="Center" Width="220"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="270" Fill="Black" HorizontalAlignment="Center" Height="220"
                Stretch="None" Stroke="Black" StartAngle="225" VerticalAlignment="Center" Width="220"/>
    
            <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="360" Fill="Black" HorizontalAlignment="Center" Height="220"
                Stretch="None" Stroke="Black" StartAngle="315" VerticalAlignment="Center" Width="220"/>
        </Grid>
    </Window>
    

    Добавьте ссылку на сборку в свой проект. Microsoft.Expression.Drawing

    для xmlns: ed = http: //schemas.microsoft.com/expression/2010/drawing

    Вывод

    введите описание изображения здесь

    13.01.2021

    3

    Еще одним вариантом может быть включение пространства имен рисования выражения 2010 в XAML. Тогда это облегчает задачу.

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="Arcs.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ed:Arc ArcThickness="30"
                ArcThicknessUnit="Pixel"
                StartAngle="30"
                EndAngle="130"
                HorizontalAlignment="Left"
                Height="179" Margin="195,62,0,0"
                Stretch="None"
                Stroke="CornflowerBlue"
                Fill ="CornflowerBlue"
                VerticalAlignment="Top"
                Width="179" />
    </Grid>
    

    EDIT: This will pull in "Microsoft.Expression.Drawing" which gets installed when you install Blend. If the client machine does not have this then this will fail. On the other hand you can package and redistribute the dll with your software. Microsoft allows that.

    28.05.2015
    Новые материалы

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..