--------------------------------------------------------------------------------
引用时请保留以下信息：
大可山 [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),最终得到如上面所示效果的图片.
贴出最终的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">
<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中的图片进构建多面体效果).
此样式的灵感来源于萝卜鼠在线图形图像处理: http://www.zpxp.com/ZPWeb/qqaaweb/ImageEffects/CubePhoto/CubePhotoSetting.aspx