Geek asks and answers

Evenly spaced dashes using StrokeDashArray

I am trying to create a poker chip, such as here: http://www.casinowholesalers.com/shop/product_info.php?cPath=57&products_id=379 using Expression Blend 4 for WP7.1 Silverlight 4 application.

I am trying to create six white “boxes” on the edge of the chip (now ignoring the cubes and the inner dashed line). The way I did this was two creating two ellipses: one without a stroke, the other the same size, but with a stroke of 24, the color is white and the StrokeDashArray is up to 1.8 (this is not "1 8", this is actually 1.8 without a second value ) It looks pretty close to uniform size and spacing (but not quite); I found it through trial and error. XAML is below.

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Ellipse Fill="#FFC83838" Margin="112,253,128,275" Grid.Row="1" Stroke="#FFC83838" StrokeThickness="3"/>
    <Ellipse Fill="#FFC83838" Margin="112,253,128,275" Grid.Row="1" Stroke="White" StrokeThickness="30" StrokeDashArray="1.79" StrokeDashOffset="6" RenderTransformOrigin="0.5,0.5"/>
</Grid>

I have two questions:

  • Is there a better way to create this shape besides two ellipses?
  • How can I mathematically determine what value of a StrokeDashArray should be such that the dashes are evenly distributed and scattered instead of using trial and error?
+5
source share
1 answer

I will start with the second point.

First, internal logic StrokeDashArrayis explained here . The important point is that the dash stroke array is not expressed in pixels, it depends on the thickness of the stroke to get the final pixel value for each number in the array.

So, for the mathematical part, let's define some variables:

  • S is the visible part of the stroke (the same as in the link).
  • G is the invisible part of the stroke (the same as in the link).
  • r - . .
  • n - S + G, . .
  • T -
  • p - pi (3.14...)

, :

2*p*r = n*(T*S+T*G)


S+G = 2pr/nT

, , , S = 1, , n = 6, 30 T = 30. G :

G = 2pr/180 - 1

r blend, Width Height - . , , , 102,55. :

StrokeDashArray="1,2.58"

: . - . , "" , .

, . , , ViewBox, .

, - ( Silverlight , ActualWidth\ActualHeight) - Border, . , .:)

+11

More articles:


All Articles