Как я могу нарисовать сектор круга с классом эллипса? - PullRequest
Новая
       72

Как я могу нарисовать сектор круга с классом эллипса?

16 голосов
/ 19 июля 2011

Я бы хотел сделать сектор круга на WP7.Я попытался сделать это с помощью класса ellipse, и я нашел много решений, которые создают калибровочную или круговую диаграмму или что-то в этом роде, но мне нужна только суть.Может ли кто-нибудь помочь?

цель - показать только одну часть круга (или эллипса).Как желтая область на картинке:

enter image description here

Спасибо, Laci

Ответы [ 2 ]

38 голосов
/ 05 января 2012

Вот довольно простое решение проблемы, хотя оно не использует Ellipse и требует небольшой тригонометрии: 

<Path Fill="Black"
      Data="M0,0 L0,-100 A100,100 0 0 1 70.7,-70.7 z" />

Свойство Data использует Синтаксис разметки пути .

  • "M" в начале указывает перу M ove к месту 0,0.
  • "L" указывает перу на рисование L ин из текущего местоположения (0, 0) в 0, -100.
  • «A» указывает перу нарисовать эллиптический A rc от текущего местоположения до 70,7, -70,7 (часть «100,100» определяет горизонтальный и вертикальный радиус эллипса, а «0» 0 1 "часть предназначена для RotationAngle, IsLargeArc и SweepDirection (1 для часовой стрелки, 0 для против часовой стрелки)).
  • "z" указывает перу закрыть или завершить фигуру (что приведет к рисованию линии от 70,7, -70,7 до 0,0).

Откуда пришли 70,7? Ну, эта конкретная дуга выметает угол 45 градусов от круга с радиусом 100, поэтому координаты 70,7, -70,7 определяются 100 * sin(45) и 100 * cos(45).

1 голос
/ 19 июля 2011

вам нужно сделать что-то вроде этого:

  • определить холст для эллипса

  • определить видимую часть холста (клип). Для этой части вам нужно использовать PathGeometry как клип, чтобы определить срез круга, который вы хотите видеть. (см. ссылку) 

    <Canvas>
    <Canvas.Clip>
        <PathGeometry>
                // define your path here (see link above)
        </PathGeometry> 

        <Ellipse Background="Yellow" Width="200" Height="200" />
    </Canvas.Clip>
</Canvas>

В качестве альтернативы вы можете использовать CombinedGeometry для объединения PathGeometry и EllipseGeometry для формирования среза (ссылка предоставляет хороший пример CombinedGeometry)

...