使用StrokeDashArray进行均匀间隔虚张声势

Question

我正在尝试使用Expression Blend 4为WP7.1 Silverlight 4应用程序创建一个像这样的扑克筹码:http://www.casinowholesalers.com/shop/product_info.php？ cPath = 57&product_id = 379.

我正在尝试在芯片边缘创建六个白色"盒子"(暂时忽略骰子图像和内部虚线).我这样做的方法是两个创建两个椭圆,一个没有笔划,另一个是完全相同的大小,但是笔划为24,颜色为白色,StrokeDashArray为1.8(不是"1 8",它实际上是1.8没有第二个值).它看起来非常接近均匀的大小和间隔(但不完全); 我通过反复试验找到了它.XAML在下面.

<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>

我想我有两个问题:

1. 除了使用两个椭圆之外,还有更好的方法来创建这个形状吗？
2. 如何在数学上确定StrokeDashArray值应该是什么,以便破折号均匀分布并且大小而不是使用反复试验？

Answer 1

我将从第二点开始.

首先,这里StrokeDashArray解释了内在的逻辑.重要的一点是,笔划虚线阵列不以像素表示,它取决于笔划粗细以获得阵列中每个数字的最终像素值.

因此,对于数学部分,我们定义一些变量:

1. S - 笔划的可见部分(与链接相同).
2. G - 笔划的不可见部分(与链接中的相同).
3. r - 芯片的半径.它将是实际宽度的一半或实际高度的一半.
4. n - 您想要的S + G重复次数.整数.
5. T - 行程厚度
6. p - 数学pi(3.14 ......)

所以我们有:

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

要么,

S+G = 2pr/nT

在你的情况下,以及我从芯片的图像看到的,笔画的可见部分是正方形,因此S = 1,有六个白色正方形,有六个间隙,所以n = 6,你决定厚度为30px所以T = 30.这为您提供了G的值:

G = 2pr/180 - 1

您可以从"混合"中获取r的值,实际的宽度和高度将写在"宽度"和"高度"框中的括号中 - 将其除以2.根据您提供的详细信息,我猜半径为102.55.最后的笔划数组是:

StrokeDashArray="1,2.58"

对于你的第一点,答案是:它取决于.如果您的芯片在应用程序的整个生命周期内都是相同的 - 这是最好的方法.它为您提供外部的轻微弯曲,使"方形"与芯片的外轮廓齐平,并且需要在设计时间内进行一次性计算.

即使您的芯片尺寸不同,这也许是实现芯片图形的最佳方式.提供,您可以设计固定大小,然后将其粘贴到一个ViewBox,它看起来仍然很好.

如果需要可变大小并且视图框路由不起作用 - 还有另一种方法可以实现它(因为Silverlight在绑定到ActualWidth\ActualHeight属性时失败) - Borders用于保存矩形.但它打开了一整套新的蠕虫病毒,这个答案足够长了.:)