Ellipse zum Clippen eines Paths nutzen

Question

Hallo Community,

eine Frage mal wieder zu Silverlight :)

Ich habe mehrere Paths in einem Kreis angeordnet. Diese habe ich jeweils in ein Canvas eingebettet. Grund dafür is folgender: Ich habe die Paths transformiert und dazu den Drehpunkt verschoben. Jetzt möchte ich die Paths aber an einem anderen Drehpunkt rotieren. Deswegen Canvas drumherum.

Das XAML sieht wie folgt aus:

<Grid x:Name="LayoutRoot" Background="White">
        <Ellipse x:Name="ellDiaphragm" HorizontalAlignment="Center" Height="250" Stroke="Black" VerticalAlignment="Center" Width="250" StrokeThickness="2"/>
        <Canvas Margin="183,75,110,166" RenderTransformOrigin="0.162,0.002">
            <Path x:Name="pathLamelle1" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925"/>
        </Canvas>
        <Canvas Margin="183,75,110,166" RenderTransformOrigin="0.984,0.237">
            <Path x:Name="pathLamelle2" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="108.049" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157000005245209,0.787000000476837" Height="158.925">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="45" TranslateX="-0.031454390218442541" TranslateY="0.075934629722652858"/>
                </Path.RenderTransform>
            </Path>
        </Canvas>
        <Canvas Margin="183,75,61,107" RenderTransformOrigin="0.904,0.581">
            <Path x:Name="pathLamelle3" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="90"/>
                </Path.RenderTransform>
            </Path>
        </Canvas>
        <Canvas Margin="183,75,86,94" RenderTransformOrigin="0.786,0.924">
            <Path x:Name="pathLamelle4" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="135"/>
                </Path.RenderTransform>
            </Path>
        </Canvas>
        <Canvas Margin="183,75,110,69" RenderTransformOrigin="0.146,0.974">
            <Path x:Name="pathLamelle5" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="180"/>
                </Path.RenderTransform>
            </Path>
        </Canvas>
        <Canvas Margin="183,75,110,166" RenderTransformOrigin="-0.67,1.331">
            <Path x:Name="pathLamelle6" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" HorizontalAlignment="Left" Height="158.925">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="-135"/>
                </Path.RenderTransform>
            </Path>
        </Canvas>
        <Canvas Margin="183,75,110,166" RenderTransformOrigin="-1.006,0.78">
            <Path x:Name="pathLamelle7" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="270"/>
                </Path.RenderTransform>
            </Path>
        </Canvas>
        <Canvas Margin="183,75,110,166" RenderTransformOrigin="-0.657,0.226">
            <Path x:Name="pathLamelle8" Data="M405.23941,156.91438 C415.03473,183.38736 346.1969,278.8576 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="315"/>
                </Path.RenderTransform>
            </Path>
        </Canvas>
    </Grid>

Nun möchte ich, dass sämtliche Paths abgeschnitten werden, sobald sie aus dem Kreis ragen. Das heißt ich drehe einen Path und die Ecke ragt über den Kreis hinaus, den die Paths zusammen bilden. Diese Ecke möchte ich visuell abschneiden. Kann mir da jemand helfen?

Answer 1

Eine einfache Lösung ist, ein Imagebrush mit einem transparenten “Loch” darüberzulegen.

 

--
Viele Gruesse
Peter

Answer 2

Ist das die einzige Variante? Funktioniert, aber etwas eleganter fände ich gut oder ist das mit Silverlight nicht machbar?

Answer 3

Schau dir mal dieses Video an:

http://www.silverlight.net/archives/videos/working-with-clipping-paths-in-expression-blend

 

Answer 4

Hallo Gozar15,

dein xaml sieht aus wie die Linse eine Fotoapparats (sorry für die untechnische Bezeichnung). Das erinnert mich an ein Projekt, das ich mal als Sample in die Expression Gallery gestellt habe. Es heiß Just Fun und Du kannst es im Quellcode herunterladen.

In jenem Project habe ich auch mit ClippingPaths gearbeitet. Vielleicht hilft Dir der Quellcode. Wenn ich mich recht erinnere, dann habe ich damals ein Ellipse-Element als Overlay benutzt, das einen ClippingPath für die darunterliegenden Elemente definiert. Mir ist nicht ganz klar, ob Dir das hilft, aber vielleicht ja doch.

Ansonsten beschreib bitte nochmal etwas präziser, was genau von welchem Objekt wann abgeschnitten werden soll. Wenn Du einen dynamischen ClippingPath brauchst, wirst Du wohl um die Verwendung von etwas code behind nicht umhin kommen.

Beste Grüße,

Martin

Answer 5

Danke für die Hilfe! Das habe ich noch etwas angepasst und es funktioniert!

<Grid x:Name="LayoutRoot" Background="White">
        <Ellipse x:Name="ellDiaphragm" HorizontalAlignment="Center" Height="250" Stroke="Black" VerticalAlignment="Center" Width="250" StrokeThickness="2"/>
        <Grid>
            <Grid.Clip>
                <EllipseGeometry Center="200,200"
                         RadiusX="125"
                         RadiusY="125" />
            </Grid.Clip>
            <Canvas x:Name="canvLamelle1" Margin="183,75,110,166" RenderTransformOrigin="0.162,0.002">
                <Path x:Name="pathLamelle1" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925"/>
            </Canvas>
            <Canvas x:Name="canvLamelle2" Margin="183,75,110,166" RenderTransformOrigin="0.984,0.237">
                <Path x:Name="pathLamelle2" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="108.049" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157000005245209,0.787000000476837" Height="158.925">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="45"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas x:Name="canvLamelle3" Margin="183,75,61,107" RenderTransformOrigin="0.904,0.581">
                <Path x:Name="pathLamelle3" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="90"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas x:Name="canvLamelle4" Margin="183,75,86,94" RenderTransformOrigin="0.786,0.924">
                <Path x:Name="pathLamelle4" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="135"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas x:Name="canvLamelle5" Margin="183,75,110,69" RenderTransformOrigin="0.146,0.974">
                <Path x:Name="pathLamelle5" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="180"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas x:Name="canvLamelle6" Margin="183,75,110,166" RenderTransformOrigin="-0.67,1.331">
                <Path x:Name="pathLamelle6" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" HorizontalAlignment="Left" Height="158.925">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="225"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas x:Name="canvLamelle7" Margin="183,75,110,166" RenderTransformOrigin="-1.006,0.78">
                <Path x:Name="pathLamelle7" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="270"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas x:Name="canvLamelle8"  Margin="183,75,110,166" RenderTransformOrigin="-0.657,0.226">
                <Path x:Name="pathLamelle8" Data="M405.23941,156.91438 C410.34323,222.08646 362.45255,290.09943 300.13583,292.04181 C340.14453,245.47372 343.06641,165.61264 317.28674,115 C336.60062,111.87157 382.5639,127.117 405.23941,156.91438 z" HorizontalAlignment="Left" Stretch="Fill" Stroke="#FFA7A7A7" UseLayoutRounding="False" Width="107.365" StrokeEndLineCap="Round" StrokeStartLineCap="Round" Fill="Black" RenderTransformOrigin="0.157,0.787" Height="158.925">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="315"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
        </Grid>
    </Grid>