locked
How do I Combine Multi-Color Shapes into one Path/Shape RRS feed

  • Question

  • I have a multicolored pie (like trivial pursuit) object in Blend When I combine all the paths (compund path) the object turns into the same color.  In essence, I would like to flatten the image (in Photoshop terms), so I can manipulate it as a whole and apply animations to it.

    <Canvas Width="500" Height="500">  
            <Path Stretch="Fill" Stroke="{DynamicResource GradientBorderStroke}" StrokeLineJoin="Miter" x:Name="RedPiece" Width="36.76" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Height="52.469" Canvas.Left="213.039" Canvas.Top="241.47" Fill="{DynamicResource RedPiece}" HorizontalAlignment="Center" VerticalAlignment="Center"/>  
            <Path Stretch="Fill" StrokeLineJoin="Miter" x:Name="LightBluePiece" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Stroke="{DynamicResource GradientBorderStroke}" Height="52.469" RenderTransformOrigin="0.5,0.5" Width="36.76" Canvas.Left="249.447" Canvas.Top="189.122" Fill="{DynamicResource LightBluePiece}" HorizontalAlignment="Center" VerticalAlignment="Center">  
                <Path.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="0.99999999802988715" ScaleY="1.000000001970113"/>  
                        <SkewTransform AngleX="0" AngleY="0.00017000699128288943"/>  
                        <RotateTransform Angle="179.92391494896768"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </Path.RenderTransform> 
            </Path> 
            <Path Stretch="Fill" Stroke="{DynamicResource GradientBorderStroke}" StrokeLineJoin="Miter" x:Name="OrangePiece" Width="36.76" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Height="52.469" Canvas.Left="199.732" Canvas.Top="220.894" RenderTransformOrigin="0.5,0.5" Fill="{DynamicResource OrangePiece}" HorizontalAlignment="Center" VerticalAlignment="Center">  
                <Path.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="0.99944100072629727" ScaleY="1.0005593119286644"/>  
                        <SkewTransform AngleX="-0.064083484196913787" AngleY="0"/>  
                        <RotateTransform Angle="44.979958250395725"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </Path.RenderTransform> 
            </Path> 
            <Path Stretch="Fill" StrokeLineJoin="Miter" x:Name="PinkPiece" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Stroke="{DynamicResource GradientBorderStroke}" Height="52.469" RenderTransformOrigin="0.5,0.5" Width="36.76" Canvas.Left="237.151" Canvas.Top="246.572" Fill="{DynamicResource PinkPiece}" HorizontalAlignment="Center" VerticalAlignment="Center">  
                <Path.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="0.99942908097867234" ScaleY="1.0005712451560531"/>  
                        <SkewTransform AngleX="0.064068337137229037" AngleY="0"/>  
                        <RotateTransform Angle="-45.590965441876975"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </Path.RenderTransform> 
            </Path> 
            <Path Stretch="Fill" StrokeLineJoin="Miter" x:Name="GreenPiece" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Stroke="{DynamicResource GradientBorderStroke}" Height="52.469" RenderTransformOrigin="0.5,0.5" Width="36.76" Canvas.Left="225.548" Canvas.Top="183.904" Fill="{DynamicResource GreenPiece}" HorizontalAlignment="Center" VerticalAlignment="Center">  
                <Path.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="0.99944314601509043" ScaleY="1.000557164244039"/>  
                        <SkewTransform AngleX="0" AngleY="0.064082830012594627"/>  
                        <RotateTransform Angle="135.09795850368175"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </Path.RenderTransform> 
            </Path> 
            <Path Stretch="Fill" StrokeLineJoin="Miter" x:Name="YellowPiece" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Stroke="{DynamicResource GradientBorderStroke}" Height="52.469" RenderTransformOrigin="0.5,0.5" Width="36.76" Canvas.Left="205.14" Canvas.Top="197.056" Fill="{DynamicResource YellowPiece}" HorizontalAlignment="Center" VerticalAlignment="Center">  
                <Path.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="0.9988821683858975" ScaleY="1.0011190825599667"/>  
                        <SkewTransform AngleX="0" AngleY="0.00040711974438067955"/>  
                        <RotateTransform Angle="90.181796553963139"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </Path.RenderTransform> 
            </Path> 
            <Path Stretch="Fill" StrokeLineJoin="Miter" x:Name="PurplePiece" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Stroke="{DynamicResource GradientBorderStroke}" Height="52.469" RenderTransformOrigin="0.5,0.5" Width="36.76" Canvas.Left="257.761" Canvas.Top="233.304" Fill="{DynamicResource PurplePiece}" HorizontalAlignment="Center" VerticalAlignment="Center">  
                <Path.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="0.99888262559659469" ScaleY="1.0011186243255934"/>  
                        <SkewTransform AngleX="0" AngleY="-0.0026254287111697749"/>  
                        <RotateTransform Angle="-91.172688019142583"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </Path.RenderTransform> 
            </Path> 
            <Path Stretch="Fill" StrokeLineJoin="Miter" x:Name="DarkBluePiece" Data="M71.54224,0.5 L71.54234,99.791275 C71.573361,99.896355 71.578381,100.00102 71.54234,100.10216 L71.54234,100.5 71.485195,100.47617 C71.505703,100.57124 71.478886,100.65421 71.44566,100.7349 69.77686,104.78689 52.571671,101.5429 33.016682,93.489326 13.461694,85.435852 -1.0379992,75.622482 0.63074228,71.570595 L1.1188309,71.136131 0.79233885,71 71.54224,0.5 z" Stroke="{DynamicResource GradientBorderStroke}" Height="52.469" RenderTransformOrigin="0.5,0.5" Width="36.76" Canvas.Left="262.669" Canvas.Top="209.192" Fill="{DynamicResource DarkBluePiece}" HorizontalAlignment="Center" VerticalAlignment="Center">  
                <Path.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="0.99945851732890456" ScaleY="1.000541776033429"/>  
                        <SkewTransform AngleX="0" AngleY="-0.064050591119993783"/>  
                        <RotateTransform Angle="-135.88597413063761"/>  
                        <TranslateTransform X="0" Y="0"/>  
                    </TransformGroup> 
                </Path.RenderTransform> 
            </Path> 
        </Canvas> 


    ANy help is appreciated
    Friday, July 18, 2008 2:29 AM

All replies

  • Figured it out. just grouped it into a grid and animated the grid.

    jw
    Friday, July 18, 2008 2:52 AM