WPF中的绿屏 [英] Green screen in WPF

问题描述

我们有一个视频需要显示在一个按钮中，但是我们想要显示按钮的背景，而我们不能把背景放在视频中，因为按钮可以改变大小，而背景需要拉伸到按钮的大小，但不是视频.视频必须保持其大小比例，所以我想知道是否有办法在 WPF 中执行类似绿屏的操作，因此我们可以在视频上放置绿色背景，并让按钮忽略它以显示自己的背景.

我知道这是一个远景，但任何建议都非常受欢迎.

谢谢！

解决方案

好的，我找到了解决方案.4 个简单步骤.

1) 下载并安装 Shader Effects BuildTask 和模板>

2) 下载 WPF 像素着色器库.打开 MainSolution 文件夹中的解决方案，右键单击 WPFShaderEffectLibrary 进行编译，然后将编译后的 DLL 的引用添加到您的项目中.注意:仅编译 WPFShaderEffectLibrary，如果您尝试编译整个解决方案，它可能无法工作.

3) 如下使用像素着色器(我在 MainWindow 构造函数中使用了它，但这并不重要):

public MainWindow(){初始化组件();ColorKeyAlphaEffect 效果 = new ColorKeyAlphaEffect();Brush Brush = Effect.ImplicitInput;effect.Input = 画笔；//这是 xaml 中的 Image 控件.它应该包含//您想要绿屏效果的图像imageControl.Effect = 效果；}

你需要这个库:

使用 System.Windows;使用 System.Windows.Media;使用 System.Windows.Media.Effects;使用 ShaderEffectLibrary；

4) 着色器仅适用于黑色，因此您需要进行一些更改才能使其适用于绿色(或您喜欢的任何其他颜色)，就我而言，我希望使其适用于绿色(例如一个绿屏)，所以我改变了效果的值.在您从 Codeplex 下载的解决方案中，您必须转到 WPFShaderEffectLibrary 项目 -> ShaderSource 文件夹 ColorKeyAlpha.fx 文件.在那里，您必须更改以下代码:

 float4 main(float2 uv : TEXCOORD) : COLOR{float4 color = tex2D(隐式输入采样器，uv)；//由此if( color.r + color.g + color.b <0.3 ) {颜色.rgba = 0;}返回颜色；}

为此

float4 main(float2 uv : TEXCOORD) : COLOR{float4 color = tex2D(隐式输入采样器，uv)；//到这个if( color.r == 0 && color.g == 1.0 && color.b == 0 ) {颜色.rgba = 0;}返回颜色；}

完成后，重新编译 WPFShaderEffectLibrary 项目，并更新项目中的引用(第 2 步中的引用).参考更新后，PixelShader 将开始使绿色值 (R = 0, G = 255, B = 0) 完全透明.它适用于图片和视频.

我真的很难做到这一点，我希望它对任何阅读本文的人有用:)

谢谢！

We have a video that we need to show in a button, but we want the background of the button to show, and we can't put the background in the video because the button can change the size, and the background needs to stretch to the size of the button, but not the video. The video has to keep its size ratio, so I'm wondering if there is a way to do something like a green screen in WPF, so we can put a green background on the video, and have the button ignore it to show its own background.

I know this is a long shot but any suggestion is very welcome.

Thanks!

解决方案

Ok, I found the solution. 4 easy steps.

1) Download and install Shader Effects BuildTask and Templates

2) Download WPF Pixel Shader library. Open the solution in the MainSolution folder, and right click on the WPFShaderEffectLibrary to compile it, then add a reference to the compiled DLL to your project. NOTE: Only compile WPFShaderEffectLibrary, if you try to compile the whole solution it probably won't work.

3) Use the pixel shader as follows (I used it in the MainWindow constructor but that doesn't really matter):

public MainWindow()
{
    InitializeComponent();

    ColorKeyAlphaEffect effect = new ColorKeyAlphaEffect();

    Brush brush = Effect.ImplicitInput;

    effect.Input = brush;

    // This is the Image control in your xaml. It should contain 
    // the image in which you want the green screen effect
    imageControl.Effect = effect;
}

You'll need this libraries:

using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Effects;
using ShaderEffectLibrary;

4) The shader only works with black, so there is something you need to change to make it work with green (or any other color you like), in my case, I was looking to make it work with green (like a greenscreen), so I changed the value of the effect. In the solution you downloaded from Codeplex, you have to go to the WPFShaderEffectLibrary project -> ShaderSource folder ColorKeyAlpha.fx file. In there, you have to change the following code:

    float4 main(float2 uv : TEXCOORD) : COLOR
    {
       float4 color = tex2D( implicitInputSampler, uv );

       // FROM THIS
       if( color.r + color.g + color.b < 0.3 ) {
          color.rgba = 0;
       }

       return color;
    }

To this

float4 main(float2 uv : TEXCOORD) : COLOR
{
   float4 color = tex2D( implicitInputSampler, uv );

   // TO THIS
   if( color.r == 0 && color.g == 1.0 && color.b == 0 ) {
      color.rgba = 0;
   }

   return color;
}

Once that is done, recompile the WPFShaderEffectLibrary project, and update the reference in your project (the one in step #2). Once the reference is updated, the PixelShader will start making the green value (R = 0, G = 255, B = 0) completely transparent. And it'll work with both images and videos.

I really had a hard time achieving this, I hope it useful to anyone who reads this :).

Thanks!

这篇关于WPF中的绿屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！