xaml - 使用 StrokeDashArray 的均匀间隔破折号

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 - 数学圆周率 (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

您可以从 blend 中获取 r 的值，实际宽度和高度将写在 Width 和 Height 框中的括号中 - 除以 2。根据您提供的详细信息，我猜半径是 102.55。最后的笔划破折号数组是:

StrokeDashArray="1,2.58"

对于您的第一点，答案是:视情况而定。如果您的芯片在应用程序的整个生命周期中都是相同的 - 这是最好的方法。它为您在外部提供了轻微的曲率，以使“正方形”与芯片的外轮廓齐平，并且需要在设计时进行一次性计算。

即使您有不同尺寸的芯片，这也可能是实现芯片图形的最佳方式。前提是你可以将它设计成固定大小，然后将其粘贴到 ViewBox 中，它仍然看起来不错。

如果需要可变大小并且 View 框路由不起作用 - 还有另一种实现方式(因为绑定(bind)到 ActualWidth\ActualHeight 属性时 Silverlight 失败) - 使用 Border s 保存矩形。但它打开了一个全新的蠕虫 jar 头，这个答案已经足够长了。 :)