转帖|其它|编辑:郝浩|2010-12-16 17:25:46.000|阅读 534 次
概述:本例中使用Viewport2DVisual3D来呈现2D的Border,Border中包含了Image,对Viewport2DVisual3D使用了RotateTransform3D模型变换,以使Viewport2DVisual3D向左或者向右倾斜45度角,为使处于左右两端的Image能和背景图融为一体,使用LinearGradientBrush为这两幅Image设置了渐变的透明蒙板OpacityMask。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
本例中使用Viewport2DVisual3D来呈现2D的Border,Border中包含了Image,对Viewport2DVisual3D使用了RotateTransform3D模型变换,以使Viewport2DVisual3D向左或者向右倾斜45度角,为使处于左右两端的Image能和背景图融为一体,使用LinearGradientBrush为这两幅Image设置了渐变的透明蒙板OpacityMask。
设置垂直倒影主要使用了VisualBrush和ScaleTransform3D,VisualBrush用来反射Image的图像,并将图像填充到GeometryModel3D的Material属性,通过设置ScaleTransform3D元素的属性ScaleY="-1",可变换模型以X轴为坐标向下180度倒置,由于对Image使用了RotateTransform3D变换,因此对反射Image图像的GeometryModel3D也需使用相同的RotateTransform3D变换 ,另外对控件的倒影设置了0.8个值的透明度,以便能清晰的显示2D控件界面并模糊控件界面的倒影
在呈现2D控件的时候,多次使用了Viewport2DVisual3D,但在反射控件界面倒影的时候,仅使用了一个ModelVisual3D元素,ModelVisual3D元素的Content属性值被设置为一个Model3DGroup元素,Model3DGroup是一个集合类,用来打包GeometryModel3D ,而2D Image的界面倒影图像最终填充到GeometryModel3D的Material属性上,因此在反射2D控件界面倒影的时候,使过Model3DGroup来组合GeometryModel3D ,只需要定义一个ModelVisual3D则成.
呈现2D控件
1 <Viewport3D x:Name="viewPort3D" IsHitTestVisible="False" RenderOptions.EdgeMode="Aliased"
2 ClipToBounds="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
3 <Viewport3D.Camera>
4 <PerspectiveCamera Position="-0.3,-0.5,9" />
5 </Viewport3D.Camera>
6 <ModelVisual3D>
7 <ModelVisual3D.Content>
8 <AmbientLight Color="White"/>
9 </ModelVisual3D.Content>
10 </ModelVisual3D>
11 <Viewport2DVisual3D x:Name="viewport2DVisual3D0" Geometry="{StaticResource geometry1}"
12 Material="{StaticResource material}">
13 <Viewport2DVisual3D.Transform>
14 <Transform3DGroup>
15 <Transform3DGroup>
16 <RotateTransform3D>
17 <RotateTransform3D.Rotation>
18 <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
19 </RotateTransform3D.Rotation>
20 </RotateTransform3D>
21 <TranslateTransform3D OffsetX="-2.12" OffsetY="0" OffsetZ="0" />
22 </Transform3DGroup>
23 </Transform3DGroup>
24 </Viewport2DVisual3D.Transform>
25 <Viewport2DVisual3D.Visual>
26 <Border Style="{StaticResource border}">
27 <Image Source="Images\050817goodfeng14.jpg" Opacity="1" />
28 </Border>
29 </Viewport2DVisual3D.Visual>
30 </Viewport2DVisual3D>
31 <Viewport2DVisual3D x:Name="viewport2DVisual3D1"
32 Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
33 <Viewport2DVisual3D.Transform>
34 <Transform3DGroup>
35 <RotateTransform3D>
36 <RotateTransform3D.Rotation>
37 <AxisAngleRotation3D Axis="0,1.,0" Angle="45"/>
38 </RotateTransform3D.Rotation>
39 </RotateTransform3D>
40 <TranslateTransform3D OffsetX="0.71" OffsetY="0" OffsetZ="0" />
41 </Transform3DGroup>
42 </Viewport2DVisual3D.Transform>
43 <Viewport2DVisual3D.Visual>
44 <Border Style="{StaticResource border}">
45 <Image Source="Images\051027nature10.jpg" Opacity="1"/>
46 </Border>
47 </Viewport2DVisual3D.Visual>
48 </Viewport2DVisual3D>
49 <Viewport2DVisual3D x:Name="viewport2DVisual3D2"
50 Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
51 <Viewport2DVisual3D.Transform>
52 <Transform3DGroup>
53 <RotateTransform3D>
54 <RotateTransform3D.Rotation>
55 <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
56 </RotateTransform3D.Rotation>
57 </RotateTransform3D>
58 <TranslateTransform3D OffsetX="0.71" OffsetY="0" OffsetZ="0" />
59 </Transform3DGroup>
60 </Viewport2DVisual3D.Transform>
61 <Viewport2DVisual3D.Visual>
62 <Border Style="{StaticResource border}" >
63 <Image Source="Images\051027nature11.jpg" Opacity="1" />
64 </Border>
65 </Viewport2DVisual3D.Visual>
66 </Viewport2DVisual3D>
67 <Viewport2DVisual3D x:Name="viewport2DVisual3D3"
68 Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
69 <Viewport2DVisual3D.Transform>
70 <Transform3DGroup>
71 <RotateTransform3D>
72 <RotateTransform3D.Rotation>
73 <AxisAngleRotation3D Axis="0,1.,0" Angle="45"/>
74 </RotateTransform3D.Rotation>
75 </RotateTransform3D>
76 <TranslateTransform3D OffsetX="3.54" OffsetY="0" OffsetZ="0" />
77 </Transform3DGroup>
78 </Viewport2DVisual3D.Transform>
79 <Viewport2DVisual3D.Visual>
80 <Border Style="{StaticResource border}" >
81 <Image Source="Images\051123Webshots16.jpg" Opacity="1">
82 <Image.OpacityMask>
83 <LinearGradientBrush EndPoint="0.012,0.5" StartPoint="0.994,0.5">
84 <GradientStop Color="#00000000" Offset="0"/>
85 <GradientStop Color="#FFFFFFFF" Offset="1"/>
86 </LinearGradientBrush>
87 </Image.OpacityMask>
88 </Image>
89 </Border>
90 </Viewport2DVisual3D.Visual>
91 </Viewport2DVisual3D>
92 <Viewport2DVisual3D x:Name="viewport2DVisual3D4"
93 Geometry="{StaticResource geometry1}" Material="{StaticResource material}">
94 <Viewport2DVisual3D.Transform>
95 <Transform3DGroup>
96 <RotateTransform3D>
97 <RotateTransform3D.Rotation>
98 <AxisAngleRotation3D Axis="0,1,0" Angle="45"/>
99 </RotateTransform3D.Rotation>
100 </RotateTransform3D>
101 <TranslateTransform3D OffsetX="-2.12" OffsetY="0" OffsetZ="-0" />
102 </Transform3DGroup>
103 </Viewport2DVisual3D.Transform>
104 <Viewport2DVisual3D.Visual>
105 <Border Style="{StaticResource border}">
106 <Image Source="Images\050817goodfeng15.jpg" Opacity="1" >
107 <Image.OpacityMask>
108 <LinearGradientBrush EndPoint="0.994,0.5" StartPoint="0.012,0.5">
109 <GradientStop Color="#00000000" Offset="0"/>
110 <GradientStop Color="#FFFFFFFF" Offset="1"/>
111 </LinearGradientBrush>
112 </Image.OpacityMask>
113 </Image>
114 </Border>
115 </Viewport2DVisual3D.Visual>
116 </Viewport2DVisual3D>
117 </Viewport3D>
界面倒影
1 <Viewport3D x:Name="reflectionViewPort3D" Opacity="0.8" IsHitTestVisible="False"
2 RenderOptions.EdgeMode="Aliased" ClipToBounds="False"
3 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
4 <Viewport3D.Camera>
5 <PerspectiveCamera Position="-0.3,-0.5,9" />
6 </Viewport3D.Camera>
7 <Viewport3D.OpacityMask>
8 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
9 <GradientStop Color="#00000000" Offset="0.55"/>
10 <GradientStop Color="#FFFFFFFF" Offset="0.01"/>
11 </LinearGradientBrush>
12 </Viewport3D.OpacityMask>
13 <ModelVisual3D>
14 <ModelVisual3D.Content>
15 <AmbientLight Color="White"/>
16 </ModelVisual3D.Content>
17 </ModelVisual3D>
18 <ModelVisual3D >
19 <ModelVisual3D.Content>
20 <Model3DGroup x:Name="reflctionRoom">
21 <Model3DGroup.Children>
22 <GeometryModel3D x:Name="reflctionChild0"
23 Geometry="{StaticResource geometry1}" >
24 <GeometryModel3D.Material>
25 <DiffuseMaterial>
26 <DiffuseMaterial.Brush>
27 <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D0, Path=Visual}"/>
28 </DiffuseMaterial.Brush>
29 </DiffuseMaterial>
30 </GeometryModel3D.Material>
31 <GeometryModel3D.Transform>
32 <Transform3DGroup>
33 <RotateTransform3D>
34 <RotateTransform3D.Rotation>
35 <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
36 </RotateTransform3D.Rotation>
37 </RotateTransform3D>
38 <TranslateTransform3D OffsetX="-2.12" OffsetY="2" OffsetZ="0" />
39 <ScaleTransform3D ScaleY="-1"/>
40 </Transform3DGroup>
41 </GeometryModel3D.Transform>
42 </GeometryModel3D>
43 <GeometryModel3D x:Name="reflctionChild1" Geometry="{StaticResource geometry1}" >
44 <GeometryModel3D.Material>
45 <DiffuseMaterial>
46 <DiffuseMaterial.Brush>
47 <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D1, Path=Visual}"/>
48 </DiffuseMaterial.Brush>
49 </DiffuseMaterial>
50 </GeometryModel3D.Material>
51 <GeometryModel3D.Transform>
52 <Transform3DGroup>
53 <RotateTransform3D>
54 <RotateTransform3D.Rotation>
55 <AxisAngleRotation3D Axis="0,1.,0" Angle="45"/>
56 </RotateTransform3D.Rotation>
57 </RotateTransform3D>
58 <TranslateTransform3D OffsetX="0.71" OffsetY="2" OffsetZ="0" />
59 <ScaleTransform3D ScaleY="-1"/>
60 </Transform3DGroup>
61 </GeometryModel3D.Transform>
62 </GeometryModel3D>
63 <GeometryModel3D x:Name="reflctionChild2" Geometry="{StaticResource geometry1}" >
64 <GeometryModel3D.Material>
65 <DiffuseMaterial>
66 <DiffuseMaterial.Brush>
67 <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D2, Path=Visual}"/>
68 </DiffuseMaterial.Brush>
69 </DiffuseMaterial>
70 </GeometryModel3D.Material>
71 <GeometryModel3D.Transform>
72 <Transform3DGroup>
73 <RotateTransform3D>
74 <RotateTransform3D.Rotation>
75 <AxisAngleRotation3D Axis="0,1.,0" Angle="-45"/>
76 </RotateTransform3D.Rotation>
77 </RotateTransform3D>
78 <TranslateTransform3D OffsetX="0.71" OffsetY="2" OffsetZ="0" />
79 <ScaleTransform3D ScaleY="-1"/>
80 </Transform3DGroup>
81 </GeometryModel3D.Transform>
82 </GeometryModel3D>
83 <GeometryModel3D x:Name="reflctionChild3" Geometry="{StaticResource geometry1}" >
84 <GeometryModel3D.Material>
85 <DiffuseMaterial>
86 <DiffuseMaterial.Brush>
87 <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D3, Path=Visual}"/>
88 </DiffuseMaterial.Brush>
89 </DiffuseMaterial>
90 </GeometryModel3D.Material>
91 <GeometryModel3D.Transform>
92 <Transform3DGroup>
93 <RotateTransform3D>
94 <RotateTransform3D.Rotation>
95 <AxisAngleRotation3D Axis="0,1.,0" Angle="45"/>
96 </RotateTransform3D.Rotation>
97 </RotateTransform3D>
98 <TranslateTransform3D OffsetX="3.54" OffsetY="2" OffsetZ="0" />
99 <ScaleTransform3D ScaleY="-1"/>
100 </Transform3DGroup>
101 </GeometryModel3D.Transform>
102 </GeometryModel3D>
103 <GeometryModel3D x:Name="reflctionChild4" Geometry="{StaticResource geometry1}" >
104 <GeometryModel3D.Material>
105 <DiffuseMaterial>
106 <DiffuseMaterial.Brush>
107 <VisualBrush Visual="{Binding ElementName=viewport2DVisual3D4, Path=Visual}"/>
108 </DiffuseMaterial.Brush>
109 </DiffuseMaterial>
110 </GeometryModel3D.Material>
111 <GeometryModel3D.Transform>
112 <Transform3DGroup>
113 <RotateTransform3D>
114 <RotateTransform3D.Rotation>
115 <AxisAngleRotation3D Axis="0,1,0" Angle="45"/>
116 </RotateTransform3D.Rotation>
117 </RotateTransform3D>
118 <TranslateTransform3D OffsetX="-2.12" OffsetY="2" OffsetZ="-0" />
119 <ScaleTransform3D ScaleY="-1"/>
120 </Transform3DGroup>
121 </GeometryModel3D.Transform>
122 </GeometryModel3D>
123 </Model3DGroup.Children>
124 </Model3DGroup>
125 </ModelVisual3D.Content>
126 </ModelVisual3D>
127 </Viewport3D>
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:网络转载