1

Shape から派生していない要素を描画する独自のキャンバス (黒い領域) を作成しました。代わりに、オーバーライドされたメソッド Canvas.OnRender で DrawingContext を使用して描画します。

問題は、ビデオ ファイルを再生し、キャンバスの特定の領域 (赤い四角形など) にフレームをレンダリングすることです (これも OnRender です)。ただし、通常、MediaPlayer は、UIElement の背景全体を塗りつぶすブラシに直接バインドされます。

何か助けはありますか？

ここに画像の説明を入力

さて、ここでもう少し説明を。キャンバスを任意の方向にスクロール、パン、ズームできます。これは、drawingContext を使用して OnRender で描画するコンテンツに影響を与えます。次の図は、Web カメラからフレームごとに取得される画像 (ドア) を含むキャンバスを示しています。したがって、キャンバスが無効になるたびに、drawingContext.DrawImage 内で BitmapSource を使用できます。そして、私はまだプリミティブを描くことができます。MediaPlayer/MediaElement の問題は、フレームごとに取得できないことですが、キャンバス内の Web カメラ画像と同じようにレンダリングしたいと考えています。

ここに画像の説明を入力

4

3 に答える 3

2

次のように、ClipをCanvasに適用してみてください。

<Canvas Width="800" Height="600" Background="Black">
    <Canvas.Clip>
        <RectangleGeometry Rect="0,0,10,10" />
             <!-- whatever you want -->    
    </Canvas.Clip>
</Canvas>
于 2012-11-15T17:17:20.620 に答える
2

最後に、それを達成する方法を見つけました。MediaPlayer が必要で、それを各 Canvas.OnRender ループの drawingContext.DrawVideo にフィードするだけです。以下のサンプル画像とコード。また、ビデオからフレーム (BitmapSource) をキャプチャするメソッドと、それを古い System.Drawing.Bitmap に変換する方法も含めました)。

public partial class RenderCanvas : UserControl
{
    readonly MediaPlayer player;

    public RenderCanvas()
    {
        InitializeComponent();

        player = new MediaPlayer();
        player.Open(new Uri(@"test.avi", UriKind.Relative));
        player.Play();
    }

    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);

        if (player != null && player.Source != null)
            drawingContext.DrawVideo(player, new Rect(0, 0, 200, 150));

        // draw any shape in front of the video
        drawingContext.DrawEllipse(Brushes.Blue, new Pen(Brushes.Red, 5), new Point(150, 150), 60, 60);
    }

    BitmapSource GetBitmapSourceFromVideo()
    {
        var drawingVisual = new DrawingVisual();
        var renderTargetBitmap = new RenderTargetBitmap(player.NaturalVideoWidth, player.NaturalVideoHeight, 96, 96, PixelFormats.Default);
        using (var drawingContext = drawingVisual.RenderOpen())
        {
            drawingContext.DrawVideo(player, new Rect(0, 0, player.NaturalVideoWidth, player.NaturalVideoHeight));
        }

        renderTargetBitmap.Render(drawingVisual);

        return renderTargetBitmap;
    }

    System.Drawing.Bitmap GetBitmapFromVideo()
    {
        BitmapSource bitmapSource = GetBitmapSourceFromVideo();

        var encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(bitmapSource));
        using (var stream = new MemoryStream())
        {
            encoder.Save(stream);
            stream.Seek(0, SeekOrigin.Begin);

            return (System.Drawing.Bitmap)System.Drawing.Image.FromStream(stream);
        }
    }
}

サンプル アプリケーションの XAML コードを次に示します。RenderCanvas の XAML に変更はありません。

<Window x:Class="CanvasTest_OnRender.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:CanvasTest_OnRender="clr-namespace:CanvasTest_OnRender" Title="MainWindow" Height="350" Width="525">
    <Grid>
        <CanvasTest_OnRender:RenderCanvas />
    </Grid>
</Window>

ビデオの前にユーザーが描いた楕円

于 2012-11-18T22:18:59.747 に答える