Question

I am trying to "draw" a simple cylinder path in Expression Blend 4, and I can't seem to get it quite right.

(1) I started out by adding two Ellipses and one Rectangle:

<Grid Background="Transparent">
    <Ellipse Fill="Transparent" Height="13.25" Margin="352,0,352,227" Stroke="Black" VerticalAlignment="Bottom"/>
    <Rectangle Fill="Transparent" Margin="352,216,352,233" Stroke="Black"/>
    <Ellipse Fill="Transparent" Height="13.25" Margin="352,209.625,352,0" Stroke="Black" VerticalAlignment="Top"/>
</Grid>

enter image description here

(2) Next, I selected the bottom Ellipse and Rectangle, and performed a Combine -> Unite:

<Grid Background="Transparent">
    <Path Data="M0.5,0.5 L47.5,0.5 47.5,47.375 47.5,47.5 47.493931,47.5 47.492325,47.533089 C47.170608,50.84277 36.775898,53.5 24,53.5 11.2241,53.5 0.82939076,50.84277 0.50767487,47.533089 L0.50606853,47.5 0.5,47.5 0.5,47.375 z" Fill="Transparent" Margin="352,216,352,227" Stretch="Fill" Stroke="Black"/>
    <Ellipse Fill="Transparent" Height="13.25" Margin="352,209.625,352,0" Stroke="Black" VerticalAlignment="Top"/>
</Grid>

enter image description here

(3) Next, I selected the top Ellipse and the Path resulting from step 2 and then performed a Path -> Make Compound Path. Then with the direct selection tool, I removed the line cutting though the top Ellipse. It looks good until I try and apply a Fill="Green" to the Path.

<Grid Background="Transparent">
    <Path Fill="Green" Data="M47.5,6.875 L47.5,53.75 47.5,53.875 47.493931,53.875 47.492325,53.908089 C47.170608,57.21777 36.775898,59.875 24,59.875 11.2241,59.875 0.82939076,57.21777 0.50767487,53.908089 L0.50606853,53.875 0.5,53.875 0.5,53.75 0.5,6.875 M47.5,6.625 C47.5,10.007744 36.978692,12.75 24,12.75 11.021308,12.75 0.5,10.007744 0.5,6.625 0.5,3.2422559 11.021308,0.5 24,0.5 36.978692,0.5 47.5,3.2422559 47.5,6.625 z" Margin="352,209.625,352,227" Stretch="Fill" Stroke="Black"/>
</Grid>

enter image description here

I've tried various operations, but I can't for the life of me figure out how to get a cylindrical Path where I can apply a Fill to the entire thing.

Was it helpful?

Solution

Don't know how to do that in Blend, but that figure could be made up of two arcs for (two halves of) the upper ellipse, one line down, one arc for the lower half ellipse, one line up and a final arc for half of the upper ellipse:

<Path Stroke="Black" Fill="LightGreen" Stretch="Fill" Data="
    M0,0
    A50,10 0 0 0 100,0
    A50,10 0 0 0 0,0 
    M100,00 L100,100
    A50,10 0 0 1 0,100
    L0,0
    A50,10 0 0 0 100,0" />

OTHER TIPS

Is there a way to make it tilted tho? I am trying to shift this to give it an near-isometric look, but can't quite figure it out. Would the way to go be to have the circle shifted? So that the sides are at 10 and 4 or similar (as on a clock)?

Been working on this, but I either get an overlap in the bottom left, or some pixels outside of the circle.

Where the circles meet the lines are not completely aligned, and I can

<Path Stroke="Black" Fill="AliceBlue" Data="
              M 0 0
              A 45,40 0 0 0 100,0 
              A 45,40 0 0 0 0,0 
              L 15,-100
              A 45,40 0 0 1 115,-100
              L 100,0
              A 45,40 0 0 0 0,0
              "/>

EDIT: I more or less managed now, some minor tweaks and it should be there, the trick was to rotate the circles before adding the lines.

Improved version

            <Path Stroke="Black" Fill="AliceBlue" Data="
              M 0 0
              A 45,40 0 0 0 100,45 
              A 45,40 0 0 0 0,0 
              L 60,-100
              A 45,40 0 0 1 160,-60
              L 100,45
               A 45,40 0 0 0 0,0
              "/>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top