2011-07-19 10 views
15

Me gustaría hacer un sector de un círculo en WP7. Traté de hacer esto con la clase de elipse y encontré mucha solución, lo que hace un indicador o un gráfico circular o algo así, pero solo necesito la esencia. ¿Alguien podría ayudar?¿Cómo puedo dibujar un sector circular con la clase de elipse?

el objetivo es mostrar solo una parte de un círculo (o elipse). Al igual que el área amarilla en la imagen:

enter image description here

Gracias, Laci

+2

Por favor, proporcione más información, su pregunta no está clara. –

+0

Me gustaría mostrar solo una parte de un círculo (o elipse). Al igual que el área amarilla en la [imagen] (http://t0.gstatic.com/images?q=tbn:ANd9GcSWJgfC4v6tzKRjZBnARgoDiBl0yYhjPuA51ipzz4lWmZOM08dAWA). – laszlokiss88

Respuesta

33

Aquí es una solución bastante simple al problema, a pesar de que no utiliza un Ellipse y requiere un poco de trigonometría:

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

La propiedad Data utiliza Path Markup Syntax.

  • La "M" al principio cuenta la pluma para M ove a la ubicación 0,0.
  • La "L" le dice al lápiz que dibuje un L ine desde la ubicación actual (0, 0) a 0, -100.
  • La "A" le dice al bolígrafo que dibuje un A rc desde la ubicación actual a 70.7, -70.7 (la porción "100,100" determina el radio horizontal y vertical de la elipse y la parte "0 0 1" es para RotationAngle, IsLargeArc y SweepDirection (1 para las agujas del reloj, 0 para las agujas del reloj)).
  • La "z" le dice al bolígrafo que cierre o complete la forma (lo que hará que se dibuje una línea de 70.7, -70.7 de nuevo a 0,0).

¿De dónde vino el 70.7? Bueno, este arco particular barre un ángulo de 45 grados desde un círculo con radio 100, por lo que las coordenadas 70.7, -70.7 están determinadas por 100 * sin(45) y 100 * cos(45).

+0

Respuesta genial, pero técnicamente está utilizando 100 * sin (45 * (Pi/180)) y 100 * cos (45 * (Pi/180)) ya que está utilizando radianes para obtener la coordenada xey, no el grado. – djangojazz

1

que tiene que hacer algo como esto:

  • definen una envoltura de tela para la elipse
  • definen la parte visible del lienzo (clip). Para esta parte necesita usar PathGeometry como el Clip para definir la porción del círculo que desea que sea visible. (Ver enlace)

    <Canvas> 
        <Canvas.Clip> 
         <PathGeometry> 
           // define your path here (see link above) 
         </PathGeometry> 
    
         <Ellipse Background="Yellow" Width="200" Height="200" /> 
        </Canvas.Clip> 
    </Canvas> 
    

Alternativamente, puede utilizar CombinedGeometry combinar un PathGeometry y EllipseGeometry para formar la división. (El enlace es un buen ejemplo de CombinedGeometry)

Cuestiones relacionadas