在WPF設計工具Blend2中製作立方體圖片效果
--------------------------------------------------------------------------------
引用時請保留以下資訊：
大可山 [MSN:a3news(AT)hotmail.com]
http://www.zpxp.com 蘿蔔鼠線上圖形影象處理
--------------------------------------------------------------------------------
還是先看效果:
製作步驟:
(1)在專案選單下按增加已存在項(Project -> Add Existing Item),在對話方塊中選擇你的圖片,此時在右邊Project專案中將新增一個檔案項顯示;
(2)你可以將它直接拖入設計檢視內部,之後,在選中圖片的情況下,你需要根據你的要求調整圖片的大小,調整方法:
a.在右邊屬性選項卡(Properties)中,輸入寬度和高度(預設為Auto,自動)
b.在設計檢視中直接拖動四周的操作方塊"把柄"以改變圖片的大小和位置.
提醒:
(i)直接拖動圖片周圍的把柄,圖片將成比例縮放;按住Shift鍵同時拖動,可以單向不成比例地改變圖片大小;
(ii)按住Alt鍵同時拖動,則將以目標中心點(預設是物體的中心,但也可以改變它)成比例改變;也可以按住Ctrl鍵拖動,具體效果你自行測試.當然,你還可以同時按住Shift, Ctrl, Alt鍵後拖動,具體結果你自己測試.
c.將你的滑鼠在把柄周圍移動時,你會發現除了用於改變橫縱向大小的上下左右箭頭標記外,還有可用於圖片旋轉或傾斜的標記,如果你需要旋轉和使圖片傾斜為平行四邊形狀,此時按下滑鼠右鍵拖拉它.
提示:你可以同時按住Shift,Ctrl, Alt之一或其組合,產生你想要的圖片效果.
(3)重複步驟(2),最終得到如上面所示效果的圖片.
<Grid x:Name="LayoutRoot">
<Image RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="9.353,103.491,0,2.999" Width="300.273" Source="200706126569517.jpg" Stretch="Fill">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image Stretch="Fill" RenderTransformOrigin="0.5,0.5" Margin="309.623,103.71,176.075,2.78" Source="200706126569517.jpg">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="-33.180865458091745"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="-47.942"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image RenderTransformOrigin="0.5,0.5" Stretch="Fill" HorizontalAlignment="Left" Margin="9.353,8,0,0" VerticalAlignment="Top" Width="300.273" Height="95.491" Source="200706126569517.jpg">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="-56.803" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="72.972" Y="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Window>
將上面的圖片中的兩張換為另兩張圖片,顯示效果如下圖:
再將它們全部選中,點選選單物體(Object) -> 加入組...(Group Into) -> 邊框(Border),然後旋轉它,再對正面圖片及右側面的圖片加上立體陰影效果,最後得到下圖:
得到的XAML程式碼:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Transform3D.TransoformImage3D"
x:Name="Window"
Title="TransoformImage3D"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Border OpacityMask="{x:Null}" RenderTransformOrigin="0.5,0.5" Margin="56.588,29.547,181.438,32.495" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="1,1,1,1">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="18.587"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Border.RenderTransform>
<Grid>
<Image RenderTransformOrigin="0.5,0.5" Source="200706126569517.jpg" Stretch="Fill" Margin="0,95.491,146.299,0.219">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image Stretch="Fill" RenderTransformOrigin="0.5,0.5" Source="20070520023537779.jpg" HorizontalAlignment="Right" Margin="0,95.71,0,0" Width="146.302">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="-33.180865458091745"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="-47.942"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image RenderTransformOrigin="0.5,0.5" Stretch="Fill" Height="95.491" Source="20070520024538654.jpg" Margin="0,0,146.299,0" VerticalAlignment="Top">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="-56.803" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="72.972" Y="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Border>
<Rectangle OpacityMask="{x:Null}" RenderTransformOrigin="0.5,0.5" Margin="272.015,194.182,215.231,-33.09" Stroke="{x:Null}">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="-33.008"/>
<RotateTransform Angle="18.587"/>
<TranslateTransform X="25.521" Y="-75.892"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.017,0.985" StartPoint="0.582,0.398">
<GradientStop Color="#FF000000" Offset="1"/>
<GradientStop Color="#33FFFFFF" Offset="0.361"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle OpacityMask="{x:Null}" RenderTransformOrigin="0.5,0.5" Stroke="{x:Null}" HorizontalAlignment="Left" Margin="36.351,132.398,0,28.694" Width="245.267">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0.222"/>
<RotateTransform Angle="18.587"/>
<TranslateTransform X="10.446" Y="-31.063"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="-0.189,1.11" StartPoint="0.938,0.139">
<GradientStop Color="#FF000000" Offset="1"/>
<GradientStop Color="#33FFFFFF" Offset="0.361"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>
下一步,可以用C#程式碼控制它!(有空再寫出另一篇文章,如何C#控制WPF中的圖片進構建多面體效果).