均匀间隔的笔画DashArray

我正在尝试创建一个类似于此处的扑克筹码：http://www.casinowholesalers.com/shop/product_info.php?cPath=57&products_id=379使用Expression Blend 4作为WP7.1 Silverlight 4应用程序。均匀间隔的笔画DashArray

我试图在芯片边缘创建六个白色的“盒子”（忽略了现在的骰子图像和内部虚线）。我做的方式是两个创建两个椭圆，一个没有笔画，另一个是完全相同的大小，但笔画为24，颜色为White，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的值应该如何，因此破折号的间隔和大小是均匀的，而不是使用试验和错误？

来源

2012-05-29 Jeff

根据你在做什么（你没有说过），它可能更容易，更快，并使用更少的内存来创建图像并使用它们。 –

@MattLacey - 我基本上正在研究赌场游戏的一个版本，所以我将在各处创建筹码实例：在用户界面的底部，这将象征用户“银行”，当他们点击/点击屏幕下注时，我需要创建一个实例，如果用户赢了，我需要在用户界面中为它们生成它们。我的计划是将其创建为用户控件并根据需要创建新的实例。我很乐意提供建议。我已经使用了其他的图像 - “不要来”投注和艰难的投注，例如，我用骰子的图像。 – Jeff

我会从第二点开始。

首先，StrokeDashArray的内部逻辑被解释为here。重要的一点是，笔划短阵列不是以像素表示的，它取决于笔划厚度以获取数组中每个数字的最终像素值。

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

的S - 行程（相同的链接）的可见光部分。
G - 笔画的不可见部分（与链接中的相同）。
r - 芯片的半径。它将是实际宽度的一半或实际高度的一半。
n - 你想要的S + G的重复次数。整数。
笔 - 笔画粗细
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的值，实际宽度和高度将被写在括号中的宽度和高度框中 - 除以二。从你提供的细节来看，我估计半径是102.55。最终的笔画破折号阵列是：

StrokeDashArray="1,2.58"

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

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

如果需要变量大小和视图框路径不起作用 - 还有另一种实现它的方法（因为Silverlight在绑定到ActualWidth \ ActualHeight属性时失败） - 使用Border s来保存矩形。但它打开了一个全新的蠕虫罐，这个答案足够长。 :)

来源

2012-05-29 17:58:58 XAMeLi

谢谢你杰出的答案 - 我欣赏细节！我想我错过了有关笔划厚度和破折号/间隙长度之间关系的文档中的部分。鉴于此，这使得我很清楚为什么我无法准确找到我想去的地方。 – Jeff

此外，它将始终是相同尺寸的芯片，所以我会按照我开始的步骤去做，并且帮助我完成。 – Jeff

均匀间隔的笔画DashArray

回答

相关问题