2017-01-20 4 views
1

GeometryGroupを使用して円の中心にシンボルを描画しています。WPF GeometryGroup内のパスを正しく整列させるにはどうすればよいですか?

以下の例は、これを試してみる際の私の試みの1つを示しています。これは、彼らがで交差するように見えるんがしかし、3行は、同じエンドポイントを持っていないレンダリングされる

<Grid> 
    <Path Stroke="Black" StrokeThickness="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True"> 
     <Path.Data> 
      <GeometryGroup> 
       <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/> 
       <PathGeometry Figures="M 32,32 L 32,19 Z"/> 
       <PathGeometry Figures="M 32,32 L 19,32 Z"/> 
       <PathGeometry Figures="M 32,32 L 19,19 Z"/> 
      </GeometryGroup> 
     </Path.Data> 
    </Path> 
</Grid> 

:それは起源の同じ地点から出発し3本の直線(32,32)を備えてい32,32のこの中心点。

enter image description here

私は1つの図に、これらの同じ3つの行を組み合わせる場合:

<Grid> 
    <Path Stroke="Black" StrokeThickness="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True"> 
     <Path.Data> 
      <GeometryGroup> 
       <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/> 
       <PathGeometry Figures="M 32,32 L 32,19 M 32,32 L 19,32 M 32,32 L 19,19 Z"/> 
      </GeometryGroup> 
     </Path.Data> 
    </Path> 
</Grid> 

レンダリング結果が異なるだけでなく、奇妙に見える:第三(対角線)の行は、他の起源に交差されています2つは原点で終わり、19のx座標とy座標は一致しません。

enter image description here

なぜ、この出来事とどのように私はこの問題を解決することができますがありますか?

+0

私は何かを考え出しました。 'StrokeLineJoin =" Round "'やStrokeMiterLimit = "1" 'を追加する必要があります。 – Alex

+0

自分の質問に対する回答としてコメントを投稿する必要があります。 –

+0

@EriawanKusumawardhono合意しました、それは計画でした。私は現在、(解決策に基づいて)この質問が重複しているか、既存の質問/回答があるかどうかをチェックしています。 – Alex

答えて

1

観測されたレンダリングの振る舞いは、主に、Shape.StrokeMiterLimitの値のデフォルト値(10であり、したがって、行に使用されるStrokeThicknessの10倍)に起因すると考えられます。

これにより、線のレンダリングされた終点位置での丸めとジャンプが発生します。

私の最初の例(3つの別々の図形線)と2番目の例(同じ3行を組み合わせた1つの図形図)では、このように異なるレンダリング結果が生じる理由は説明できません。

それでも、私は以下を使用して私の問題を解決しました:

<Grid> 
    <Path Stroke="Black" StrokeThickness="1" StrokeLineJoin="Round" StrokeMiterLimit="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True"> 
     <Path.Data> 
      <GeometryGroup> 
       <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/> 
       <PathGeometry Figures="M 32,32 L 32,16 M 32,32 L 16,32 M 32,32 L 16,16 Z"/> 
      </GeometryGroup> 
     </Path.Data> 
    </Path> 
</Grid> 

以下の(正しい)で結果をレンダリングする:同様のソリューションと

enter image description here

同様の問題がconverting svg to xamlについて報告し、関連する質問で:weird issue when drawing a forth and back path in wpf

関連する問題