均勻間隔的筆畫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

回答

相關問題