5

我正在尝试使用 Expression Blend 4 为 WP7.1 Silverlight 4 应用程序创建一个像这里的扑克筹码：http ://www.casinowholesalers.com/shop/product_info.php?cPath=57&products_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 值应该是什么，以便破折号均匀分布和调整大小，而不是使用反复试验？
4

1 回答 1

12

我将从第二点开始。

首先，这里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

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

StrokeDashArray="1,2.58"

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

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

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

于 2012-05-29T17:58:58.690 回答