WPF Viewport3D 解决透视模式时窗体模糊

简介: 原文:WPF Viewport3D 解决透视模式时窗体模糊最近折腾Viewport3D玩,遇到了一些诡异的问题,研究一下略有心得,特此和大家分享~ 三维图形概述: https://msdn.microsoft.com/zh-cn/library/ms747437.aspx 概要 三维坐标系         二维图形的 WPF 坐标系将原点定位在呈现区域(通常是屏幕)的左上角。
原文: WPF Viewport3D 解决透视模式时窗体模糊

最近折腾Viewport3D玩,遇到了一些诡异的问题,研究一下略有心得,特此和大家分享~

三维图形概述:

概要

三维坐标系

 
       二维图形的 WPF 坐标系将原点定位在呈现区域(通常是屏幕)的左上角。 在二维系统中,x 轴上的正值朝右,y 轴上的正值朝下。 但是,在三维坐标系中,原点位于呈现区域的中心,x 轴上的正值朝右,但是 y 轴上的正值朝上,z 轴上的正值从原点向外朝向观察者。

照相机

 

 

透视投影和正投影
 

关于TextureCoordinates(纹理坐标):

 
<MeshGeometry3D Positions="-250,-150,0 250,-150,0 250,150,0 -250,150,0"

                TextureCoordinates="0,1 1,1 1,0 0,0"

                TriangleIndices="0,1,2 0,2,3" />

 

 
上面这段 MeshGeometry3D(用于生成3-D形状的三角形基元)对照图2三维坐标系会发现是个从左下角逆时针绘制的矩形。如果要将一个窗体UserControl纹理应用到Viewport2DVisual3D上,我们就需要合理的设置TextureCoordinates(纹理坐标)。对照图1二维坐标系,纹理坐标同样是由左下开始绘制的矩形。这样设置,纹理就可以显示正常了。
 
关于视角和距离的关系:
  
 
含义:
说明
A
视点
 
 
线
说明
BC
查看的目标宽度
bc
展示的视窗宽度
AD
视点到查看目标的距离
ad
视点到视窗的距离
 
 
角度
说明
cAb
视角(FieldOfView)
 
 
结论:
BD/bd=AD/Ad
 
我们如果想看到一个原样大小的窗体,就需要设置我的角cAb为 90。同时设置AD长度为查看目标的 一半宽度
 
 
 
 
好不容易设置好Viewport3D,将UserControl作为窗体的查看对象,却发现虽然窗体大小一致,但是显示出的UserControl字体和控件却很模糊。当我们以3D模型渲染窗体时,WPF应该做了性能优化,然而我并不清楚如何开启高清模式= =。
怎么解决这个问题呢?我试了好久,发现并没有比较简单快捷的解决方法。没办法,只能采取一些小技巧来解决啦。
 
具体思路:
第一步:窗体呈现时,将UserControl实例化后直接呈现到页面最前端的展示面板上,此时Viewport3D内容为空。
第二部:触发页面翻转动画时,将最前的展示面板置空,UserControl实例剪切到Viewport3D里面。
第三步:动画执行完毕后再从Viewport3D里面将UserControl剪切到页面最前端的展示面板中。
 
 示例代码:
<Window x:Class="App3DWindow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:app3DWindow="clr-namespace:App3DWindow"
        xmlns:asyncDelegate="clr-namespace:AsyncDelegate"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow"
        Width="500"
        Height="310"
        AllowsTransparency="True"
        Background="Transparent"
        Loaded="MainWindow_OnLoaded"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        mc:Ignorable="d">
    <Window.Resources>
        <Storyboard x:Key="Turn2ConfigViewStoryboard">
            <Rotation3DAnimationUsingKeyFrames Storyboard.TargetName="containerUIElement3D" Storyboard.TargetProperty="(Visual3D.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)">
                <EasingRotation3DKeyFrame KeyTime="0:0:2">
                    <EasingRotation3DKeyFrame.EasingFunction>
                        <QuinticEase EasingMode="EaseOut" />
                    </EasingRotation3DKeyFrame.EasingFunction>
                    <EasingRotation3DKeyFrame.Value>
                        <AxisAngleRotation3D Angle="180" Axis="0,1,0" />
                    </EasingRotation3DKeyFrame.Value>
                </EasingRotation3DKeyFrame>
            </Rotation3DAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Turn2DownloadViewStoryboard">
            <Rotation3DAnimationUsingKeyFrames Storyboard.TargetName="containerUIElement3D" Storyboard.TargetProperty="(Visual3D.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)">
                <EasingRotation3DKeyFrame KeyTime="0:0:2">
                    <EasingRotation3DKeyFrame.EasingFunction>
                        <QuinticEase EasingMode="EaseOut" />
                    </EasingRotation3DKeyFrame.EasingFunction>
                    <EasingRotation3DKeyFrame.Value>
                        <AxisAngleRotation3D Angle="360" Axis="0,1,0" />
                    </EasingRotation3DKeyFrame.Value>
                </EasingRotation3DKeyFrame>
            </Rotation3DAnimationUsingKeyFrames>
        </Storyboard>
        <!--  相机  -->
        <PerspectiveCamera x:Key="PerspectiveCamera"
                           FieldOfView="90"
                           LookDirection="0,0,-1"
                           NearPlaneDistance="1"
                           Position="0,0,250"
                           UpDirection="0,1,0" />
 
        <OrthographicCamera x:Key="OrthographicCamera"
                            Width="500"
                            LookDirection="0,0,-1"
                            Position="0,0,250"
                            UpDirection="0,1,0" />
    </Window.Resources>
    <Grid Background="Transparent">
        <Viewport3D Margin="0">
            <Viewport3D.Camera>
                <!--  相机  -->
                <PerspectiveCamera x:Name="PerspectiveCamera"
                                   FieldOfView="90"
                                   LookDirection="0,0,-1"
                                   NearPlaneDistance="1"
                                   Position="0,0,250"
                                   UpDirection="0,1,0" />
            </Viewport3D.Camera>
            <Viewport3D.Children>
                <ContainerUIElement3D x:Name="containerUIElement3D">
                    <ContainerUIElement3D.Transform>
                        <Transform3DGroup>
                            <TranslateTransform3D OffsetX="0"
                                                  OffsetY="0"
                                                  OffsetZ="0" />
                            <ScaleTransform3D ScaleX="1"
                                              ScaleY="1"
                                              ScaleZ="1" />
                            <RotateTransform3D d:EulerAngles="0,0,0">
                                <RotateTransform3D.Rotation>
                                    <AxisAngleRotation3D Angle="0" Axis="0,1,0" />
                                </RotateTransform3D.Rotation>
                            </RotateTransform3D>
                            <TranslateTransform3D OffsetX="0"
                                                  OffsetY="0"
                                                  OffsetZ="0" />
                            <TranslateTransform3D OffsetX="0"
                                                  OffsetY="0"
                                                  OffsetZ="0" />
                        </Transform3DGroup>
                    </ContainerUIElement3D.Transform>
 
                    <!--  正面视角  -->
                    <Viewport2DVisual3D x:Name="FrontViewport2DVisual3D">
                        <Viewport2DVisual3D.Transform>
                            <Transform3DGroup>
                                <TranslateTransform3D OffsetX="0"
                                                      OffsetY="0"
                                                      OffsetZ="0" />
                                <ScaleTransform3D ScaleX="1"
                                                  ScaleY="1"
                                                  ScaleZ="1" />
                                <RotateTransform3D d:EulerAngles="0,0,0">
                                    <RotateTransform3D.Rotation>
                                        <AxisAngleRotation3D Angle="0" Axis="0,0,0" />
                                    </RotateTransform3D.Rotation>
                                </RotateTransform3D>
                                <TranslateTransform3D OffsetX="0"
                                                      OffsetY="0"
                                                      OffsetZ="0" />
                                <TranslateTransform3D OffsetX="0"
                                                      OffsetY="0"
                                                      OffsetZ="0" />
                            </Transform3DGroup>
                        </Viewport2DVisual3D.Transform>
                        <Viewport2DVisual3D.Geometry>
                            <MeshGeometry3D Positions="-250,-150,0 250,-150,0 250,150,0 -250,150,0"
                                            TextureCoordinates="0,1 1,1 1,0 0,0"
                                            TriangleIndices="0,1,2 0,2,3" />
                        </Viewport2DVisual3D.Geometry>
                        <Viewport2DVisual3D.Material>
                            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
                        </Viewport2DVisual3D.Material>
                        <Viewport2DVisual3D.Visual>
                            <app3DWindow:DownloadWindow x:Name="DownloadWindowPart"
                                                        Width="500"
                                                        Height="300"
                                                        Background="White"
                                                        SnapsToDevicePixels="True" />
                        </Viewport2DVisual3D.Visual>
                    </Viewport2DVisual3D>
                    <!--  背面视角  -->
                    <Viewport2DVisual3D x:Name="BackViewport2DVisual3D">
                        <Viewport2DVisual3D.Transform>
                            <Transform3DGroup>
                                <TranslateTransform3D OffsetX="0"
                                                      OffsetY="0"
                                                      OffsetZ="0" />
                                <ScaleTransform3D ScaleX="1"
                                                  ScaleY="1"
                                                  ScaleZ="1" />
                                <RotateTransform3D d:EulerAngles="0,0,0">
                                    <RotateTransform3D.Rotation>
                                        <AxisAngleRotation3D Angle="0" Axis="0,0,0" />
                                    </RotateTransform3D.Rotation>
                                </RotateTransform3D>
                                <TranslateTransform3D OffsetX="0"
                                                      OffsetY="0"
                                                      OffsetZ="0" />
                                <TranslateTransform3D OffsetX="0"
                                                      OffsetY="0"
                                                      OffsetZ="0" />
                            </Transform3DGroup>
                        </Viewport2DVisual3D.Transform>
                        <Viewport2DVisual3D.Geometry>
                            <MeshGeometry3D Positions="-250,-150,0 250,-150,0 250,150,0 -250,150,0"
                                            TextureCoordinates="1,1 0,1 0,0 1,0   "
                                            TriangleIndices="0,3,2 0,2,1" />
                        </Viewport2DVisual3D.Geometry>
                        <Viewport2DVisual3D.Material>
                            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
                        </Viewport2DVisual3D.Material>
                        <Viewport2DVisual3D.Visual>
                            <app3DWindow:ProxyConfigView x:Name="ProxyConfigViewPart"
                                                         Width="500"
                                                         Height="300"
                                                         Background="White"
                                                         SnapsToDevicePixels="True" />
                        </Viewport2DVisual3D.Visual>
                    </Viewport2DVisual3D>
                </ContainerUIElement3D>
 
                <ModelVisual3D>
                    <ModelVisual3D.Content>
                        <!--  光源  -->
                        <AmbientLight x:Name="ViewLight" />
                    </ModelVisual3D.Content>
                </ModelVisual3D>
            </Viewport3D.Children>
        </Viewport3D>
        <Grid x:Name="DisplayGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <UserControl x:Name="DisPlayControl"
                         Grid.Row="0"
                         Grid.RowSpan="2" />
            <!--<Border x:Name="Part_Drag"
                    Grid.Row="0"
                    Background="AliceBlue"
                    PreviewMouseLeftButtonDown="DisPlayControl_OnPreviewMouseLeftButtonDown" />-->
        </Grid>
    </Grid>
</Window>
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Animation;
 
namespace App3DWindow
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        /// <summary>
        /// 载入时进行模糊情况特殊处理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
        {
            //return;
            SetDownloadWindowDisplayMode();
            var turn2ConfigViewStoryboard = this.TryFindResource("Turn2ConfigViewStoryboard") as Storyboard;
            if (turn2ConfigViewStoryboard != null)
            {
                turn2ConfigViewStoryboard.Completed += (s, e1) =>
                {//动画执行完成切换展示模式
                    SetConfigViewDisplayMode();
                    SetDownloadWindowTurningMode();
                };
                turn2ConfigViewStoryboard.CurrentTimeInvalidated += (s, e1) =>
                {//动画执行时切换成翻转模式
                    SetDownloadWindowTurningMode();
                };
            };
            var turn2DownloadViewStoryboard = this.TryFindResource("Turn2DownloadViewStoryboard") as Storyboard;
            if (turn2DownloadViewStoryboard != null)
            {
                turn2DownloadViewStoryboard.Completed += (s, e1) =>
                {//动画执行完成切换展示模式
                    SetDownloadWindowDisplayMode();
                    SetConfigViewTurningMode();
                };
                turn2DownloadViewStoryboard.CurrentTimeInvalidated += (s, e1) =>
                {//动画执行时切换成翻转模式
                    SetConfigViewTurningMode();
                };
            };
        }
        /// <summary>
        /// 设置下载页面进入展示模式
        /// </summary>
        private void SetDownloadWindowDisplayMode()
        {
            //var container = DownloadWindowPart.Parent as Viewport2DVisual3D;
            //if (container == null) return;
            //container.Visual = null;
            if (FrontViewport2DVisual3D.Visual==(DownloadWindowPart))
            {
                FrontViewport2DVisual3D.Visual = null;
            }
            DisPlayControl.Content = DownloadWindowPart;
        }
        /// <summary>
        /// 设置配置页面进入展示模式
        /// </summary>
        private void SetConfigViewDisplayMode()
        {
            //var container = ProxyConfigViewPart.Parent as Viewport2DVisual3D;
            //if (container == null) return;
            //container.Visual = null;
            if (BackViewport2DVisual3D.Visual==(ProxyConfigViewPart))
            {
                BackViewport2DVisual3D.Visual = null;
            }
            DisPlayControl.Content = ProxyConfigViewPart;
        }
        /// <summary>
        /// 设置下载页面进入翻转模式
        /// </summary>
        private void SetDownloadWindowTurningMode()
        {
            var container = DownloadWindowPart.Parent as UserControl;
            if (container == null) return;
            container.Content = null;
            FrontViewport2DVisual3D.Visual = DownloadWindowPart;
        }
        /// <summary>
        /// 设置配置页面进入翻转模式
        /// </summary>
        private void SetConfigViewTurningMode()
        {
            var container = ProxyConfigViewPart.Parent as UserControl;
            if (container == null) return;
            container.Content = null;
            BackViewport2DVisual3D.Visual = ProxyConfigViewPart;
        }
        /// <summary>
        /// 支持拖拽
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void DisPlayControl_OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }
    }
}

 

 呈现效果:
效果见下图,翻转动画执行完毕后不再模糊。
 
 
 
目录
相关文章
|
25天前
|
C#
WPF/C#:程序关闭的三种模式
WPF/C#:程序关闭的三种模式
19 3
|
12月前
|
C#
WPF控件和窗体一起放大一起缩小
WPF控件和窗体一起放大一起缩小
199 0
|
12月前
|
C# 容器
WPF框架下,窗体的嵌套显示
WPF框架下,窗体的嵌套显示
193 0
|
SQL 前端开发 C#
WPF MVVM模式
WPF MVVM模式
|
C# 索引
WPF实用指南二:移除窗体的图标
原文:WPF实用指南二:移除窗体的图标 WPF没有提供任何功能来移除窗体上的icon图标。一般的做法是设置一个空白的图标,如下图1: 这种做法在窗体边框与标题之间仍然会保留一片空白。
1180 0
|
Java C# 程序员
WPF程序中的弱事件模式
原文:WPF程序中的弱事件模式 在C#中,得益于强大的GC机制,使得我们开发程序变得非常简单,很多时候我们只需要管使用,而并不需要关心什么时候释放资源。但是,GC有的时并不是按照我们所期望的方式工作。 例如,我想实现一个在窗口的标题栏中实时显示当前的时间,一个比较常规的做法如下:     var...
1106 0
|
前端开发 C#
WPF 介绍一种在MVVM模式下弹出子窗体的方式
原文:WPF 介绍一种在MVVM模式下弹出子窗体的方式 主要是通过一个WindowManager管理类,在window后台代码中通过WindowManager注册需要弹出的窗体类型,在ViewModel通过WindowManager的Show方法,显示出来。
2258 0
|
C#
WPF的5种绑定模式(mode)
原文:WPF的5种绑定模式(mode) WPF的绑定模式(mode)是枚举的 枚举值共有5个 1:OneWay(源变就更新目标属性) 2:TwoWay(源变就更新目标并且目标变就更新源) 3:OneTime(只根据源来设置目标,以后都不会变) 4:OneWayToSource(与OneWay相反) 5:Default(可以单向或双向,是靠被值定的源或目标是否有get或set来指定的) 所以绑定的话是需要选上面5个中的一个模式的,根据你的需要来选择,不选的话就会自动选择第五个的。
1126 0
|
C#
WPF去除窗体边框及白色边框
原文:WPF去除窗体边框及白色边框        0
1420 0
|
前端开发 C#
WPF 窗体显示最前端
原文:WPF 窗体显示最前端 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jjx0224/article/details/8782845 ...
1135 0