绘制阴影图像，而在的DrawingContext画 [英] Draw shadow on image while drawing on DrawingContext

问题描述

我在画我的自定义FrameworkElement的的OnRender方法的图像。我想提请该图像的阴影，以及。我需要做的code，我不会喜欢使用DropShadowBitmapEffect，因为它已经过时了。我怎样才能做到这一点？

I draw an image in OnRender method of my custom FrameworkElement. I would like to draw a shadow of this image as well. I need to do this in code, and I would not like to use DropShadowBitmapEffect because it is obsolete. How can I achieve this?

    public class MyDrawingView : FrameworkElement
    {
        protected override void OnRender(System.Windows.Media.DrawingContext dc)
        {
             drawImagesOnDrawingContext(dc);
        }

        public RenderTargetBitmap getBitmap()
        {
            DrawingVisual dv = new DrawingVisual();
            using (DrawingContext dcMine = dv.RenderOpen())
            {
                drawImagesOnDrawingContext(dcMine);
                dcMine.Close();
            }
            RenderTargetBitmap rtb = new RenderTargetBitmap(200, 200, 96, 96, PixelFormats.Pbgra32);
            rtb.Render(dv);
            return rtb;
        }

        private void drawImagesOnDrawingContext(System.Windows.Media.DrawingContext dc)
        {
            //how to draw shadow on bi?
            BitmapImage bi = new BitmapImage(new Uri(@"D:\mytemp\img1.jpg"));
            dc.DrawImage(bi, new Rect(50, 50, 100, 100));

            //how to draw shadow on bi1
            BitmapImage bi1 = new BitmapImage(new Uri(@"D:\mytemp\img2.jpg"));
            dc.DrawImage(bi1, new Rect(30, 30, 100, 100));
        }

    }

请注意，该解决方案通过SvenG以下建议，以添加效果的基本元素，对我不起作用，因为它给出了一个阴影，整个元素，而不是我画的各个图像。举例来说，如果我有两个重叠的DrawImage，建议的解决方案将利用影子考虑到整体。上部图像的阴影不会被绘制的下部图像上。

Note that the solution suggested by SvenG below, to add an effect to the underlying element, doesn't work for me because it gives a shadow to the whole element, not the individual images I draw. For example, if I were to have two overlapping DrawImage, the suggested solution will draw shadow considering the whole. The shadow of upper image will not be drawn on the lower image.

此外，我想创建一个使用getBitmap功能的位图如上图所示，绘制的图像输出的阴影。

Additionally, I want to create a bitmap using the getBitmap function as shown above to export the drawn image with the shadows.

推荐答案

目前在的DrawingContext PushEffect（）通话$ C>，将做你需要的是什么，但像BitmapEffect这是过时的。

There is an old PushEffect() call on DrawingContext that would have done what you required, but like BitmapEffect this is obsolete.

BitmapEffect 的替换是作用类。有一个叫子类 DropShadowEffect 这正是你是什么之后，但遗憾的是由于SvenG说，这不能直接应用于位图。

BitmapEffect's replacement is the Effect class. There is a subclass called DropShadowEffect that is exactly what you are after, but unfortunately as SvenG says, this cannot be applied directly to bitmaps.

这是支持应用效果的最低级别元素是 DrawingVisual 类。这是不是太糟糕，因为 DrawingVisual 是pretty的轻量级类。没有布局的开销。最好的办法是在其自己的 DrawingVisual 创建的每个位图，以及视觉的作用属性设置为一个 DropShadowEffect 。显然，如果你有成千上万的位图可能不是一个可行的解决方案。

The lowest level element that supports applying effects is the DrawingVisual class. This isn't too bad because DrawingVisual is a pretty lightweight class. There is no layout overhead. Your best bet would be to create each bitmap in its own DrawingVisual, and set the Effect property of the visual to a DropShadowEffect. Obviously if you have thousands of bitmaps it may not be a viable solution.

这一切都可以在code来完成，虽然没有的OnRender（），因为每个视觉都有自己的渲染上下文。但是，对于孩子DrawingVisuals正确渲染，你需要告诉他们的框架。

All this can be done in code, although not OnRender() since each visual has its own render context. However, for child DrawingVisuals to render properly, you need to tell the framework about them.

您需要覆盖在你的自定义元素的两种方法，才能看到这些视觉效果： VisualChildrenCount 说你有几个孩子，和GetVisu​​alChild（），以将它们返还给系统。正因为如此，你将需要保持可用的视觉效果的集合。您也可以拨打 AddVisualChild（）和 AddLogicalChild（）如果你想要做对他们的命中测试。

You need to override two methods in your custom element in order to see these visuals: VisualChildrenCount to say how many children you have, and GetVisualChild() to return them to the system. Because of this you will need to keep a collection of visuals available. You can also call AddVisualChild() and AddLogicalChild() if you want to do hit testing against them.

public class MyDrawingView : FrameworkElement
{
    List<DrawingVisual> _visuals = new List<DrawingVisual>();

    public MyDrawingView()
    {
        CreateVisuals();
    }

    //Gets a bitmap rendering of the visual and its children for saving as image file
    public RenderTargetBitmap GetBitmap()
    {
        var rtb = new RenderTargetBitmap(200, 200, 96, 96, PixelFormats.Pbgra32);
        rtb.Render(this);
        return rtb;
    }

    protected override int VisualChildrenCount
    {
        get
        {
            return _visuals.Count;
        }
    }

    protected override Visual GetVisualChild(int index)
    {
        return _visuals[index];
    }

    private void CreateVisuals()
    {
        CreateVisualForBitmap(@"D:\mytemp\img1.jpg", new Rect(50, 50, 100, 100));
        CreateVisualForBitmap(@"D:\mytemp\img2.jpg", new Rect(30, 30, 100, 100));
    }

    private void CreateVisualForBitmap(string bitmapPath, Rect bounds)
    {
        var bitmap    = new BitmapImage(new Uri(bitmapPath));
        var visual    = new DrawingVisual();
        visual.Effect = new DropShadowEffect();

        using (DrawingContext dc = visual.RenderOpen())
        {
            dc.DrawImage(bitmap, bounds);
        }

        _visuals.Add(visual);
        AddVisualChild(visual);
        AddLogicalChild(visual);
    }
}

这篇关于绘制阴影图像，而在的DrawingContext画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！