梯形上的C#/WPF图像变换

本文介绍了梯形上的C#/WPF图像变换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一张图像，想要在WPF中通过梯形缩放/拉伸它.有一个简单的方法吗?我想实现3D效果/透视/弯曲.基本上是拍摄2D图像并将其在3D空间中弯曲.

I have an image which I want to scale/stretch it over a trapezoid in WPF. Is there an easy way of doing it? I want to achieve 3D effect / perspective / bending. Basically taking a 2D image and bending it in 3D space.

这就是我要完成的事情:

This is what I want to accomplish:

original: new: * * * * * * * *

另一点注意，我需要尽快完成此操作.我尝试使用此代码，但性能无法使用: www.vcskicks/image -distortion.php

Another note, I need this to happen very fast. I tried using this code, and the performance is unusable: www.vcskicks/image-distortion.php

任何帮助将不胜感激.提前非常感谢！

Any help would be greatly appreciated. Thanks a lot in advance!

推荐答案

我认为最简单的方法是使用.只需设置一个带有透视投影的视口，然后在其中放一个四边形，然后将内容进行变换，剩下的事情将由GPU完成.

I think the easiest way to do this fast is using the WPF 3D. Just set-up a viewport with perspective projection and put a quad with the content being transformed there, GPU will do the rest.

WPF的

WPF has a very nice MatrixTransform class which offers GPU-accelerated transformations of pretty much anything (and its derivatives which simplify application of for example rotation transformation). Sadly, the trapezoid transformation is not possible to do with simple matrix transform, these are mathematically limited to scaling, shearing and rotations (and their combinations).

您还可以在此处看到一些示例，3D为在WPF中确实微不足道.

You can also see some examples here, 3D is really trivial in WPF.

这是显示在透视图中显示的通用按钮的代码.如果需要的话，请不要尝试与之互动，请使用Google"WPF Interactive3D".

here is code which displays a common button displayed in perspective view. Don't try to interact with it, google "WPF Interactive3D" if you want that.

如果只希望在3D视图中显示图像，则不必使用VisualBrush.

If you want only image to be displayed in the 3D view, you don't have to use the VisualBrush.

此外，如果您确实希望映射的内容适合视口的边缘，则必须固定坐标，您可能必须进行大量实验或一些数学运算才能计算出坐标.如果您感觉不错(请在清理代码后，我只是编辑了一个在某个地方找到的示例)，请把结果发布出去.

Also, the coordinates will have to be fixed if you really want the mapped content to fit with the edges of the viewport, you will likely have to do a lot of experimenting or some math to calculate the coordinates. lease post the result if you get something nice (after you cleanup the code, I just edited an example I found somewhere).

您现在正式欠我您的灵魂:D

And you now officially owe me your soul :D

<Window x:Class="WpfApplication2.MainWindow" xmlns="schemas.microsoft/winfx/2006/xaml/presentation" xmlns:x="schemas.microsoft/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <DockPanel> <Viewport3D> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="-0.5 0.5 -0.5, 0.5 0.5 -0.5, -0.5 0 0.5, 0.5 0 0.5" TriangleIndices=" 0 2 1, 1 2 3" TextureCoordinates="0 0, 1 0, 0 1, 1 1" /> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <VisualBrush> <VisualBrush.Visual> <Button>Hi</Button> </VisualBrush.Visual> </VisualBrush> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material> <!-- Non-Affine Matrix Transform. --> <GeometryModel3D.Transform> <MatrixTransform3D> </MatrixTransform3D> </GeometryModel3D.Transform> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> <!-- Light sources. --> <ModelVisual3D> <ModelVisual3D.Content> <Model3DGroup> <AmbientLight Color="#404040" /> <DirectionalLight Color="#C0C0C0" Direction="0 -2 -1" /> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> <!-- Camera. --> <Viewport3D.Camera> <PerspectiveCamera Position="0 0.2 1" LookDirection="0 0 -1.5" UpDirection="0 1 0" FieldOfView="100"> </PerspectiveCamera> </Viewport3D.Camera> </Viewport3D> </DockPanel> </Window>