Question

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

我正在尝试在芯片边缘创建六个白色“盒子”（暂时忽略骰子图像和内部虚线）。我这样做的方法是两个创建两个椭圆，一个没有笔划，另一个是完全相同的大小，但是笔划为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>

我想我有两个问题：

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

Answer 1

我将从第二点开始。

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

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

S - 笔划的可见部分（与链接相同）。
G - 笔划的不可见部分（与链接中的相同）。
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，你决定厚度为30px所以T = 30。这为您提供了G的值：

G = 2pr/180 - 1

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

StrokeDashArray="1,2.58"

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

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

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

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

1 个答案: