5

http://www.casinowholesalers.com/shop/product_info.php?cPath=57&products_id=379 WP7.1Silverlight4アプリにExpressionBlend4を使用して、次のようなポーカーチップを作成しようとしています。

チップの端に6つの白い「ボックス」を作成しようとしています（今のところ、サイコロの画像と内側の破線は無視しています）。私が行った方法は、2つの楕円を作成することでした。1つはストロークなし、もう1つはまったく同じサイズですが、ストロークは24、色は白、StrokeDashArrayは1.8（「18」ではありません。実際には1.8（2番目の値なし）。均等なサイズと間隔にかなり近いように見えます（ただし、完全ではありません）。試行錯誤で見つけました。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>

私は2つの質問があると思います：

  1. 2つの楕円を使用する以外に、この形状を作成するためのより良い方法はありますか？
  2. 試行錯誤を使用する代わりに、ダッシュが等間隔でサイズ設定されるように、StrokeDashArray値を数学的に決定するにはどうすればよいですか？
4

1 に答える 1

12

2番目のポイントから始めます。

まず、 の内部ロジック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、6つのギャップがある6つの白い正方形があるのでn = 6で、30pxの厚さを決定したのでT = 30. これにより、G の値は次のようになります。

G = 2pr/180 - 1

ブレンドから r の値を取得できます。実際の幅と高さは、[幅] ボックスと [高さ] ボックスの括弧内に書き込まれます - それを 2 で割ります。あなたが提供した詳細から、半径は 102.55 だと思います。最終的なストローク ダッシュ配列は次のとおりです。

StrokeDashArray="1,2.58"

最初の点については、答えは次のとおりです。アプリケーションの存続期間中、チップが同じである場合、これが最善の方法です。「正方形」をチップの外側の輪郭と同じ高さにするために外側にわずかな曲率が与えられ、設計時に1回の計算が必要です。

チップのサイズが異なる場合でも、これがチップのグラフィックスを実装する最良の方法である可能性があります。ただし、固定サイズでデザインしてから に貼り付けてViewBoxも見栄えがよくなります。

可変サイズが必要で、ビュー ボックス ルートが機能しない場合 - それを実装する別の方法があります (ActualWidth\ActualHeight プロパティにバインドすると Silverlight が失敗するため) -Border長方形を保持する s を使用します。しかし、それはまったく新しいワームの缶を開きます。この答えは十分に長いです. :)

于 2012-05-29T17:58:58.690 に答える