2011-05-28 80 views
5

我正在爲WPF中的AR Drone Quadcopter製作接口。創建高級HUD

我neen我的HUD一些東西,使其可用。

一個在HUD上更先進的控制是人工地平儀,它告訴飛行員飛船的當前對齊到地平線。

我有這些3周的PNG

The background

outliner 1

outliner 3

第一圖像我將移動(工藝的當前間距)和旋轉(的當前卷工藝)。

我會把第二圖像在第一,這一次將只圍繞中心軸旋轉,它已經在蜱一定的程度,這將更加可視化工藝的卷。

最後一個我會把在第二之上,這個形象只是一種視覺改進。

然後我想掩蓋第一個圖像,讓您只看到最新的圖像圈2

最後但不是裏面至少我想一個文本塊添加到它,並顯示當前高度

的結果會是這個樣子

Result

我知道如何旋轉和移動的圖像,但我要如何放置在彼此頂部圖像,以及如何掩蓋了第一個形象呢?

編輯:感謝奔我這一步得到:

Rotate no translate

但我還需要翻譯的圖像Y位置(飛機的間距)

With translate

當我添加翻譯變換時,我還翻譯了剪輯(蒙版),如何在不移動蒙版的情況下翻譯圖像?

+0

你介意共享代碼? :) 謝謝! – 2013-10-31 00:41:13

+0

它基本上是你在我的回答中看到的代碼 – Anders 2013-10-31 07:22:22

回答

4

一個小樣本,你如何使用DrawingGroupsClipGeometry裏面。

<Grid> 
    <Image Source="Images\Background.jpg" /> 

    <Image> 
    <Image.Source> 
     <DrawingImage> 
     <DrawingImage.Drawing> 
      <DrawingGroup> 
      <DrawingGroup> 
       <!-- You can rotate a DrawingGroup --> 
       <DrawingGroup.Transform> 
       <RotateTransform Angle="-15" CenterX="50" CenterY="50" /> 
       </DrawingGroup.Transform> 

       <ImageDrawing ImageSource="Images\last.png" Rect="0,0,100,100" /> 
       <DrawingGroup.ClipGeometry> 
       <EllipseGeometry Center="50,50" RadiusX="25" RadiusY="25" /> 
       </DrawingGroup.ClipGeometry> 
      </DrawingGroup> 

      <DrawingGroup> 
       <ImageDrawing ImageSource="Images\middle.png" Rect="0,0,100,100" /> 
       <ImageDrawing ImageSource="Images\outer.png" Rect="0,0,100,100" /> 
      </DrawingGroup> 
      </DrawingGroup> 
     </DrawingImage.Drawing> 
     </DrawingImage> 
    </Image.Source> 
    </Image> 
</Grid> 
+0

酷,所以last.png是第0層的第一個圖像,我將旋轉?看起來整個事情會隨代碼一起旋轉?今晚晚些時候將不得不嘗試。謝謝! – Anders 2011-05-29 10:04:30

+0

是的,在該DrawingGroup中只有一個圖像('last.png')。我們在這個組上應用一個裁剪幾何(在這種情況下是一個圓)和一個變形。然後我們在這個組的頂部渲染另外兩個圖像。 (如果需要,您可以移除包含兩個圖像的DrawingGroup。)並且我建議您應該在RotateTransorm的Angle上使用綁定。 – Ben 2011-05-29 10:18:43

+0

是的,我現在看到它。我錯過了它是在一個單獨的小組..我今晚會試試這個,如果我找到時間並回復你..謝謝你的幫助! – Anders 2011-05-29 11:54:32

0

我累了昨晚:d 爲了讓背景旋轉和平移,但不削波只是把背景子組剪取組...現在它的作品!

<Image Width="240" Height="240"> 
     <Image.Source> 
      <DrawingImage> 
       <DrawingImage.Drawing> 
        <DrawingGroup> 
         <DrawingGroup> 
          <DrawingGroup> 
           <DrawingGroup.Transform> 
            <TransformGroup> 
             <RotateTransform Angle="-15" CenterX="120" CenterY="120" /> 
             <TranslateTransform Y="-20" /> 
            </TransformGroup> 
           </DrawingGroup.Transform> 

           <ImageDrawing ImageSource="Images\pNxVK.png" Rect="0,0,240,240" /> 
          </DrawingGroup> 

          <DrawingGroup.ClipGeometry> 
           <EllipseGeometry Center="120,120" RadiusX="60" RadiusY="60"> 
           </EllipseGeometry> 
          </DrawingGroup.ClipGeometry> 
         </DrawingGroup> 

         <DrawingGroup> 
          <ImageDrawing ImageSource="Images\zUr8D.png" Rect="0,0,240,240" /> 
          <ImageDrawing ImageSource="Images\XPZW9.png" Rect="0,0,240,240" /> 
         </DrawingGroup> 
        </DrawingGroup> 
       </DrawingImage.Drawing> 
      </DrawingImage> 
     </Image.Source> 
    </Image>